🎯 DevFocus

A productivity-focused task manager built for developers

🚀 Live Demo • 📖 Documentation • 🤝 Contributing

---

📸 Screenshots

Dashboard

Dark Mode	Light Mode

Task Management

Task List	Add Task

---

✨ Features

🎨 Modern UI Sleek dark-mode interface Responsive design for all devices Smooth animations with Framer Motion PWA ready — install as native app 📋 Task Management Dual Views: Kanban board & list view Drag & Drop: Reorder tasks easily Subtasks: Break down complex work Keyboard Shortcuts: Press n to create tasks

🏷️ Organization Custom tags & priority levels Due dates & deadline tracking Markdown support for rich descriptions Search and filter capabilities ☁️ Sync & Offline Local-First: Works offline with IndexedDB Cloud Sync: Firebase when online Google Authentication Real-time data synchronization

🚀 Quick Start

# Clone the repository
git clone https://github.com/yourusername/dev-focus.git
cd dev-focus

# Install dependencies
npm install

# Configure environment
cp .env.example .env.local

# Start development server
npm run dev

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

🛠️ Tech Stack

Category	Technologies
Frontend	React 19 • TypeScript • Vite
Styling	Tailwind CSS 4 • Framer Motion
State	React Context • Custom Hooks
Backend	Firebase Auth • Firestore
Storage	IndexedDB (local) • Firebase (cloud)
Testing	Vitest • React Testing Library

📚 Documentation

Prerequisites

• Node.js 18+
• Firebase project (free tier)

Firebase Setup

1. Go to Firebase Console
2. Create a new project
3. Enable Authentication → Google sign-in provider
4. Create a Web App → copy config values
5. Paste values into .env.local

Firestore Security Rules

This project includes firestore.rules file that allows authenticated users to access their own data only.

Deploy rules using Firebase CLI:

# Install Firebase CLI
npm install -g firebase-tools

# Login to Firebase
firebase login

# Deploy Firestore rules
firebase deploy --only firestore:rules

Rules explanation:

• Users can only read/write data in users/{userId}/ paths
• The userId must match the authenticated user's UID
• This ensures users cannot access each other's data

3. The userId in Firestore paths matches the user's UID

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint
npm run lint:fix	Fix ESLint issues
npm run test	Run tests
npm run test:watch	Run tests in watch mode

📁 Project Structure

dev-focus/
├── 📂 components/       # React components
├── 📂 context/          # State management
├── 📂 hooks/            # Custom React hooks
├── 📂 services/         # Firebase & storage
├── 📂 utils/            # Helper functions
├── 📂 plans/            # Documentation
├── 📄 App.tsx           # Root component
├── 📄 types.ts          # TypeScript types
└── 📄 vite.config.ts    # Build configuration

🤝 Contributing

We welcome contributions! Please read our Contributing Guide to learn about:

• Setting up your development environment
• Coding standards and best practices
• Submitting pull requests
• Reporting bugs and requesting features

📄 License

This project is licensed under the MIT License — see LICENSE.md for details.

---

Made with ❤️ by the DevFocus community

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature