MiniNotes

MiniNotes is a lightweight note-taking app built with React, TypeScript, Tailwind CSS v4, and Framer Motion. Create, edit, and delete colorful notes — all persisted locally in your browser.

---

Features

• Create notes — choose from 5 colors (red, yellow, green, blue, purple)
• Inline editing — edit title and content directly on the card
• Delete notes — remove any note instantly with animation
• Persistent storage — notes are saved in localStorage
• Dark / Light theme — toggle from the sidebar or header
• Responsive layout — sidebar on desktop, floating action button on mobile
• Smooth animations — powered by Framer Motion (scale in/out, spring color picker)

---

Tech Stack

Technology	Purpose
React 19	UI library
TypeScript	Type safety
Tailwind CSS v4	Styling
Framer Motion	Animations
React Router v7	Routing
Vite	Build tool

---

Getting Started

1. Clone the repository:

   git clone https://github.com/yourusername/MiniNotes.git
   cd MiniNotes

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open in your browser:

   http://localhost:5173
   

---

Project Structure

src/
├── components/       # UI components (Note, Sidebar, Header, FloatingButton, ThemeToggle)
├── contexts/         # NotesContext + NotesProvider (state management)
├── hooks/            # useNotes custom hook
├── layout/           # App layout (sidebar + header + main)
├── lib/              # Shared types (INote)
└── pages/            # Home page

---

Made with ❤️ by @FaberOs