This is a MERN stack todo list application that serves as a test of your MERN knowledge. The project includes various features and tools to help you explore and enhance your understanding of the MERN stack.
You can check out the live demo of the project here.
-
Register user: Users can create new accounts to access the todo list functionality.
-
Login user: Registered users can log in to their accounts.
-
Logout user: Users can log out of their accounts when they are done.
-
CRUD todos: Create, read, update, and delete todos.
-
Dark mode: The application supports a dark mode theme.
-
Arabic language support: The application provides support for Arabic language translations.
-
Local storage persistence: The chosen theme and language preference of the user are saved to the local storage.
-
Updating user info: Users can update their profile information.
-
Filter todos: Users can filter todos based on different criteria.
-
Protected routes: Routes are protected, ensuring that only authenticated users can access them.
-
Authentication: The application includes authentication mechanisms to ensure secure access.
-
Server-side validation: The server performs validation of user input to maintain data integrity.
The following tools and technologies were used in the development of this project:
- React: JavaScript library for building user interfaces.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
- Node.js: JavaScript runtime environment.
- Express: Web application framework for Node.js.
- MongoDB: NoSQL database for storing application data.
- Mongoose: Object Data Modeling (ODM) library for MongoDB and Node.js.
- Redux Toolkit: Library for state management in React applications.
- Axios: Promise-based HTTP client for making API requests.
- react-i18next: Internationalization framework for React applications.
- react-router: Routing library for React applications.