Notes App

Welcome! 👋

This project is a note-taking web application built as a challenge from Frontend Mentor. The application allows users to create, read, update, and delete notes, as well as archive notes and filter them by tags. It also includes features for searching notes, selecting color and font themes, and ensuring accessibility for keyboard navigation.

Features

• Create, Read, Update, and Delete Notes: Users can manage their notes efficiently.
• Archive Notes: Archive notes and restore them when needed.
• Tag Filtering: View notes with specific tags.
• Search Functionality: Search notes by title, content, or tags.
• Theme Selection: Choose between light and dark color themes.
• Font Selection: Choose between different font themes.
• Form Validation: Receive validation messages if required form fields aren't completed.
• Keyboard Navigation: Navigate the whole app and perform all actions using only the keyboard.
• Responsive Design: View the optimal layout for the interface depending on the device's screen size.
• Hover and Focus States: See hover and focus states for all interactive elements on the page.

Technologies Used

• React: For building the user interface.
• React Router: For handling routing.
• Framer Motion: For animations.
• Focus Trap React: For managing focus within modals.
• MUI Icons: For icons.
• Vite: For the build tool.
• CSS: For styling.

Getting Started

Prerequisites

• Node.js and npm installed on your machine.

Installation

1. Clone the repository:

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

2. Navigate to the project directory:

   cd notes-app

3. Install the dependencies:

   npm install

Running the App

To run the app in development mode:

npm run dev

Open http://localhost:5173 to view it in the browser.

Building the App

To build the app for production:

npm run build

The build artifacts will be stored in the

dist

directory.

Deploying the App

To deploy the app to GitHub Pages:

npm run deploy

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Acknowledgements

• Frontend Mentor for the challenge.
• React for the framework.
• Vite for the build tool.
• Framer Motion for animations.
• Focus Trap React for managing focus within modals.
• MUI Icons for icons.