📝 Notes App – React

A simple, clean and responsive Notes Taking Application built using React.js and Tailwind CSS.
This app allows users to quickly add and delete notes in real time with a beautiful sticky-note style UI.

---

🌐 Live Demo

Check out the live version of the project here:

🔗 Live Demo: https://notes-app-six-red.vercel.app/

---

🚀 Features

• ✍️ Add new notes with title and description
• 🗑️ Delete notes instantly
• ⚡ Real-time updates using React state
• 📱 Fully responsive layout
• 🎨 Modern and minimal user interface
• 💻 Built using functional components and hooks

---

🛠️ Tech Stack

• React.js – Frontend Library
• Tailwind CSS – Styling
• Lucide React – Icons
• JavaScript (ES6+)

---

📸 Application Overview

The app is divided into two main sections:

Left Section

• Form to add new notes
• Input field for note title
• Textarea for note details
• Submit button to add note

Right Section

• Displays all recently added notes
• Each note appears as a sticky-note styled card
• Delete button available on each note

---

⚙️ Installation & Setup

Follow these steps to run this project locally:

1. Clone the Repository

git clone https://github.com/shivxmsharma/Notes-App.git

2. Navigate to Project Folder

cd Notes-App

3. Install Dependencies

npm install

4. Start the Development Server

npm run dev

The app will be available at:

http://localhost:5173

---

📂 Project Structure

Notes-App/
│── src/
│   │── App.jsx        # Main application component
│   │── main.jsx       # React root file
│   │── index.css      # Tailwind CSS styles
│── package.json
│── vite.config.js
│── README.md

---

🧩 How the App Works

• The application uses React useState hooks to manage:
  • Note title
  • Note details
  • List of notes

Adding a Note

• User enters title and details
• Clicks Add Note button
• Data is stored in state array
• UI updates instantly

Deleting a Note

• Each note card has a delete button
• Clicking it removes that note from state
• UI re-renders immediately

---

💻 Code Highlights

State Management

const [title, setTitle] = useState('')
const [details, setDetails] = useState('')
const [task, setTask] = useState([])

Add Note Function

const submitHandler = (e) => {
  e.preventDefault();
  const copyTask = [...task];
  copyTask.push({ title, details });
  setTask(copyTask);
  setTitle('');
  setDetails('');
}

Delete Note Function

const deleteNote = (idx) => {
  const copyTask = [...task];
  copyTask.splice(idx, 1);
  setTask(copyTask);
}

---

🔮 Future Enhancements

Planned improvements for the project:

• ✏️ Edit existing notes
• 💾 Save notes using Local Storage
• 🔍 Search and filter notes
• 🏷️ Add tags or categories
• 🌙 Dark / Light mode toggle
• 📌 Pin important notes

---

🤝 Contributing

Contributions are always welcome!

1. Fork the project
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a pull request

---

👨‍💻 Author

Shivam Sharma

• GitHub: https://github.com/shivxmsharma
• LinkedIn: https://www.linkedin.com/in/shivxmsharma/

---

📜 License

This project is completely free to use and open-source.

---

⭐ If you found this project helpful, please give it a star on GitHub!