DevFlow is an AI-powered developer workspace — one premium OS for managing projects, tasks, code, GitHub activity, and learning. It works instantly in Demo Mode (no login required) and syncs to Supabase when you sign in.
| Category | Pages |
|---|---|
| Workspace | Dashboard · Kanban · Projects · Tasks · Calendar · Notes · Files |
| Intelligence | AI Assistant · Code Review · Doc Generator · Commit Writer · Roadmap AI |
| GitHub | Live repo stats · commit feed · activity timeline (GitHub REST API) |
| Growth | Goals & Habits · Focus Timer (Pomodoro) · Analytics · Learning Hub |
| Team | Collaboration · Notifications · Profile · Settings |
Every page works without an account. Open /app and start using the workspace immediately. All changes are persisted in localStorage. Sign in to sync with Supabase.
Visit → /app # Full workspace, no login required
Visit → /login # Sign in with email or Google OAuth
Visit → /register # Create a free account
- React 18 + TypeScript 5 — typed, component-based UI
- Vite 5 — instant HMR, sub-second cold start
- Tailwind CSS + shadcn/ui + Radix UI — accessible design system
- Framer Motion — page transitions and micro-animations
- Supabase — auth (email + Google OAuth), Postgres, Edge Functions
- React Query (TanStack) — async state and caching
- GitHub REST API — live public repo data, commits, activity feed
- React Router v6 — client-side routing
# 1. Clone the repository
git clone https://github.com/MujtabaZadaii/DevFlow.git
cd DevFlow
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .env
# → Add your VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
# 4. Start the dev server
npm run dev
# → Open http://localhost:8080No Supabase account? The app runs fully in Demo Mode without any environment variables. Just run
npm run devand browse every page.
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-keyWithout these, DevFlow automatically falls back to localStorage-based Demo Mode for all CRUD operations.
src/
├── components/
│ ├── app/ # AppLayout, Sidebar, PageHeader, StatCard
│ └── auth/ # AuthShell
├── contexts/
│ └── AuthContext.tsx
├── pages/
│ ├── app/ # All 22 workspace pages
│ └── auth/ # Login, Register
├── integrations/
│ └── supabase/ # client, types
└── hooks/ # Custom React hooks
assets/readme/ # README visual assets
public/
└── favicon.svg
All AI pages call a Supabase Edge Function (ai-chat) when authenticated. In Demo Mode, a client-side heuristic response is used so the UI is always functional.
| Page | Function |
|---|---|
| AI Assistant | General developer Q&A with workspace context |
| Code Review | Paste code → get inline feedback and suggestions |
| Doc Generator | Select component → auto-generate documentation |
| Commit Writer | Staged diff → conventional commit message |
| Roadmap AI | Backlog + goals → quarterly prioritized roadmap |
The GitHub page (/app/github) fetches live data from the GitHub REST API for @MujtabaZadaii:
- Public repositories (sorted by last push)
- Recent commit feed from public events
- Activity timeline (PRs, forks, stars, branch creates)
- Aggregate stats: total stars, forks, repo count, commit count
No API token required — uses unauthenticated public rate limit (60 req/hour).
npm run dev # Start dev server on :8080
npm run build # Production build
npm run preview # Preview production build locally
npm run test # Run Vitest tests
npm run lint # ESLintMIT © 2024 Mujtaba Zadaii