FocusBoard

Portfolio-grade Productivity App built with React, Vite, Tailwind CSS, and Framer Motion.

FocusBoard Pro combines a Pomodoro Timer, Task Manager, Statistics Tracker, and Dynamic Themes to help you focus, stay organized, and track your productivity — all with smooth animations and modern UI.

---

🌟 Features

• Pomodoro Timer

  • 25-minute focus sessions
  • Start / Pause / Reset controls
  • Visual progress bar & sound notifications

• Tasks Page

  • Add, edit, delete tasks
  • Mark tasks as done
  • Persistent storage via LocalStorage

• Statistics Page

  • Track completed tasks & streaks
  • Weekly task charts using Recharts
  • Smooth chart animations

• Themes & Customization

  • Light, Dark, Neon, Cyberpunk themes
  • Dynamic background support
  • Tailwind-based responsive UI

• Animations & Professional UI

  • Framer Motion page transitions
  • Animated progress bars, buttons, and task lists
  • Netflix-style modern, semi-transparent panels

---

🛠 Tech Stack

• Frontend: React + Vite
• Styling: Tailwind CSS + PostCSS
• Animations: Framer Motion
• Charts: Recharts
• Version Control: Git & GitHub

---

🚀 Getting Started

Clone the repository

git clone https://github.com/AlanWalker2496/focusboard.git
cd focusboard

Install dependencies

npm install

Run the development server

npm run dev

Open http://localhost:5173 in your browser.

---

📂 Project Structure

focusboard-pro/
 ├─ src/
 │   ├─ components/
 │   │   ├─ Sidebar.jsx
 │   │   ├─ Pomodoro.jsx
 │   │   ├─ Tasks.jsx
 │   │   ├─ Stats.jsx
 │   │   └─ ThemeToggle.jsx
 │   ├─ App.jsx
 │   └─ index.css
 ├─ package.json
 ├─ tailwind.config.cjs
 ├─ postcss.config.cjs
 └─ vite.config.js

---

🔮 Future Enhancements

• Export / Import tasks & stats
• Gamification / XP system for completed tasks
• More dynamic backgrounds & themes
• Multi-user support with cloud storage

---

📄 License

This project is open-source and free to use for learning and portfolio purposes.