This is a full-stack TODO list application built using the MERN (MongoDB, Express, React, Node.js) stack. The application allows users to sign up, log in, create, edit, delete TODO items, and filter them based on status and due dates. The design is responsive, ensuring a seamless experience across various devices.
- User Authentication: Sign up, log in, and log out functionalities.
- TODO Management: Create, read, update, and delete TODO items.
- Filtering: Filter TODO items by status (e.g., All, Overdue, To Do, Done) and due dates.
- Status Updates: Mark TODO items as done or undo them.
- Responsive Design: Ensures usability on mobile, tablet, and desktop screens using Tailwind CSS.
- Node.js: JavaScript runtime for building server-side applications.
- Express: Web framework for Node.js.
- MongoDB: NoSQL database for storing TODO items and user information.
- Mongoose: ODM for MongoDB, providing schema-based solutions.
- JWT (jsonwebtoken): For securing endpoints with token-based authentication.
- bcryptjs: For hashing passwords.
- React: JavaScript library for building user interfaces.
- React Router: For handling client-side routing.
- Axios: For making HTTP requests.
- React Hook Form: For handling form state and validation.
- Tailwind CSS: Utility-first CSS framework for styling.
- React Icons: For using popular icons.
- Framer Motion: For animations.
- Moment.js: For date formatting and manipulation.
- Node.js and npm: Ensure you have Node.js and npm installed.
- MongoDB: MongoDB should be installed and running on your machine.
-
Clone the repository
git clone <repository-url> cd todo-app
-
Install backend dependencies
cd server npm install
-
Install frontend dependencies
cd ../client npm install
-
Environment Variables: Create a
.env
file in theserver
directory and add the following environment variables:PORT=5000 MONGO_URI=<your-mongodb-uri> JWT_SECRET=<your-secret-key>
-
Start the Backend Server: Run the following command to start the server in development mode:
cd server npm run dev
- Start the Frontend Development Server: Run the following command to start the frontend:
cd client npm start
server/config/db.js
: Database connection setup.server/controllers
: Contains controller files for handling requests.todo-controller.js
: Handles TODO-related requests.user-controller.js
: Handles user-related requests.
server/errors
: Custom error classes.server/middleware
: Middleware functions.account-auth-middleware.js
: Middleware for authenticating user requests.
server/models
: Mongoose models for MongoDB collections.todo-db.js
: TODO schema and model.user-db.js
: User schema and model.
server/routes
: Defines routes for the application.todo-routes.js
: Routes for TODO-related endpoints.user-routes.js
: Routes for user-related endpoints.
server/utils
: Utility functions.account-util.js
: Utility functions for hashing passwords.error-handler.js
: Global error handler.
server/server.js
: Entry point for the backend server.
client/src/components
: Reusable React components.Filter.js
: Component for filtering TODO items.Footer.js
: Footer component.Header.js
: Header component with navigation.TodoForm.js
: Form for adding and editing TODO items.TodoItem.js
: Component representing a single TODO item.TodoList.js
: Component for listing TODO items.TodoModal.js
: Modal component for TODO forms.
client/src/hooks
: Custom React hooks.useTodos.js
: Hook for managing TODO state and operations.
client/src/pages
: React components representing different pages.HomeScreen.js
: Home page.LoginScreen.js
: Login page.RegisterScreen.js
: Registration page.TodoScreen.js
: Main TODO management page.
client/src/utils
: Utility functions.api.js
: Functions for making API requests.filterTodos.js
: Function for filtering TODO items.getToken.js
: Utility function for retrieving the authentication token.
client/src/App.js
: Main application component.client/src/index.js
: Entry point for the React application.client/src/index.css
: Global styles using Tailwind CSS.
Contributions are welcome! If you have any suggestions, enhancements, or bug fixes, feel free to open an issue or create a pull request.
If you have any questions or want to connect, you can reach me on LinkedIn.