Light Notes is a simple and powerful note-taking application designed to help you stay organized and productive.
With a clean and intuitive interface, it allows you to manage your notes effortlessly — whether it’s jotting down ideas, creating to-do lists, or keeping track of important tasks.
- ➕ Add Notes – Quickly create new notes with ease.
- ✏️ Edit Notes – Update and modify your existing notes anytime.
- 🗑️ Delete Notes – Remove notes that are no longer needed.
- ✅ Complete Notes – Mark notes as completed to stay organized.
- 🔀 Sort Notes – Arrange notes in your preferred order.
- 🎨 Clean UI – Simple and user-friendly design for a better experience.
- 📱 Responsive Design – Works seamlessly across desktop, tablet, and mobile devices.
The main purpose of building Light Notes was to strengthen my understanding of core React concepts and best practices.
This project allowed me to experiment with and apply the following:
- ⚡ React Custom Hooks – Creating reusable logic across components.
- 🧩 State Management – Practicing with
useState,useReducer, and combining them withuseContext. - 🔗 Context + Reducer Pattern – Implementing a scalable way to manage global state.
- 🎛️ Event Handling – Gaining experience in handling user interactions in React.
- 🛠️ Practical Experience – Applying theoretical knowledge in a real-world project.
This app wasn’t just about building a notes tool — it was a way to practice, learn, and improve my React skills while creating something useful.
- React.js
- JavaScript (ES6+)
- CSS (Custom styling, no frameworks)
You can try the live version of Light Notes here:
👉 https://light-note.netlify.app/
Follow these steps to run Light Notes locally:
# Clone the repository
git clone https://github.com/RamtinImani/light-notes.git
# Navigate into the project directory
cd light-notes
# Install dependencies
npm install
# Start the development server
npm run dev
# Once the development server is running, open the localhost link in your browser to start using Light Notes.