Task Manager Frontend

Description

The frontend for a task management web application, connected to a task-manager-backend REST API.

Technologies Used

• Next.js
• TypeScript
• Axios
• React Query.
• mui-datatables
• ESLint

Highlights

• 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)

Prerequisites

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.

Installation

Follow these steps to set up the project:

1. Clone this repository:

   git clone https://github.com/JamesVickers/task-manager-frontend`

2. Navigate to the project directory, for example: cd task-manager-frontend
3. Install dependencies using the following command:

   npm install
   

Setup

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.

Running the project 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.

Available Scripts

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
  

Dependencies

• @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

Dev Dependencies

• @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