This is a backend API for a task management application. It allows users to register, login, create tasks, update their status, and delete them. The app uses MongoDB for database storage, JWT for authentication, and Socket.io for real-time communication.
- Node.js: JavaScript runtime environment
- Express.js: Web framework for Node.js
- MongoDB: NoSQL database
- Mongoose: MongoDB ORM for interacting with the database
- JWT: For secure user authentication
- Socket.io: For real-time features (if needed)
- bcryptjs: For password hashing
- Node.js (>=14.x)
- MongoDB Atlas Account (for cloud database or local MongoDB setup)
- .env file (environment variables)
Follow these steps to get your environment up and running:
npm install
Create a .env file in the root directory of your project and add the following configurations:
MONGO_URI=mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 JWT_SECRET=your_jwt_secret PORT=5000
Use Nodemon for auto-reloading during development. npm run dev The server will start and be available at http://localhost:5000.
Registers a new user.
Body:
{
"username": "your_username",
"password": "your_password"
}
Logs in an existing user and returns a JWT token.
Body:
{
"username": "your_username",
"password": "your_password"
}
Creates a new task.
Body:
{
"title": "Task Title",
"description": "Task Description",
"status": "pending" // Optional, defaults to 'pending'
}
Gets all tasks for the authenticated user.
Updates the status of a task.
Params:
id: The task ID.
status: The new status, one of pending, completed, or canceled.
Deletes a task.
Params:
id: The task ID.
All routes except for the auth routes require authentication via JWT tokens. To authenticate, you need to include the token in the Authorization header: Authorization: Bearer
Currently, there are no tests defined in the project, but you can use Postman or similar tools to test the API manually.
This is the frontend part of the task management application. It interacts with the backend API to allow users to register, log in, create tasks, update their status, and delete tasks.
The app uses React for the user interface, Redux for state management, and Axios for making HTTP requests.
- React: JavaScript library for building user interfaces.
- Redux: State management for React applications.
- Axios: HTTP client for making requests to the backend API.
- React Router: For navigation between pages.
- Tailwind CSS: Utility-first CSS framework for styling the components.
- React Hooks: For managing state and side-effects in functional components.
Follow these steps to get the frontend up and running:
npm install
Create a .env file in the root directory of your project and add the following: REACT_APP_API_URL=http://localhost:5000/api
npm start
Description: Users can log in using their credentials (username and password).
Functionality: After successful login, the user is redirected to the tasks page, and the JWT token is stored in localStorage for authentication.
Description: New users can register by providing a username and password.
Functionality: After successful registration, the user is redirected to the login page.
Description: The main page where users can view, create, update, and delete tasks.
Components:
TaskList: Displays a list of tasks retrieved from the backend API.
TaskItem: Represents individual tasks with the ability to update their status or delete them.
TaskForm: Allows the user to create a new task.
Logs the user out by clearing the JWT token from localStorage and redirecting to the login page.
To log out, the application removes the JWT token from localStorage and redirects the user to the login page.
The frontend app requires JWT authentication. When a user logs in successfully, a JWT token is saved to localStorage and included in the Authorization header for subsequent requests to the backend.
All protected routes (e.g., tasks) require a valid token for access. If the token is not available, users will be redirected to the login page.