Skip to content

saumya3005/flowsync

BranchesTags

Repository files navigation

🚀 FlowSync

A Modern Project Management & Team Collaboration Platform

✨ About FlowSync

FlowSync is a full-stack SaaS-style project management platform built for teams, developers, students, and project collaborators.

It combines the productivity of Trello, the structure of Asana, the speed of Linear, and collaboration features inspired by Google Meet.

With FlowSync, users can manage projects, create tasks, invite members, track progress, collaborate in real time, and organize work inside a modern dashboard.

🌐 Live Links

Type Link
🚀 Frontend https://flowsync-peach-five.vercel.app
⚙️ Backend Health https://flowsync-lc3f.onrender.com/api/health
🗄️ Database MongoDB Atlas
☁️ Frontend Deploy Vercel
☁️ Backend Deploy Render

🎯 Core Highlights

  • 🔐 Secure authentication with JWT
  • 📊 Dynamic dashboard with real data
  • 📁 Project creation, editing, deletion
  • ✅ Task creation, editing, assignment, deletion
  • 👥 Team member management
  • 📩 Invite member structure
  • 🔔 Notification system structure
  • 🎥 Meeting room and WebRTC signaling structure
  • ⚡ Real-time updates using Socket.io
  • 🎨 Premium SaaS-style UI
  • 📱 Responsive layout for desktop and mobile
  • ☁️ Deployed with Vercel + Render + MongoDB Atlas

🧩 Feature Overview

📊 Dashboard

  • User-specific dashboard
  • Total projects
  • Active tasks
  • Completed tasks
  • Overdue tasks
  • Recent projects
  • Recent tasks

📁 Projects

  • Create projects
  • Edit projects
  • Delete projects
  • Project owner
  • Project members
  • Priority and due dates
  • Member roles

✅ Tasks

  • Create tasks
  • Edit tasks
  • Delete tasks
  • Assign tasks
  • Task priority
  • Task status
  • Labels and deadlines

👥 Team

  • View team members
  • Invite members
  • Role-based structure
  • User avatars
  • Email-based member flow
  • Online status structure

🎥 Meetings

  • Meeting rooms
  • Room ID structure
  • Join meeting flow
  • Socket.io signaling
  • WebRTC-ready architecture
  • Mic/camera control structure

🔔 Notifications

  • User-specific notifications
  • Project invite alerts
  • Task update alerts
  • Real-time notification structure
  • Read/unread flow structure

🛠️ Tech Stack

Frontend

  • Next.js
  • React
  • Tailwind CSS
  • Framer Motion
  • Axios
  • Context API
  • Lucide React

Backend

  • Node.js
  • Express.js
  • MongoDB
  • Mongoose
  • JWT Authentication
  • bcrypt.js
  • Socket.io
  • Cookie Parser
  • dotenv

Deployment

  • Vercel
  • Render
  • MongoDB Atlas

🏗️ Architecture

┌───────────────────────────────┐
│           User Browser         │
└───────────────┬───────────────┘
                │
                ▼
┌───────────────────────────────┐
│       Next.js Frontend         │
│  Pages • Components • Context  │
└───────────────┬───────────────┘
                │ Axios / Socket.io
                ▼
┌───────────────────────────────┐
│      Express.js Backend        │
│ Routes • Controllers • Models  │
└───────────────┬───────────────┘
                │
                ▼
┌───────────────────────────────┐
│         MongoDB Atlas          │
│ Users • Projects • Tasks       │
│ Comments • Meetings • Alerts   │
└───────────────────────────────┘

📂 Folder Structure

flowsync/
│
├── src/
│   ├── app/
│   │   ├── dashboard/
│   │   ├── projects/
│   │   ├── tasks/
│   │   ├── team/
│   │   ├── meetings/
│   │   ├── notifications/
│   │   ├── settings/
│   │   ├── login/
│   │   └── signup/
│   │
│   ├── components/
│   │   ├── layout/
│   │   ├── modals/
│   │   └── ui/
│   │
│   ├── context/
│   ├── lib/
│   └── utils/
│
├── server/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   └── index.js
│
├── package.json
└── README.md

