Daily Planner Pro is an interactive task management web application. Users can add, edit, delete, and complete tasks with scheduled reminders. It uses React, Next.js, TypeScript, Tailwind CSS, Framer Motion, and React Icons for a modern, responsive, and animated interface.
- ➕ Add tasks with titles and specific times
- 💾 Persistent tasks via localStorage
- 🔔 Modal alert with audio when a task is due
- ✅ Mark tasks as completed (cannot be undone)
- ✏️ Edit and delete tasks
- 💻 Responsive UI with gradients, shadows, and hover effects
- 🎨 Smooth entry and exit animations with Framer Motion
| Technology | Purpose |
|---|---|
| ⚛️ React | Interactive UI components |
| 🧭 Next.js | Routing & server-side rendering |
| 🟦 TypeScript | Type safety & maintainable code |
| 🎨 Tailwind CSS | Responsive styling & modern UI |
| 🪄 Framer Motion | Smooth animations & transitions |
| 🛠️ React Icons | Scalable vector icons |
Daily Planner Pro lets users:
- Add, edit, delete, and complete tasks
- Receive modal and audio alerts for scheduled tasks
- Track tasks in a responsive, gradient-styled list
The project demonstrates:
- Modern UI with Tailwind CSS
- Interactive animations using Framer Motion
- Persistent storage using localStorage
- Advanced alert system with audio and modals
Developed by: Toma Kawaguchi
💬 Front-End Developer | Passionate about interactive web applications