A stunning, feature-rich todo application that transforms task management into an art form.
Built with bleeding-edge React 19, powered by Vite, and styled with Tailwind CSS 4.
PlanPulse isn't just another todo app—it's a productivity powerhouse wrapped in a gorgeous glassmorphic interface. Built from the ground up with modern web technologies, it offers unparalleled customization, smooth animations, and an experience that makes task management genuinely enjoyable.
|
|
Choose from carefully crafted color schemes that transform your entire interface:
🔵 Blue • 🔴 Red • 🟡 Yellow • 🟢 Green • 🟣 Purple • 🟠 Orange • 🔵 Teal • 🩷 Pink • ⚪ Gray
- 🖼️ 10+ Background Patterns - Pre-loaded textures or custom image uploads
- 🖱️ Cursor Styles - Choose between smooth animated or default cursor
- 📐 Corner Radius Control - Adjust borders from sharp to pill-shaped (0-3rem)
- 🎨 Font System - 8 beautiful fonts with adjustable weights (300-900)
- 🔆 Opacity Control - Fine-tune text transparency (0-100%)
- 👁️ UI Visibility Toggle - Hide/show background text for minimal interface
- 🎯 Button Customization - Show/hide edit and delete buttons per preference
- 🎭 Glassmorphism UI - Modern frosted-glass aesthetic throughout
- 📅 Live Calendar - Interactive date picker with month/year navigation
- ⏰ Detailed Clock - Real-time display with hours:minutes:seconds + AM/PM
- 🎯 Smart Layout - Drag widgets between sections or reorder within sections
// Items Mode → Reorder calendar & clock widgets
[Calendar, Clock] ↔ [Clock, Calendar]
// Sections Mode → Swap entire widget sections
[Calendar + Clock] ↔ [TodoList]- 🎯 Floating Dock - Quick layout customization controls
- 🔄 Mode Toggle - Switch between Items/Sections drag modes
- ↩️ Reset Button - Restore default layout instantly
- ❌ Cancel - Exit customization mode
Node.js 18.x or higher
npm / yarn / pnpm
Modern browser (Chrome, Firefox, Safari, Edge)# Clone the repository
git clone https://github.com/aarab-abderrahmane/PlanPulse.git
# Navigate to project directory
cd PlanPulse
# Install dependencies
npm install
# or
yarn install
# or
pnpm install# Start development server
npm run planpulse
# Server runs at http://localhost:5173
# Hot module replacement enabled ⚡# Build for production
npm run build
# Preview production build
npm run preview
# Lint codebase
npm run lintPlanPulse/
├── 📂 src/
│ ├── 📂 components/
│ │ ├── 📂 ui/ # 40+ shadcn/ui components
│ │ │ ├── accordion.jsx
│ │ │ ├── button.jsx
│ │ │ ├── calendar.jsx # Date picker (react-day-picker)
│ │ │ ├── floating-dock.jsx # Layout customization dock
│ │ │ ├── smooth-cursor.jsx # Animated cursor
│ │ │ ├── confetti.jsx # Celebration effects
│ │ │ ├── sparkles-text.jsx # Animated text
│ │ │ └── ...
│ │ ├── 📂 PreferencesItems/
│ │ │ ├── backgroundAccordion.jsx # Background selector carousel
│ │ │ └── fontAccordion.jsx # Font selection interface
│ │ ├── TodoList.jsx # Main todo container with DnD
│ │ ├── List.jsx # Individual todo item (sortable)
│ │ ├── Checkbox.jsx # Animated checkbox component
│ │ ├── LiveCalendar.jsx # Calendar widget
│ │ ├── LiveClockDetailed.jsx # Clock widget with seconds
│ │ ├── Preferences.jsx # Settings panel (40+ options)
│ │ ├── DropDownMenuLabo.jsx # Main dropdown menu
│ │ ├── AlertConfirm.jsx # Confirmation dialogs
│ │ └── error_404.jsx # Custom 404 page
│ ├── 📂 landingPage/
│ │ ├── indexlanding.jsx # Animated landing page
│ │ ├── button.jsx # CTA button with effects
│ │ └── timeline-animation.jsx # Feature timeline
│ ├── 📂 lib/
│ │ └── utils.js # Helper functions (cn, etc.)
│ ├── App.jsx # Root component with contexts
│ ├── Content.jsx # Router wrapper
│ ├── Stipper.jsx # Welcome onboarding flow
│ ├── ImportDataSection.jsx # JSON import functionality
│ ├── ToastContext.jsx # Global toast notifications
│ ├── main.jsx # Application entry point
│ └── index.css # Global styles + CSS variables
├── 📂 public/
│ ├── 📂 backgrounds/ # 10+ background patterns
│ ├── 📂 Demo/ # Demo GIFs for README
│ └── *.png # Screenshots & assets
├── 📄 package.json # Dependencies & scripts
├── 📄 vite.config.js # Vite configuration
├── 📄 tailwind.config.js # Tailwind CSS config
├── 📄 components.json # shadcn/ui config
└── 📄 README.md # You are here!
PlanPulse uses React Context API for comprehensive, performant state management:
// 🎨 Preferences Context - Theme, Layout & UI Settings
PreferencesContext = {
appVersion: "3.0.0",
font: { id: "font-8", weight: 500 },
corners: 1.5, // Border radius in rem
background: {
active: false,
id: 0,
path: ""
},
customizeLayout: [
[{ id: 0, type: "calendar" }, { id: 1, type: "clock" }],
[{ id: 2, type: "todoList" }]
],
general: {
hideTexts: false, // Hide background text
opacityTexts: 100 // Text opacity percentage
},
cursorType: "smooth", // "default" | "smooth"
theme_name: "blue", // Active theme key
themes: { /* 9 themes */ },
buttons: {
buttonDelete: { active: false },
buttonEdit: { active: true }
},
dragMode: {
active: false,
mode: "items" // "items" | "sections"
}
}
// 🔔 Toast Context - Global Notifications
ToastContext = {
showToast: Function // Display toast with color & message
}
// ✅ Todos Context - Task Operations
todosContext = {
todos: Array<Todo>,
setTodos: Function,
MaskTodo: Function, // Toggle blur effect
handleAdd: Function,
handleCheck: Function,
handleEdit: Function,
handleSave: Function,
hanldeDelete: Function
}// 📝 Todo Item Structure
interface Todo {
id: number; // Unique identifier (timestamp-based)
content: string; // Task description (min 5 chars)
modeEdit: boolean; // Currently in edit mode?
check: boolean; // Completion status
mask: boolean; // Visibility state (blur toggle)
}
// 🧩 Widget Structure
interface Widget {
id: number; // Unique widget ID
type: "calendar" | "clock" | "todoList";
}
// 📐 Layout Structure
type Layout = Widget[][]; // 2D array: [[left widgets], [right widgets]]
// 🎨 Theme Structure
interface Theme {
"--color-background": string; // Main background color
"--color-text": string; // Text color
"--color-button": string; // Primary button color
}Powered by @dnd-kit for smooth, accessible interactions:
// 🎯 DndContext Configuration
<DndContext
onDragEnd={handleDragEnd}
collisionDetection={closestCorners}
>
<SortableContext
items={todos.map(todo => todo.id)}
strategy={verticalListSortingStrategy} // or horizontalListSortingStrategy
>
{/* Sortable items */}
</SortableContext>
</DndContext>
// 🔄 Drag Modes
// Items Mode: Reorder calendar/clock within their section
// Sections Mode: Swap entire left ↔ right sections// 1️⃣ Todos Data
Key: 'todos'
Format: Array<Todo>
Example: [
{ id: 1, content: "Buy groceries", check: false, modeEdit: false, mask: false },
{ id: 2, content: "Finish project", check: true, modeEdit: false, mask: false }
]
// 2️⃣ Preferences Data
Key: 'Preferences'
Format: PreferencesObject
Storage: Deep merged with defaults on load
// 3️⃣ Onboarding State
Key: 'hasVisited' → boolean (landing page visit)
Key: 'hasStarted' → boolean (stepper completion)✅ Auto-save - Every state change persists instantly
✅ Graceful Loading - Defaults provided if localStorage is empty
✅ Deep Object Merging - New preferences merge with existing
✅ JSON Validation - Import validates structure before loading
✅ Error Handling - Fallbacks prevent data loss
Customize themes by modifying CSS variables in src/index.css:
:root {
/* 🎨 Color System */
--color-background: #90b5dc; /* Primary background */
--color-text: #0c2646; /* Text & borders */
--color-button: #4f83f8; /* Interactive elements */
/* 📐 Layout */
--border-radius: 1.5rem; /* Global corner radius */
/* 🖋️ Typography */
--font-family: 'Poppins', sans-serif;
--font-weight: 500;
/* 🖼️ Background (when active) */
--background-name: url('/backgrounds/light-wool.png');
}|
|
|
|
|
|
|
|
Plus: Teal, Pink, and Gray themes available!
10+ pre-loaded seamless patterns from Subtle Patterns:
- 🧱 Asfalt Light
- 📐 Batthern
- ⛪ Church
- 🧶 Light Wool
- ⭐ Starring
- 🧱 White Brick Wall
- 💎 White Diamond Dark
- 🔘 Worn Dots
- ⚡ Zig Zag
Custom Upload: Use your own images as backgrounds!
| Technology | Version | Purpose |
|---|---|---|
| React | 19.2.0 | UI library with concurrent features |
| React DOM | 19.2.0 | React rendering engine |
| Vite | 7.1.7 | Lightning-fast build tool & dev server |
| Tailwind CSS | 4.1.16 | Utility-first CSS framework |
| Technology | Version | Purpose |
|---|---|---|
| Framer Motion | 12.23.24 | Physics-based animations |
| Styled Components | 6.1.19 | CSS-in-JS styling |
| Lucide React | 0.546.0 | 1000+ beautiful icons |
| Tabler Icons | 3.35.0 | Additional icon library |
| Canvas Confetti | 1.9.4 | Celebration effects |
| Technology | Version | Purpose |
|---|---|---|
| @dnd-kit/core | 6.3.1 | Core drag-and-drop logic |
| @dnd-kit/sortable | 10.0.0 | Sortable list functionality |
| @dnd-kit/utilities | 3.2.2 | DnD helper utilities |
| Technology | Version | Purpose |
|---|---|---|
| Radix UI | Various | 15+ accessible headless components |
| shadcn/ui | Latest | Pre-built styled components |
| Sonner | 2.0.7 | Toast notification system |
| React Day Picker | 9.11.1 | Calendar date picker |
| Technology | Version | Purpose |
|---|---|---|
| date-fns | 4.1.0 | Date manipulation & formatting |
| clsx | 2.1.1 | Conditional className utility |
| tailwind-merge | 3.3.1 | Merge Tailwind classes intelligently |
| React Router | 7.9.5 | Client-side routing |
Boost your productivity with power-user shortcuts:
| Shortcut | Action | Context |
|---|---|---|
Ctrl + B |
Open/Close Preferences panel | Global |
Ctrl + Y |
Toggle Layout Customization Mode | Global |
Enter |
Add new todo | When input is focused |
Escape |
Cancel edit mode | When editing a task |
Right Click |
Open context menu | On todo items |
| Browser | Version | Support |
|---|---|---|
 |