⚙️ Installation & Setup

1. Clone the Repository

git clone https://github.com/saumya3005/flowsync.git
cd flowsync

2. Install Frontend Dependencies

npm install

3. Install Backend Dependencies

cd server
npm install

🔐 Environment Variables

Create a .env file inside the server folder:

PORT=5001
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:3000
NODE_ENV=development

For frontend deployment, add these variables in Vercel:

NEXT_PUBLIC_API_URL=https://your-render-backend-url.onrender.com/api
NEXT_PUBLIC_SOCKET_URL=https://your-render-backend-url.onrender.com

▶️ Run Locally

Start Backend

cd server
npm run dev

Backend runs on:

http://localhost:5001

Start Frontend

Open a new terminal:

cd flowsync
npm run dev

Frontend runs on:

http://localhost:3000

🔗 API Routes

Authentication

POST   /api/auth/signup
POST   /api/auth/login
POST   /api/auth/logout
GET    /api/auth/me

Users

GET    /api/users
GET    /api/users/:id
PUT    /api/users/profile
PUT    /api/users/avatar
PUT    /api/users/password
PUT    /api/users/preferences

Projects

GET    /api/projects
POST   /api/projects
GET    /api/projects/:id
PUT    /api/projects/:id
DELETE /api/projects/:id
POST   /api/projects/:id/invite
POST   /api/projects/:id/members
DELETE /api/projects/:id/members/:userId

Tasks

GET    /api/tasks
POST   /api/tasks
GET    /api/tasks/:id
PUT    /api/tasks/:id
DELETE /api/tasks/:id
PATCH  /api/tasks/:id/status
POST   /api/tasks/:id/checklist
PATCH  /api/tasks/:id/checklist/:itemId

Notifications

GET    /api/notifications
PATCH  /api/notifications/:id/read
PATCH  /api/notifications/read-all

Meetings

POST   /api/meetings
GET    /api/meetings
GET    /api/meetings/:roomId
POST   /api/meetings/:roomId/join

🧠 What I Learned

While building FlowSync, I worked on

  • JWT authentication
  • MongoDB data modeling
  • REST API design
  • Real-time Socket.io events
  • Project and task CRUD operations
  • Deployment using Vercel and Render
  • CORS handling in production
  • SaaS dashboard UI/UX design
  • Context-based state management

🚀 Latest Update

Improved project documentation

🖼️ Screenshots

Add your screenshots inside a folder like public/screenshots/ and update the image paths below.

![Dashboard](public/screenshots/dashboard.png)
![Projects](public/screenshots/projects.png)
![Tasks](public/screenshots/tasks.png)
![Team](public/screenshots/team.png)

🚀 Roadmap

  • JWT Authentication
  • Project CRUD
  • Task CRUD
  • Deployment
  • Dynamic dashboard
  • Advanced Kanban drag-and-drop
  • Full meeting experience
  • Email invitations
  • OTP verification
  • File attachments
  • Advanced analytics
  • Calendar view
  • AI task suggestions

🧪 Testing Checklist

  • Signup
  • Login
  • Logout
  • Create project
  • Edit project
  • Delete project
  • Create task
  • Edit task
  • Delete task
  • Dashboard loads real data
  • Backend deployed
  • Frontend deployed
  • Team role management
  • Full meeting testing
  • Advanced notifications

🚀 Deployment

Frontend: Vercel

https://flowsync-peach-five.vercel.app

Backend: Render

https://flowsync-lc3f.onrender.com

Database: MongoDB Atlas

Used for storing:

  • Users
  • Projects
  • Tasks
  • Comments
  • Meetings

👩‍💻 Author

Saumya Agrahari

B.Tech AI & ML Student | Full-Stack Developer | Project Builder

🤝 Contribution

Contributions are welcome

git fork
git checkout -b feature-name
git commit -m "Add feature"
git push origin feature-name

Then open a Pull Request..

📜 License

This project is licensed under the MIT License.

⭐ Star this repository if you like FlowSync

About

flowsync-peach-five.vercel.app

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages