The frontend for a task management web application, connected to a task-manager-backend REST API.
- The project has two pages which both display all tasks; the first page calls the axios get request with a useEffect hook, the second page makes the same get request call using React Query.
- This duplication is intentional, to highlight the benefits of using cached data from React Query
- All git commits follow the Conventional Commits guidelines
- The following actions are available to the user:
- Create tasks
- View all tasks, with filtering, sorting, searching, etc.
- Edit tasks
- Delete task(s)
Before running the application, ensure you have the following installed:
-
Node.js: Ensure you have Node.js installed. You can download it from nodejs.org (Version v20.10.0 or later).
-
npm: npm (Node Package Manager) comes bundled with Node.js.
-
Git: Git is required for version control. Install it from git-scm.com.
Follow these steps to set up the project:
- Clone this repository:
git clone https://github.com/JamesVickers/task-manager-frontend`
- Navigate to the project directory, for example:
cd task-manager-frontend
- Install dependencies using the following command:
npm install
You must have the corresponing REST API project running locally. For instructions on how to do this, see the README.md file for the corresponding task-manager-backend REST API. The task-manager-backend README file will also explain how to set up a local MongoDB instance running.
Once the local MongoDB and REST API backend are running, you are ready to connect the frontend by running the code in this repo locally.
For development, open a new terminal window and run the project using the following command: ```bash npm run dev.
Visit ttp://localhost:3000/ to view the application.
In the project directory, you can run the following scripts:
- Development Mode:
npm run dev
- Build:
npm run build
- Build:
npm run start
- ESLint:
npm run lint
- @emotion/react: ^11.11.1
- @emotion/styled: ^11.11.0
- @mui/icons-material: ^5.14.19
- @mui/material: ^5.14.20
- axios: ^1.6.2
- mui-datatables: ^4.3.0
- next: 14.0.3
- react: ^18
- react-dom: ^18
- react-query: ^3.39.3
- @types/mui-datatables: ^4.3.11
- @types/node: ^20
- @types/react: ^18
- @types/react-dom: ^18
- eslint: ^8
- eslint-config-next: 14.0.3
- typescript: ^5