NotePad

NotePad is a dynamic and responsive web application built with React and Tailwind CSS, Nodejs, Expressjs and Mongodb. It enables users to add, categorize, and style their notes effortlessly. With NotePad, you can:

• Input Note Details: Add a title, category, and detailed description for each note.
• Customize Colors: Choose from a variety of background and text color options to personalize your notes.
• Save and Organize: Save your notes with custom styles, making it easy to organize and retrieve them.
• Search and Filter: Search and filter notes based on Name, Date, Type or Background Color.

Features

• User-Friendly Interface: Intuitive design for seamless note-taking.
• Dynamic Styling: Customize the look and feel of your notes with multiple color options.
• Responsive Design: Access and use NotePad across various devices with a consistent experience.
• Backend Integration: Uses Axios for efficient communication with the backend server to save and retrieve notes.

Technologies Used

• React: For building the user interface.
• Tailwind CSS: For responsive and customizable styling.
• Axios: For making HTTP requests to the backend.

Getting Started

1. Clone the repository:

   git clone https://github.com/your-username/notepad.git
   cd notepad

2. Navigate to Backend Folder:

   cd Backend

3. *Run the Backend:

   npm start

4. In a Different Terminal Navigate to Frontend Folder:

   cd Frontend

5. Install dependencies:

   npm install

6. *Run the Frontend:

   npm run dev

7. *Run the backend:

   npm start

8. Backend Setup: Ensure your backend server is running and accessible at http://localhost:5000.

Usage

1. Add a Note:

   • Enter the note's title, category, and description.
   • Select background and text colors.
   • Click the "Add Note" button to save your note.

2. View Notes:

   • Saved notes are displayed with the chosen styles.
   • Each note shows the title, category, description, and timestamp.

3. Filter Notes:

   • Filter notes based on:
     • Date: Use a date picker to view notes created on that specific date.
     • Category: Search a category to filter notes belonging to that category.
     • Name: Enter a keyword to search for notes with matching titles or descriptions.
     • Color: Choose a specific background color to filter notes with that style.

Contributing

We welcome contributions to enhance NotePad! Feel free to submit issues, fork the repository, and send pull requests.

Acknowledgements

• Inspired by the need for a customizable and easy-to-use note-taking app.
• Developed by Jawad Ali.

---

Start organizing your thoughts and ideas with NotePad today!