GitHub - homophobiaa/FlowHub: A modern task and workflow management system inspired by tools like Linear and Trello, built as a full-stack web application using a React SPA frontend and ASP.NET Core Web API backend.

This project is developed as both a school project and a potential SaaS product.

A modern task and workflow management system inspired by tools like Linear and Trello, built as a full-stack web application using a React SPA frontend and ASP.NET Core Web API backend.

🌐 Website: getflowhub.app

Some dashboard sections are intentionally mocked/preview-only while corresponding backend systems are still under development.

Tech Stack

Frontend

React + TypeScript (Vite)
Tailwind CSS
React Router
Component-based SPA architecture
Optimistic UI updates
API-driven frontend

Backend

ASP.NET Core Web API
Entity Framework Core (Code First)
JWT Authentication

Database

PostgreSQL

Hosting (planned)

Frontend: Vercel
Backend: Railway
Database: Railway

Concept

FlowHub is not just a Trello clone.

The goal is to create a fast, minimal, and structured workflow system focused on:

Speed
Clean UI
Real usability
Smooth interactions
Modern SaaS UX

The frontend is heavily inspired by modern productivity tools like Linear while maintaining its own structure and branding.

Core Features

Authentication

Register / Login
JWT-based authentication
Protected app routes
Persistent login via local storage

Workspaces

Create and manage workspaces
Workspace switching
Multi-workspace structure

Boards

Create boards inside workspaces
Kanban-style workflow organization

Tasks

Create, edit, move, and delete tasks
Drag & drop between columns
Inline editing
Optimistic UI updates

Columns

Default Todo / In Progress / Done columns
Column-based task organization

Collaboration Features

Task comments
Labels / tags
Activity logging foundation

Frontend / UX

Fully redesigned SaaS-style interface
Premium animated landing page
Responsive dashboard layout
Custom error pages
Mocked future-product sections clearly marked

Planned / Future Features

Workspace invitations / collaboration
Real notifications
Real-time updates (SignalR)
Due dates & reminders
File uploads
Advanced filtering/search
Keyboard shortcuts
Analytics / productivity insights
Deployment & production environment

Database Schema

The database is designed for scalability, workspace isolation, and clean relational integrity.

Key design decisions:

Multi-workspace architecture
Soft delete support across core entities
Relational integrity with proper foreign keys
Indexed fields for performance
EF Core code-first workflow

Interactive Diagram

👉 https://dbdiagram.io/d/FlowHub-69cd9c4678c6c4bc7ac35520

Architecture Overview

Frontend (React SPA)

React + TypeScript SPA
React Router navigation
Centralized API service layer
Optimistic UI state updates
Protected routes with auth context

Backend (ASP.NET Core)

RESTful API
JWT authentication
EF Core + PostgreSQL
Data annotations validation
Simple controller-based architecture

Database

EF Core migrations
PostgreSQL relational structure
Code-first development flow

Fresh Setup

Prerequisites

Tool	Minimum version	Notes
Node.js	18	Required for the frontend
.NET SDK	8.0	Required for the backend
PostgreSQL	14	Local instance or Docker
EF Core CLI	8.0	`dotnet tool install -g dotnet-ef`

1. Clone the repository

git clone <repo-url>
cd FlowHub

2. Configure backend environment

Copy the example settings file and fill in your values:

cp backend/appsettings.Development.example.json backend/appsettings.Development.json

Then edit backend/appsettings.Development.json:

Example:

{
  "ConnectionStrings": {
    "DefaultConnection": "Host=localhost;Port=5432;Database=flowhub_dev;Username=postgres;Password=YOUR_PASSWORD"
  },
  "Jwt": {
    "Key": "REPLACE_WITH_A_LONG_RANDOM_SECRET_AT_LEAST_32_CHARS",
    "Issuer": "FlowHub",
    "Audience": "FlowHubClient",
    "ExpiresInDays": 7
  }
}

appsettings.Development.json is intentionally not committed to GitHub.

JWT key: Generate a secure random string (32+ characters). On macOS/Linux: openssl rand -base64 32

3. Configure frontend environment (optional)

The frontend auto-targets http://localhost:5000 when VITE_API_URL is not set. To override:

# frontend/.env.local  (not committed)
VITE_API_URL=http://localhost:5000

4. Install dependencies

Frontend:

cd frontend
npm install

Backend:

cd ../backend
dotnet restore

4. Apply migrations

dotnet ef database update

5. Start the app

From the root folder:

npm run dev

Or separately:

Backend:

cd backend
dotnet run

Frontend:

cd frontend
npm run dev

The app will be available at:

Frontend: http://localhost:5173
Backend API: http://localhost:5000
Swagger UI: http://localhost:5000/swagger (Development only)

Development Seed User

A seeded development account is automatically created in Development mode.

Email:    dev@getflowhub.app
Password: 12345678

You can use this account immediately after running migrations and starting the app.

Reset Local Development Database

Drop and recreate the local database:

cd backend

dotnet ef database drop
dotnet ef database update

Seed data is recreated automatically in Development mode.

Project Structure

FlowHub/
├── backend/
│   ├── Controllers/      # API endpoints
│   ├── DTOs/             # Request/response shapes
│   ├── Models/           # EF Core entities + shared constants
│   ├── Data/             # AppDbContext, development seeder
│   ├── Services/         # JWT token service, helper extensions
│   └── Migrations/       # EF Core migration history
│
├── frontend/
│   ├── src/
│   │   ├── components/   # Reusable UI, layout, auth, board, workspace
│   │   ├── pages/        # Route-level page components
│   │   ├── services/     # API call helpers (one file per domain)
│   │   ├── types/        # Shared TypeScript interfaces
│   │   └── utils/        # Pure utility helpers (e.g. colorHash)
│   └── public/
│
└── .github/
    ├── copilot-instructions.md
    └── design.md

Development Notes

Backend Philosophy

The backend intentionally avoids unnecessary complexity.

Not used intentionally:

Repository pattern
CQRS
AutoMapper
ASP.NET Identity
Heavy abstraction layers

Goal:

Keep code easy to understand
Keep architecture production-like but explainable
Make debugging straightforward

Frontend Philosophy

The frontend focuses more heavily on:

Product feel
UX polish
Animations
Responsive design
SaaS-style presentation

AI-Assisted Development

This project is AI-assisted, but:

Architecture and technical decisions are human-driven
Project-specific rules are enforced through:
- .github/copilot-instructions.md
- .github/design.md
Focus is on maintainable and understandable code, not blindly generated output

Name		Name	Last commit message	Last commit date
Latest commit History 120 Commits
.claude		.claude
.github/workflows		.github/workflows
.vscode		.vscode
backend		backend
docs		docs
frontend		frontend
tests		tests
.gitignore		.gitignore
FlowHub.sln		FlowHub.sln
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

Tech Stack

Frontend

Backend

Database

Hosting (planned)

Concept

Core Features

Authentication

Workspaces

Boards

Tasks

Columns

Collaboration Features

Frontend / UX

Planned / Future Features

Database Schema

Interactive Diagram

Architecture Overview

Frontend (React SPA)

Backend (ASP.NET Core)

Database

Fresh Setup

Prerequisites

1. Clone the repository

2. Configure backend environment

3. Configure frontend environment (optional)

4. Install dependencies

4. Apply migrations

5. Start the app

Development Seed User

Reset Local Development Database

Project Structure

Development Notes

Backend Philosophy

Frontend Philosophy

AI-Assisted Development

Status

Backend

Frontend

Current Focus

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages