This is a simple client side aplication made using NextJS, Typescript, eslint, prettier, Chakra-ui and Axios. The app asks the user to input book details and add it to a plan to read list. The usercan use drag and drop functionality to reorder the list, but it's still incomplete and can't change it to adjacent lists.
To be able to run this project you should first run the server
This project was bootstrapped with Create Next App.
- UI: React
- State Control: Context for global state e React Hooks for local state
- Styling: Chakra-ui
- HTTP Client: Axios
- Icons: Chakra-ui
Install dependencies:
yarn (or npm i)Done! Start the service:
yarn dev#Development mode
# run the app in development mode
yarn dev
# next dev starts the application in development mode with hot-code reloading, error reporting, and more.#Production mode
# When building the Next.js app for production, you'll want to use next build:
next build
# next build creates an optimized production build of your application. The output displays information about each route.
Size – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.
First Load JS – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.
# Followed by either next start, when you want to start the production server:
next start
# next start starts the application in production mode. The application should be compiled with next build first.
# Or next export, when exporting the app as static HTML:
next export
# next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.
# For more information refer to docs.
For more information refer to * [Next.js CLI](https://nextjs.org/docs/api-reference/cli) docs.src/code base;src/hooksconfig and custom hook for data fetch, used to get the token and messages in this project;src/componentscomponents isolated with its styling (if any);src/contextthe QuizContext used for global state control of the quiz related data;src/Pages/first level router components;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent