📝 Keeper App

A simple and elegant note-taking web application built with React and Material UI, inspired by Google Keep. Users can quickly add notes with a title and content, and delete them with a single click.

🚀 Features

➕ Add new notes with a title and content
❌ Delete notes instantly
💾 Notes are managed with React state (no backend required)
🎨 Clean, responsive UI with smooth animations
📱 Mobile-friendly layout

🛠️ Tech Stack

React (functional components + Hooks)
Material UI (@mui/material, @mui/icons-material)
CSS3 (custom animations and gradients)

📂 Project Structure

keeper-app/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── App.js
│   │   ├── CreateArea.js
│   │   ├── Header.js
│   │   ├── Footer.js
│   │   └── Note.js
│   ├── index.js
│   └── styles.css
├── package.json
└── README.md

⚙️ Installation & Setup

Clone the repository

git clone https://github.com/rahulpawar-o7/keeper-app.git
cd keeper-app

Install dependencies
```
npm install
```

Install Material UI packages (if not already installed)

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Run the app
```
npm start
```
Open http://localhost:3000 in your browser.

🖥️ Usage

Type a title and content in the input form at the top.
Click the + (Fab) button to add the note.
Click the delete icon on any note card to remove it.

📌 Future Improvements

Persist notes using localStorage or a backend database
Add note editing functionality
Add search/filter for notes
Add dark mode toggle

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📄 License

This project is licensed under the MIT License.

👤 Author

Rahul Pawar GitHub: @rahulpawar-o7

FilesExpand file tree

README.md

Latest commit

History