Skip to content

DoneIt is a task tracker app built with Firebase. It lets users sign up, log in, and manage tasks with features like adding, editing, and filtering. The app uses Firebase Firestore for data storage and JavaScript modules for clean code.

Notifications You must be signed in to change notification settings

yousefkhalaf0/Front-End-Firebase-Project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DoneIt - Task Tracker

DoneIt is a simple task tracker application built as part of the Firebase course at ITI. It allows users to sign up, sign in, and manage their tasks efficiently. The application is built using Firebase for authentication and Firestore for data storage. The project also utilizes JavaScript modules for better code organization and data encapsulation.

Features

  • User Authentication: Sign up and sign in using email and password.
  • Task Management: Add, update, delete, and toggle the status of tasks.
  • Task Filtering: Filter tasks by status (all, pending, completed).
  • Task Search: Search for tasks by title.
  • Responsive Design: The application is responsive and works well on different screen sizes.
  • Modular Code: The project uses JavaScript modules for better code organization and data hiding.

Technologies Used

  • Frontend: HTML, CSS, JavaScript (ES6 Modules)
  • Backend: Firebase (Authentication, Firestore)

Setup Instructions

  1. Clone the Repository:

    git clone https://github.com/your-username/doneit-task-tracker.git
    cd doneit-task-tracker
  2. Install Dependencies: Since this project uses Firebase via CDN, there are no additional dependencies to install.

  3. Set Up Firebase:

    • Create a new Firebase project at Firebase Console.
    • Add a web app to your Firebase project and copy the Firebase configuration.
    • Replace the firebaseConfig object in main.js with your Firebase configuration.
  4. Run the Application:

    • Open the index.html file in your browser to start using the application.

ERD (Entity-Relationship Diagram)

The application uses Firestore to store tasks. Below is the ERD for the Firestore collections:

users (Collection)
├── userId (Document)
│   ├── email: String
│   └── tasks (Subcollection)
│       ├── taskId (Document)
│       │   ├── title: String
│       │   ├── description: String
│       │   ├── status: String ("pending" or "completed")
│       │   └── userId: String (Reference to the user)

Data Model

  • Users Collection:

    • email: The email address of the user.
    • tasks: A subcollection of tasks associated with the user.
  • Tasks Collection:

    • title: The title of the task.
    • description: The description of the task.
    • status: The status of the task, either "pending" or "completed".
    • userId: The ID of the user who created the task.

Main JavaScript File (main.js)

The main.js file contains all the logic for user authentication and task management. Below is a summary of the main functions:

  • Authentication:

    • signUp(): Handles user sign-up.
    • signIn(): Handles user sign-in.
    • signOut(): Handles user sign-out.
  • Task Management:

    • addTask(): Adds a new task or updates an existing task.
    • getTasks(): Retrieves and displays tasks based on the selected filter and search query.
    • toggleTaskStatus(): Toggles the status of a task between "pending" and "completed".
    • editTask(): Populates the form with task details for editing.
    • deleteTask(): Deletes a task after confirmation.
  • Utility Functions:

    • clearInputs(): Clears the form inputs after adding or updating a task.
    • search(): Handles the search functionality for tasks.
    • filter(): Handles the filtering of tasks by status.

Screenshots

![Sign Up Page]image ![Sign In Page]image ![Main Page]image image

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue if you find any bugs or have suggestions for improvements.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

DoneIt is a task tracker app built with Firebase. It lets users sign up, log in, and manage tasks with features like adding, editing, and filtering. The app uses Firebase Firestore for data storage and JavaScript modules for clean code.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published