Link to a deployed app: here
This is a full-stack Todo application that allows users to register, log in, and manage their tasks. The app uses JWT-based authentication, ensuring that only authenticated users can access their tasks. It implements CRUD operations for managing tasks and includes a responsive, user-friendly interface built with React and styled using Chakra UI. The backend is powered by Node.js, Express, and MongoDB.
- User Authentication: Users can register, log in, and access their profile information.
- CRUD Operations on Todos: Users can create, read, update, and delete todos.
- Task Filtering and Search Filtering feature allows for a multi-criteria search on todos.
- Tag Management
- Dark/Light Mode Toggle: The app supports dark and light modes, with a toggle feature.
- Chakra UI for Responsive Design: The app uses Chakra UI to provide a good user experience.
- Protected Routes: The app uses protected routes to ensure that users cannot access pages like the todo list or profile without logging in.
- API Integration: created endpoints for:
- user management
- registration (endpoint for taking the user's details, hashing the password using bcrypt, and storing the user in the MongoDB database using mongoose)
- login (endpoint to check if the user's credentials match any record in the database)
- jwt verification (to protect sensitive routes: only logged in users can access specific parts of API)
- todo items management (creation, fetching, update, deletion)
- user management
- UI components:
@chakra-ui: library that provides customizable components
- react frameworks:
react: fore building user interfacereact-dom: for rendering react components to the DOMreact-router-dom: for managing navigation/routing in the application
- HTTP requests to the backend server:
axios - development utilities:
vite: for serving React application
- server:
express: for building and handling server routes and middleware
- database:
mongoose: for interacting with MongoDB using schemas
- authentication:
jsonwebtoken: for secure json token based authenticationbcrypt: for password hashing
- environment management:
dotenv: for managing environment variables
- development utilities:
nodemon: for automatic server restart when code changes during development
concurrently: for running multiple npm scripts (e.g., frontend and backend servers) simultaneously.
Light mode:
Dark mode:
Adding a filter:
-
User Registration and Login:
- Users can create a new account or log in with an existing account.
- Passwords are hashed before storage for added security.
-
Todo Management:
- Add, edit, and delete todos.
- Mark tasks as completed or incomplete.
-
Task Filtering and Search:
- Users can filter tasks based on multiple criteria such as task text, tags, and completion status.
- Supports dynamic filtering, with dropdown menus and tag search.
-
Tag Management:
- Users can add multiple tags to a task and filter tasks by specific tags.
- The app auto-generates a list of available tags for users to choose from.
-
Profile Page:
- Displays user details such as username and email.
- Accessible only to authenticated users.
-
Dark/Light Mode:
- Toggle between dark and light modes using the switch on the navigation bar.
The project is organized into two main sections: client and server. This structure represents a full-stack application, where the client folder contains the front-end code (React application) and the server folder contains the back-end code (Node.js + Express server). Client folder:
- elements/: stores React components that form the building blocks of the user interface (UI).
- api/: contains files that handle API requests
axiosTokenInterceptor.jsinside of api/ includes logic for adding authentication tokens (jwt tokens) to outgoing requests for secure communication between the frontend and backend.
Server folder:
- controllers/: Contains controller functions for handling API requests related to users and todos.
- middleware/: Holds middleware functions, such as authentication, that are executed during request processing.
- models/: This folder contains Mongoose models representing the MongoDB collections (e.g., User, Todo).
- node_modules/: Holds all the npm dependencies for the back-end.
- routes/: Contains the route definitions for various API endpoints, including user authentication and todo operations.
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/hanna-melnyk/todo.git
cd todo- Install Dependencies: Install server dependencies:
cd server
npm installInstall client dependencies:
cd client
npm install- Set Up Environment Variables:
- The JWT (JSON Web Token) secret is a crucial part of your authentication system. It is used to sign and verify tokens. To ensure security, the JWT secret should be a long, complex string of random characters. This will make it difficult for attackers to guess or brute force. You can generate a random string for your JWT secret using the following command in your PowerShell terminal:
[Convert]::ToBase64String((1..32 | ForEach-Object { [byte](Get-Random -Minimum 0 -Maximum 256) }))
- You can create a free MongoDB database by following the steps on the official MongoDB website: Create MongoDB Database
After generating jwt secret and creating a database it's time to set them as environmental variables.
Create a .env file in the server directory and include the following:
MONGO_URI=<your_mongodb_connection_string>
JWT_SECRET=<your_jwt_secret>- Run the Server:
Navigate to the
serverfolder and run the following:
npm run devThe backend server should be running at http://localhost:5000.
- Run the Client:
Navigate to the
clientfolder and run the following:
npm run start-
User Routes:
POST /api/register: Register a new userPOST /api/login: Login a userGET /api/profile: Get the current user's profile (requires authentication)
-
Todo Routes:
GET /api/todos: Get all todos for the logged-in user (requires authentication)POST /api/todos: Create a new todo (requires authentication)PUT /api/todos/:id: Update an existing todo (requires authentication)DELETE /api/todos/:id: Delete a todo (requires authentication)