Full Stack Todo Application

A complete Todo application built with React, Tailwind CSS, and Firebase Firestore. This application allows users to create, view, update, and delete tasks with real-time updates.

Features

• Create new todo items
• View all active and completed todo items
• Mark todo items as complete or incomplete
• Edit existing todo items
• Delete todo items
• Clear all completed tasks
• Real-time updates with Firestore
• Responsive design for mobile, tablet, and desktop
• User identification with Firebase Authentication

Tech Stack

• Frontend: React with Tailwind CSS
• Database: Firebase Firestore
• Authentication: Firebase Authentication
• Styling: Tailwind CSS with Inter font
• UI Components: Headless UI for modals

Prerequisites

• Node.js (v14 or later)
• npm or yarn
• Firebase project with Firestore enabled

Setup and Installation

1. Clone the repository or download the source code

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a Firebase project and enable Firestore:

   • Go to Firebase Console
   • Create a new project or use an existing one
   • Enable Firestore database
   • Set up Authentication (at least enable anonymous authentication)

4. Configure Firebase in the application:

   • The application expects the following global variables to be available:
     • __firebase_config: Your Firebase configuration object
     • __app_id: Your application ID
     • __initial_auth_token: Initial authentication token (if available)
   • These can be provided through environment variables or directly in the code for development
   • For local development, you can add your Firebase config and app ID in public/index.html:

     <script>
       window.__firebase_config = {
         apiKey: "YOUR_API_KEY",
         authDomain: "YOUR_AUTH_DOMAIN",
         projectId: "YOUR_PROJECT_ID",
         storageBucket: "YOUR_STORAGE_BUCKET",
         messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
         appId: "YOUR_APP_ID",
         measurementId: "YOUR_MEASUREMENT_ID"
       };
       window.__app_id = "your-app-id";
     </script>

   • Never commit real API keys or secrets to public repositories.

5. Start the development server:

   npm start
   # or
   yarn start

6. Open http://localhost:3000 in your browser

Project Structure

/
├── public/                 # Static files
│   ├── index.html          # HTML template
│   └── manifest.json       # Web app manifest
├── src/
│   ├── components/         # React components
│   │   ├── ConfirmModal.js # Confirmation dialog component
│   │   ├── ErrorModal.js   # Error message component
│   │   ├── TodoForm.js     # Form for adding new todos
│   │   ├── TodoItem.js     # Individual todo item component
│   │   └── TodoList.js     # List of todo items
│   ├── App.js              # Main application component
│   ├── firebase.js         # Firebase configuration and utilities
│   ├── index.js            # Application entry point
│   └── index.css           # Global styles with Tailwind
├── package.json            # Dependencies and scripts
├── tailwind.config.js      # Tailwind CSS configuration
└── postcss.config.js       # PostCSS configuration

Usage

• Adding a Todo: Type your task in the input field and click "Add"
• Completing a Todo: Click the checkbox next to a todo item
• Editing a Todo: Click the edit icon or double-click on the todo text
• Deleting a Todo: Click the delete icon and confirm
• Clearing Completed: Click "Clear completed" to remove all completed tasks

Firestore Data Structure

The application uses the following Firestore structure:

/artifacts/{appId}/users/{userId}/todos/{todoId}

Each todo document contains:

• text: The description of the todo item (string)
• completed: A boolean indicating if the task is done
• timestamp: A server timestamp for ordering

License

MIT

.gitignore

A .gitignore file is included to ensure that node_modules/, build output, and sensitive files like .env are not tracked by git.