ToDoo

A To-Do list app with online user logins for personalized task management.

🎥 Project Demo

Tech Stack

Frontend

React

Tailwind

HTML5

TypeScript

Shadcn

Backend

Express

Node.js

MySQL

JavaScript

Tools

GitHub

Postman

Figma

NPM

VS

Vite

Project Documentation

Login Page

The login page is designed to be fully responsive for both desktop and mobile users. It uses state management to handle form inputs and error tracking effectively. This means that when a user enters incorrect information, the page immediately updates to display error messages and guides them towards correct input. The layout adapts seamlessly across different screen sizes, ensuring an optimal user experience on both mobile and desktop devices.

Features:

• Responsiveness: Adjusts layout and elements for mobile and desktop views.
• Error Handling: Uses state to manage and display form errors in real time.
• Intuitive Design: A simple and clean design that provides visual feedback for user actions.
• User Authentication with JWT:
  • Users can log in with their credentials and receive a secure JWT.
  • The token is used for user authentication on subsequent requests, allowing seamless access to the app without re-authentication.
  • Tokens have an expiration time and can be refreshed to keep the user logged in without requiring them to re-enter credentials.

Register Page

The register page is also responsive and optimized for a user-friendly experience across different devices. One unique feature of the register page is its password strength indicator. Using state management, the application dynamically tracks and displays password strength as the user types, providing instant feedback on whether the password is weak, moderate, or strong. This ensures users create secure passwords in line with best practices.

Features:

• Responsiveness: The layout adjusts for both mobile and desktop screens.
• Password Strength Indicator: Uses state to evaluate password strength in real-time and display visual feedback.
• Error Handling: Provides immediate feedback for any form input errors to guide the user.

Screenshots

Login and Register

Home Page

Desktop

Mobile

Other

Task card:

Success Toasts:

Finished Tasks:

Future Updates

Here are some exciting features I plan to add in the future:

1. Collections

• Users will be able to group their tasks into different collections or categories (e.g., Work, Personal, Study).
• This feature will allow for better organization and management of tasks.

2. Notifications

• A notification system will alert users when tasks are due or approaching their deadline.
• Users will be able to customize notification settings (e.g., frequency, time of notification).

3. Reminder System

• A reminder feature will allow users to set reminders for specific tasks, which can trigger notifications at chosen times.
• The reminder system will include options for recurring tasks and one-time reminders.

These features will enhance the user experience and make managing tasks even more efficient!