/Todo-App-MERN-Task

A Real-time Todo App using Node.js, React.js, Typescript

Primary LanguageJavaScript

Todo App

This is a Todo App that can help you make your Todos come trues, it supports real-time adding, editing & deleting a todo with just a click.

Technologies Used

  • Node.js ( Express.js ).
  • MongoDB and Mongoose.
  • React.js
  • Typescript
  • React Query for handling requests.
  • React Hook Form for validating todo from.
  • Axios for fetching
  • TailwindCSS for styling UI.

Installation

To install the application, please follow these steps:

  1. Clone the repository to your local machine.
  2. Run npm install in (server, client and this current directories) to install all dependencies of the frontend and the backend.
  3. Create a .env file in the server directory and add the necessary environment variables. You can use the .env.example file as a template.
  4. To run the project, you can run both of the frontend and the backend of the app with single command npm run start in the main directory of the project.
  5. Go to http://localhost:5173/ to access the app.

Features

  • You can add, delete any notes you want instantly as long as the title of the todo is not duplicated.
  • You can Edit the title or the deatils of a todo by just clicking on anyone of them and it'll be saved instantly.
  • Same goes with marking a todo as a completed one, it'll be marked instantly.
  • The application is secured against famous cyber attacks like DDoS by rate limiting the requests, XSS, CSRF and a lot more so your todos will be in safe hands.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.