Skip to content

Latest commit

Β 

History

History
69 lines (54 loc) Β· 1.7 KB

File metadata and controls

69 lines (54 loc) Β· 1.7 KB

πŸ“ Notes Application (React + Tailwind CSS)

A simple and elegant Notes Application built entirely inside a single App.jsx file using React and styled with Tailwind CSS. The app focuses on a minimal design and core functionality: adding and deleting notes with a beautiful UI.


πŸš€ Features

  • βž• Add Notes – Quickly create new notes.
  • πŸ—‘οΈ Delete Notes – Remove notes instantly.
  • 🎨 Tailwind Styling – Modern, responsive, and clean UI with utility-first CSS.
  • ⚑ Single File Simplicity – Entire app logic and UI contained in App.jsx.

πŸ› οΈ Tech Stack

  • React – Component-based UI library.
  • Tailwind CSS – Utility-first CSS framework for styling.

πŸ“‚ Project Structure

NotesApplication/
│── public/
β”‚   └── index.html
│── src/
β”‚   β”œβ”€β”€ App.jsx   # All logic and UI here
β”‚   └── index.js
└── package.json

βš™οΈ Installation & Setup

  1. Clone the repository:
    git clone https://github.com/techmuskan/NotesApplication.git
  2. Navigate to the project folder:
    cd notes-app
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm start
  5. Open in browser:
    http://localhost:5173
    

🎯 Learning Outcomes

  • Practiced building a React app entirely in one file (App.jsx).
  • Learned how to integrate Tailwind CSS for fast and beautiful styling.
  • Strengthened understanding of state management and UI rendering in React.

πŸ“œ License

This project is licensed under the MIT License – feel free to use and modify it.