📝 Notes Keeper

A lightweight notes-taking application built with React and Vite, demonstrating essential front-end skills such as component composition, lifting state up, form validation, and dynamic UI updates.

This project is part of a series of React practice apps aimed at strengthening core skills in modern front-end development.

---

🚀 Features

• Create notes instantly using a simple input form
• Client-side validation to prevent empty submissions
• Real-time note rendering with React state
• Reusable components for clean and maintainable code
• Minimal, responsive UI

---

🧩 Tech Stack

• React (Hooks)
• Vite
• JavaScript (ES6+)
• CSS

---

📂 Project Structure

src/ ├── components/ │ ├── CreateNote.jsx │ ├── Header.jsx │ └── Note.jsx ├── App.jsx ├── App.css ├── main.jsx └── assets/

• CreateNote.jsx — Handles form input, validation, and note submission
• Note.jsx — Displays individual notes
• Header.jsx — Simple header UI component
• App.jsx — Main component managing state and rendering the note list

---

▶️ How to Run

npm install
npm run dev

💡 What I Learned

Building reusable React components

Managing state and rendering dynamic lists

Handling user input and basic form validation

Structuring a small React project clearly

Using Vite for fast local development

📜 Future Improvements

Add delete/edit note features

Persist notes using localStorage

Add search/filter functionality

Improve UI with Tailwind or Material UI