Note-Taking App

This is a simple yet powerful note-taking application built with React and React Router. It allows users to create, read, update, and delete notes, and manage tags associated with the notes. The app persists data using local storage, ensuring that your notes and tags are available even after refreshing the page or closing the browser.

You can try out the deployed version of the app here: Note-Taking App

Features

• Note Management:

  • Create new notes with a title, markdown content, and associated tags.
  • View a list of all notes, including details of each note.
  • Edit existing notes to update their content and tags.
  • Delete notes that are no longer needed.

• Tag Management:

  • Create new tags to categorize notes.
  • Update the labels of existing tags.
  • Delete tags that are no longer relevant.
  • Filter notes by tags.

• Persistent Storage:

  • Uses local storage to save notes and tags, ensuring data persists across browser sessions.

• Routing and Navigation:

  • Note List View: The default view displays a list of all notes with their tags.
  • New Note View: A route to create a new note (/new).
  • Note Detail View: A dynamic route to view a specific note (/:id).
  • Edit Note View: A nested route to edit a specific note (/:id/edit).
  • Fallback Route: Any undefined route redirects to the home route (* redirects to /).

Technologies Used

• React: A JavaScript library for building user interfaces.
• React Router: A standard library for routing in React applications.
• Bootstrap: A CSS framework for developing responsive and modern web pages.
• UUID: A library to generate unique IDs for notes and tags.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/Note-taking-app.git

2. Navigate to the project directory:

   cd Note-taking-app

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and go to http://localhost:5173/Note-taking-app/

File Structure

• src/
  • App.tsx: The main component that sets up routes and manages state.
  • NewNote.tsx: Component for creating a new note.
  • NoteList.tsx: Component for displaying the list of notes.
  • NoteLayout.tsx: Component for the layout of individual notes.
  • Note.tsx: Component for displaying a single note.
  • EditNote.tsx: Component for editing a note.
  • useLocalStorage.ts: Custom hook for managing local storage.
  • index.tsx: Entry point of the application.
  • main.tsx: Renders the App component wrapped with BrowserRouter.

Usage

1. Create a Note:

   • Click on the "New Note" button to create a new note.
   • Fill in the title, markdown content, and tags.
   • Click "Save" to save the note.

2. View Notes:

   • The home page displays a list of all notes.
   • Click on a note to view its details.

3. Edit a Note:

   • Click on a note to view its details.
   • Click the "Edit" button to edit the note.
   • Make the desired changes and click "Save" to update the note.

4. Delete a Note:

   • Click on a note to view its details.
   • Click the "Delete" button to delete the note.

5. Manage Tags:

   • Tags can be added, updated, or deleted when creating or editing a note.
   • Tags are displayed alongside notes for easy categorization.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue to discuss changes.