DEV Community

Sowparna Shome
Sowparna Shome

Posted on

# Todo App with JWT-Based Authentication 🚀

Welcome to my latest project: a Todo App built using TypeScript, MongoDB, React, and Redux! This application not only allows users to manage their tasks efficiently but also implements a robust JWT-based authentication system to ensure secure access to todos. Let me take you through the features and functionality of this app. 🌟

Key Features

1. User Authentication 🔐

The app utilizes JSON Web Tokens (JWT) for authentication, allowing users to securely register, log in and out of their accounts, update and reset password as well. This ensures that only authorized users can access their personal todos.

2. CRUD Operations on Todos 📝

Users can easily Create, Read, Update, and Delete their todos. Each user's todos are stored separately, ensuring a personalized experience.

  • Create: Add new tasks to your todo list.
  • Read: View all your todos, with options to filter by status (Pending, Completed).
  • Update: Edit existing todos to modify their details or status.
  • Delete: Remove completed or unnecessary tasks from your list.

3. Responsive Design 📱💻

The application is designed to be fully responsive, ensuring a seamless experience across devices, whether you're using a smartphone, tablet, or desktop.

4. Redux for State Management ⚛️

Using Redux, the application efficiently manages the global state, making it easy to share data between components and maintain the application's performance.

Getting Started

To try out the app, visit the live link: Todo App.

Technologies Used

  • Frontend: React, TypeScript, Redux, Tailwind CSS
  • Backend: Node.js, Express.js, MongoDB, TypeScript
  • Authentication: JWT (JSON Web Tokens)

Installation & Setup

If you want to run the app locally, follow these steps:

  1. Clone the repository:
   git clone https://github.com/shome98/todo-auth
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies:
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run the application:
   npm start
Enter fullscreen mode Exit fullscreen mode

Conclusion

This Todo App showcases not only the fundamental CRUD operations but also the importance of secure user authentication. It provides a great platform for users to manage their tasks efficiently while keeping their data safe.

Feel free to check out the code on GitHub and contribute! I hope you find this project as exciting as I do. Happy coding! 🎉


If you have any questions or feedback, please leave a comment below!

Top comments (1)

Collapse
 
aniruddhaadak profile image
ANIRUDDHA ADAK

Absolutely incredible! 😻.