DevSync

A Modern Full-Stack Project Management Platform

Manage projects, collaborate with teams, track tasks, and monitor progress through a beautiful dashboard.

🌐 Live Demo

https://dev-sync-roan.vercel.app

---

📖 Overview

DevSync is a modern project management platform inspired by tools like Trello and Jira.

It allows users to create projects, manage tasks, organize teams, visualize project progress, and collaborate efficiently through an intuitive dashboard and Kanban board.

The application follows a full-stack architecture using React for the frontend, Express.js for the backend, MySQL as the database, and JWT Authentication for secure access.

---

✨ Features

🔐 Authentication

• User Registration
• Secure Login
• JWT Authentication
• Protected Routes

📁 Project Management

• Create Projects
• Edit Projects
• Delete Projects
• View Project Details

✅ Task Management

• Create Tasks
• Update Tasks
• Delete Tasks
• Task Status Tracking

🧩 Kanban Board

• Drag & Drop Tasks
• Workflow Management
• Status Updates

👥 Team Management

• Add Team Members
• Manage Teams
• Assign Responsibilities

📊 Dashboard

• Project Statistics
• Task Analytics
• Pending & Completed Tasks
• Interactive Charts

🔔 Activity Tracking

• User Activity Timeline
• Recent Actions
• Project Updates

🌙 User Experience

• Responsive Design
• Dark Mode
• Toast Notifications
• Beautiful UI

---

🛠 Tech Stack

Frontend

• React
• Vite
• Tailwind CSS
• React Router
• Axios
• Recharts
• DnD Kit
• React Toastify

---

Backend

• Node.js
• Express.js
• JWT Authentication
• bcrypt.js
• REST API

---

Database

• MySQL

---

Deployment

Service	Platform
Frontend	Vercel
Backend	Render
Database	Railway

---

Projects

📸 Application Screenshots

🏠 Landing Page

---

🔐 Login

---

📊 Dashboard

---

📁 Projects

---

📋 Kanban Board

📂 Project Structure

DevSync
│
├── client
│   ├── src
│   ├── public
│   └── package.json
│
├── server
│   ├── controllers
│   ├── middleware
│   ├── routes
│   ├── config
│   └── server.js
│
└── README.md

---

⚙ Installation

Clone Repository

git clone https://github.com/HarshAwasth-i/DevSync.git

Move into the project

cd DevSync

---

Frontend

cd client
npm install
npm run dev

---

Backend

cd server
npm install
npm start

---

Environment Variables

Create a .env file inside the server folder.

PORT=5000

DB_HOST=localhost
DB_PORT=3306
DB_USER=your_username
DB_PASSWORD=your_password
DB_NAME=devsync

JWT_SECRET=your_secret_key

---

🚀 Future Improvements

• File Attachments
• Calendar View
• Email Notifications
• Role-Based Permissions
• Real-Time Collaboration
• WebSocket Support
• Project Templates
• Task Comments

---

📈 Learning Outcomes

Through this project, I gained practical experience in:

• Full-Stack Development
• REST API Design
• Authentication using JWT
• MySQL Database Design
• CRUD Operations
• State Management
• Deployment using Vercel, Render & Railway
• Responsive UI Design
• Git & GitHub Workflow

---

👨‍💻 Author

Harsh Awasthi

GitHub: https://github.com/HarshAwasth-i

LinkedIn: (https://www.linkedin.com/in/harsh-awasthi-181761331/)

---

Made with ❤️ using React, Node.js, Express & MySQL