Latest | ✅ Fully Supported |
 |
Latest | ✅ Fully Supported |
 |
Latest | ✅ Fully Supported |
 |
Latest | ✅ Fully Supported |
 |
iOS 14+ | ✅ Fully Supported |
 |
Latest | ✅ Fully Supported |
Requires JavaScript enabled and localStorage support
- 🔄 Undo/Redo System - Action history with Ctrl+Z/Ctrl+Shift+Z
- ⌨️ Extended Shortcuts - More keyboard shortcuts for power users
- 🌙 Dark Mode - Automatic theme switching based on system preference
- 🔊 Sound Effects - Optional audio feedback for actions
|
|
|
|
- 🤖 AI Task Suggestions - Smart task recommendations based on patterns
- 📈 Productivity Analytics - ML-powered insights & goal tracking
- 🎮 Gamification - Achievements, streaks, and rewards
- 🔗 Integrations - Connect with Google Calendar, Slack, Notion, etc.
We love contributions! Whether it's bug fixes, new features, or documentation improvements, your help makes PlanPulse better for everyone.
-
Fork the repository
# Click the "Fork" button on GitHub -
Clone your fork
git clone https://github.com/YOUR_USERNAME/PlanPulse.git cd PlanPulse -
Create a feature branch
git checkout -b feature/amazing-feature
-
Make your changes
- Write clean, documented code
- Follow existing code style
- Add comments where necessary
-
Test thoroughly
npm run lint # Check for linting errors npm run planpulse # Test in development npm run build # Verify production build
-
Commit with descriptive messages
git commit -m "feat: add amazing new feature" -
Push to your fork
git push origin feature/amazing-feature
-
Open a Pull Request
- Describe your changes in detail
- Reference any related issues
- Wait for review and feedback
- 📝 Use clear, descriptive variable names
- 🧪 Test your changes across different browsers
- 📱 Ensure mobile responsiveness
- ♿ Maintain accessibility standards
- 📚 Update documentation if needed
Found a bug? Have a feature request? Open an issue with:
- Clear title and description
- Steps to reproduce (for bugs)
- Expected vs actual behavior
- Screenshots (if applicable)
- Browser/device information
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license.
- Share — Copy and redistribute the material in any medium or format
- Adapt — Remix, transform, and build upon the material
- Attribution — Give appropriate credit with a link to this repository
- NonCommercial — Cannot be used for commercial purposes
- No Additional Restrictions — Cannot apply legal terms or tech measures that restrict others
📖 Full License: CC BY-NC 4.0 Legal Code
This project wouldn't be possible without these amazing technologies and resources:
- React - The foundation of our UI
- Vite - Lightning-fast build tool
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Powerful animation library
- Radix UI - Accessible component primitives
- shadcn/ui - Beautiful component library
- @dnd-kit - Modern drag-and-drop toolkit
- Lucide Icons - Beautiful icon library
- Sonner - Toast notification system
- React Day Picker - Flexible date picker
- Subtle Patterns - Background textures
- Unsplash - High-quality images
- Coolors - Color palette inspiration
- React Documentation - Official React docs
- Tailwind Docs - Comprehensive CSS guide
- MDN Web Docs - Web development reference
If PlanPulse helps you stay organized and productive, consider:
⭐ Star this repository - It helps others discover the project
🐛 Report bugs - Help us improve the experience
✨ Request features - Share your ideas for new functionality
🤝 Contribute code - Make PlanPulse even better
📢 Spread the word - Tell your friends and colleagues
Making task management beautiful, one feature at a time.
Happy Task Managing! ✅