https://github.com/korngsamnang/todoapp-react-firebase

A very simple todo app.
https://github.com/korngsamnang/todoapp-react-firebase

crud firebase react-context-api reactjs tailwindcss

Last synced: 4 days ago
JSON representation

A very simple todo app.

• Host: GitHub
• URL: https://github.com/korngsamnang/todoapp-react-firebase
• Owner: korngsamnang
• Created: 2023-05-13T12:01:58.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-16T17:21:15.000Z (about 1 year ago)
• Last Synced: 2024-01-17T01:35:25.953Z (about 1 year ago)
• Topics: crud, firebase, react-context-api, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://firebase-todoapp-v1.netlify.app/
• Size: 57.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Todo App with Firebase

## Table of Contents

-   [Overview](#overview)

-   [Features](#features)

-   [Technologies Used](#technologies-used)

-   [Getting Started](#getting-started)

-   [Deployment](#deployment)

## Overview

This is a simple Todo app built using React and Firebase.

> React Todo app with Firebase

> ![](https://github.com/korngsamnang/todoapp-react-firebase/assets/99709883/aafbe61d-0e91-4df6-a3c6-0e11a52f18b5)

## Features

-   **Add Todo:** Easily add new tasks to your list.

-   **Edit Todo:** Modify existing todos to update task details.

-   **Delete Todo:** Remove completed or unnecessary tasks.

-   **Toggle Complete/Incomplete:** Mark todos as complete or revert them to an

    incomplete state.

## Technologies Used

-   **React:** Popular JavaScript library for building user interfaces.

-   **Vite:** Build tool for fast and efficient development.

-   **Firebase:** Real-time data storage and synchronization.

-   **Tailwind CSS:** Styling with a utility-first CSS framework.

## Getting Started

1. **Clone the repository:**

    ```bash

    git clone https://github.com/korngsamnang/todoapp-react-firebase

    cd todoapp-react-firebase

    ```

2. **Install dependencies:**

    ```bash

    npm install

    ```

3. **Set up Firebase:**

    - Create a Firebase project on the

      [Firebase Console](https://console.firebase.google.com/).

    - Obtain your Firebase configuration.

    - Replace the configuration in the `.env` file.

4. **Run the app:**

    ```bash

    npm run dev

    ```

5. **Open the app in your browser:**

    `http://localhost:5173`

Feel free to explore, add, edit, and delete todos!

## Deployment

When we build an app using the Firebase service, we can deploy it to

[Netlify](https://app.netlify.com/) as well. There's no need to deploy it to

Firebase hosting.