audreyfabiola/todo-app-react-firebase

A simple todo application built with React.js and Firebase for user authentication and data storage.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- @vitejs/plugin-react uses Babel for Fast Refresh

- @vitejs/plugin-react-swc uses SWC for Fast Refresh

Todo List App ᡣ𐭩

This is a simple Todo List application where users can manage their tasks effectively. The app provides features to edit, delete, filter, and mark tasks. It also includes authentication and Firebase integration for user data management, including login, sign up, and user details editing.

Features

• Authentication: Users can sign up and log in securely using Firebase authentication.
• User Profile Management: Users can edit their username and profile picture.
• Add Tasks: Users can add tasks by entering task details.
• Edit Tasks: Users can edit existing tasks to update task details.
• Delete Tasks: Users can delete tasks that are no longer needed.
• Filter Tasks: Users can filter tasks based on completion status.
• Mark Tasks: Users can mark completed tasks by clicking on the checkbox.

Pages Available

• Login Page: Allows users to log in to their account.
• Sign Up Page: Allows new users to create an account.
• Homepage: The homepage serves as the central hub where users can navigate to various sections of the app, including account settings, the todo list, and logout.
• Account Settings Page: Users can manage their profile settings here, including editing their profile picture and username.
• Todo List Page: Displays the list of tasks added by the user. Allows users to perform actions such as adding, editing, deleting, and filtering out tasks.

Screenshots

Login Page

Sign Up Page

Sign Up Page with Toasts

Homepage

Account Settings Page

Todo List page

Link to the Todo List App

https://todo-app-react-firebase-lime.vercel.app/