Notes Application in React 📓

A user-friendly notes app created with React. It makes it simple for users to make, modify, remove, and arrange notes, saved across sessions, the application makes advantage of React's state management and local storage.

Features

✨ Create new notes
✨ Edit existing notes
✨ Delete notes
✨ Clean and user-friendly interface

Tech Stack

Layer	Technology / Library
Frontend	React, Vite
Routing	React Router DOM
Backend	idb for IndexedDB Storage

Installation

1. Create a new Vite project

Open the terminal and type:

npm create vite@latest

2. Type the folder name or just a dot if you want to use the current folder. Then, select React and choose JavaScript

After the project is created, go into the project folder and install all npm packages by running:

npm install

3. Next, install the required libraries:

npm install react-router-dom lucide-react react-hot-toast

4. Now, let’s set up Tailwind CSS for Vite.

Run the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will create a tailwind.config.js file. Open it and add your custom theme inside the extend section.

Clone the repository

git clone https://github.com/sufyanism/Notes-Application-in-React.git

Navigate to the project directory

cd Notes-Application-in-React

Install dependencies

npm install

Run the application

npm start

Demo

Notes.Application.Screencast.mp4

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects. You can learn more about me and my work at sufyanism.com or connect with me on Linkedin

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.
➡ Visit our main site: zeba.academy
➡ Explore hands-on courses and resources at: code.zeba.academy
➡ Check out our YouTube for more tutorials: zeba.academy
➡ Follow us on Instagram: zeba.academy

Thank you for visiting!