Skip to content

s21sd/Notestaking

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 

Repository files navigation

React Notes App with Firebase and TypeScript

Introduction

This project is a simple notes application built using React, TypeScript, and Firebase. It allows users to perform CRUD (Create, Read, Update, Delete) operations on their notes. Here Is the Live Link [https://65b687c051be0c7b33cbb7c3--cheerful-profiterole-cb4684.netlify.app/]

Features

  • Create: Users can add new notes with a title and content.
  • Read: View a list of all notes and click on a note to see its details.
  • Update: Edit the title and content of existing notes.
  • Delete: Remove notes that are no longer needed.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • TypeScript: A superset of JavaScript that adds static typing to the language.
  • Firebase: A cloud-based platform for building mobile and web applications.

Setup

  1. Clone the repository:

    git clone https://github.com/your-username/notes-app.git
  2. Navigate to the project folder:

    cd notes-app
  3. Install dependencies:

    npm install
  4. Create a Firebase project and set up a Firestore database. Update the Firebase configuration in src/firebase/config.ts with your own credentials.

  5. Start the development server:

    npm start
  6. Open your browser and visit http://localhost:3000 to see the app.

Folder Structure

  • src/components: Contains React components used in the application.
  • src/firebase: Configuration file for Firebase setup.
  • src/types: TypeScript type declarations.

Usage

  1. Create Note:

    • Click on the "New Note" button.
    • Enter a title and content for your note.
    • Click "Save" to add the note.
  2. Read Note:

    • View the list of all notes on the homepage.
    • Click on a note to view its details.
  3. Update Note:

    • Click on the "Edit" button on a note.
    • Modify the title or content.
    • Click "Save" to update the note.
  4. Delete Note:

    • Click on the "Delete" button on a note to remove it.

Contributions

Contributions are welcome! If you find a bug or have suggestions for improvement, please create an issue or submit a pull request.