A Simple & Interactive Notes App Built with React
The Keeper App is a React-based notes application that provides a smooth and responsive user experience. It allows users to add and delete notes effortlessly while ensuring a well-structured and visually appealing UI.
Perfect for organizing thoughts, reminders, and quick notes with an intuitive interface that adapts to your needs!
| Feature | Description |
|---|---|
| 📌 Persistent Footer | Stays fixed at the bottom, even as the number of notes increases |
| 🎨 Animated Buttons | Implemented using Material Icons library for smooth interactions |
| 📝 Dynamic Note Management | Users can easily add and delete notes with real-time updates |
| 🔄 Conditional Rendering | Ensures a clutter-free and intuitive user interface |
| 📱 Responsive Design | Optimized for various screen sizes and devices |
- React – For dynamic UI updates and component-based architecture
- Material Icons – For visually engaging and animated buttons
- CSS – For responsive design and styling
- HTML – For semantic structure
Make sure you have the following installed:
- Node.js (v14 or higher)
- npm
- Clone the repository
git clone https://github.com/Praneeth860/Keeper-Website.git- Navigate to the project directory
cd keeper-app- Install dependencies
npm install- Start the development server
npm run dev- Open your browser and visit
http://localhost:3000
- Adding Notes: Click on the input area and type your note content
- Deleting Notes: Click the delete button (trash icon) on any note
- Responsive Layout: The app automatically adjusts to different screen sizes
- Real-time addition and deletion of notes
- Smooth animations for better user experience
- State management using React hooks
- Material Icons for consistent iconography
- Hover effects and smooth transitions
- Clean and minimal design approach
- Mobile-first approach
- Flexible grid layout
- Optimized for touch interactions
You can easily customize the app by modifying:
- Colors: Update CSS variables in
styles.css - Icons: Replace Material Icons with your preferred icon library
- Layout: Adjust component structure and styling
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- React team for the amazing framework
- Material Design team for the icon library
- Angela Yu & Udemy - Thank you for the amazing Web Development course that inspired this project
- The open-source community for inspiration
If you found this Keeper App helpful, inspiring, or useful for your own projects, I'd be incredibly grateful for your support:
- ⭐ Star the repository on GitHub - it helps others discover this project
- 🍴 Fork it and build your own amazing notes app
- 💝 Share it with fellow developers who might find it useful
#ReactJS #WebDevelopment #Frontend #MaterialIcons #Animations #CSS #HTML