Managing projects across a growing team can quickly become chaotic. Tasks get lost in chats, deadlines slip, and project visibility becomes difficult.
To solve this problem, I built FlowDesk, a full-stack SaaS application that helps teams organize projects, manage tasks, collaborate efficiently, and track progress through a Kanban-based workflow.
In this article, I'll walk through the architecture, features, challenges, and lessons learned while building FlowDesk.
📌 Why I Built FlowDesk
Many startups, student teams, and small organizations need a simple project management solution without the complexity of enterprise tools.
The goal was to create a platform that allows users to:
- Create and manage projects
- Assign tasks to team members
- Track work progress visually
- Monitor deadlines
- View productivity statistics
- Collaborate within a shared workspace
FlowDesk was designed as a lightweight SaaS platform while still demonstrating production-level backend architecture and database design principles.
🛠 Tech Stack
Frontend
- HTML5
- CSS3
- Vanilla JavaScript
Backend
- Node.js
- Express.js
Database
- MySQL 8
Authentication & Security
- JWT Authentication
- bcrypt Password Hashing
API Architecture
- RESTful APIs
- JSON Responses
- Middleware-Based Authorization
🏗 System Architecture
The application follows a traditional full-stack architecture:
Frontend (SPA)
│
▼
REST API (Express.js)
│
▼
MySQL Database
Frontend Responsibilities
The frontend provides:
- Authentication pages
- Dashboard interface
- Project management screens
- Kanban board
- Search and filtering
- Responsive layouts
Backend Responsibilities
The backend handles:
- User authentication
- Authorization
- Business logic
- Database operations
- Activity tracking
- API responses
Database Responsibilities
The MySQL database stores:
- Users
- Projects
- Tasks
- Team memberships
- Activity logs
🗄 Database Design
Designing proper relationships was one of the most important parts of the project.
Users Table
Stores application users.
| Field | Purpose |
|---|---|
| id | User ID |
| name | Full Name |
| User Email | |
| password_hash | Secure Password |
| role | Admin / Member |
Projects Table
Stores project information.
| Field | Purpose |
|---|---|
| id | Project ID |
| name | Project Name |
| description | Project Details |
| owner_id | Creator |
| color | UI Theme Color |
| status | Active / Completed |
Project Members Table
Creates a many-to-many relationship between users and projects.
| Field | Purpose |
|---|---|
| project_id | Project |
| user_id | User |
| role | Member Role |
Tasks Table
Stores project tasks.
| Field | Purpose |
|---|---|
| id | Task ID |
| title | Task Title |
| project_id | Associated Project |
| assignee_id | Assigned User |
| status | Workflow Stage |
| priority | Low / Medium / High / Urgent |
| due_date | Deadline |
Activity Log Table
Tracks user actions throughout the system.
| Field | Purpose |
|---|---|
| user_id | Actor |
| action | Action Performed |
| entity_type | Task / Project |
| entity_id | Related Record |
🔐 Authentication & Security
Security was a major focus during development.
JWT Authentication
FlowDesk uses JWT tokens to:
- Authenticate users
- Protect API routes
- Maintain sessions
- Verify requests
Password Protection
User passwords are secured using bcrypt hashing before being stored in the database.
This ensures that raw passwords never exist inside the database.
📡 REST API Design
The backend exposes RESTful endpoints for all major resources.
Authentication
POST /api/auth/register
POST /api/auth/login
GET /api/auth/me
Projects
GET /api/projects
POST /api/projects
GET /api/projects/:id
PUT /api/projects/:id
DELETE /api/projects/:id
Tasks
GET /api/tasks
POST /api/tasks
PUT /api/tasks/:id
PATCH /api/tasks/:id/status
DELETE /api/tasks/:id
Dashboard
GET /api/dashboard/stats
✨ Key Features
📊 Dashboard Analytics
Users can quickly view:
- Total Projects
- Total Tasks
- Completed Tasks
- Pending Tasks
- Recent Activity
This provides instant visibility into project progress.
📁 Project Management
FlowDesk allows users to:
- Create projects
- Update project details
- Delete projects
- Customize project colors
- Track completion status
📋 Kanban Board
Tasks move through four workflow stages:
To Do
↓
In Progress
↓
In Review
↓
Done
This workflow helps teams visualize project progress in real time.
⚡ Task Prioritization
Each task supports priority levels:
- Low
- Medium
- High
- Urgent
This helps teams focus on critical work first.
⏰ Due Date Monitoring
FlowDesk automatically highlights:
- Upcoming deadlines
- Overdue tasks
making project management more proactive.
👥 Team Collaboration
The platform supports:
- Multiple users
- Shared projects
- Team memberships
- Task assignments
- Collaborative workflows
📱 Responsive Design
The entire application was built with responsiveness in mind.
Supported devices include:
- Desktop
- Laptop
- Tablet
- Mobile
The goal was to provide a consistent experience regardless of screen size.
🚧 Challenges Faced During Development
Every project comes with obstacles.
1. Authentication Flow
Implementing JWT authentication required careful handling of:
- Token generation
- Route protection
- Session validation
2. Database Relationships
Managing relationships between:
- Users
- Projects
- Tasks
- Members
required proper schema planning and foreign key design.
3. State Management Without Frameworks
Because the frontend was built using Vanilla JavaScript, managing UI state required custom solutions without React or Vue.
This greatly improved my understanding of browser-side application architecture.
4. Kanban Consistency
Ensuring task movements remained synchronized with database records was another interesting challenge.
📚 What I Learned
Building FlowDesk helped strengthen my skills in:
✅ Full-Stack Development
✅ REST API Design
✅ Express.js Architecture
✅ JWT Authentication
✅ SQL Database Modeling
✅ Backend Security
✅ Frontend State Management
✅ SaaS Product Development
✅ Git & GitHub Workflows
🔮 Future Improvements
There are several features I'd love to add in future versions:
- Drag-and-Drop Kanban Board
- Real-Time Notifications
- WebSocket Integration
- Team Chat
- File Attachments
- Email Notifications
- Dark Mode
- Advanced Analytics
- Docker Deployment
- CI/CD Pipeline
- Granular Role-Based Permissions
- Cloud Deployment
🎯 Final Thoughts
FlowDesk represents my journey through designing and building a complete SaaS product from scratch.
The project combines:
- Database Design
- Backend Development
- Authentication Systems
- REST APIs
- Frontend Engineering
- Team Collaboration Features
into a single scalable application.
While there is still room for improvement, the project successfully demonstrates the core principles behind modern SaaS development and provides a solid foundation for future enhancements.
Thanks for reading! If you have suggestions, feedback, or ideas for new features, I'd love to hear them in the comments.
Happy Coding 🚀
Top comments (0)