TODO app with React and Vite Welcome to the TODO app. This app is a simple TODO app that allows users to add, edit, and delete tasks and their subtasks, with an intuitive and smooth UX. This app uses local storage for data persistence and includes a mock login system. This project was built for a take-home interview.
live URL: https://startling-zabaione-d1ae2e.netlify.app
please use [email protected] as email and admin as password (the auth system is just for demo)
The application provides an easy-to-use interface for users to manage their todos and related subtasks. Users can add, remove, and mark tasks or subtasks as completed. The application also handles mock login and logout operations.
- User Authentication: Mock login feature that checks the user's email and password to grant access.
- Todo Management: Users can create, update, and delete todos.
- Subtask Management: Each todo can have multiple subtasks that can also be managed by the user.
- Persistence: User login data is persistent across sessions thanks to local storage.
- Auto-routing: Depending on the authentication state, the application automatically routes users to the correct page.
- React.js
- Vite
- Typescript
- Tailwind CSS
- React Router
- Local Storage
- Clone the repository
cdinto the root directory- Run
npm installto install dependencies
- Run
npm run devto start the development server - Navigate to
localhost:5173(or the one shown in the console) to view the app
-To log in, use the following credentials:
-Email: [email protected] -Password: admin
- The app uses local storage to store user data. This is not secure and should not be used in production. A better solution would be to use a database and a server to handle authentication and data storage. -The project includes measures to prevent XSS attacks by sanitizing user inputs and decoding HTML entities when rendering tasks and subtasks
