Synclly - Developer Workflow Dashboard

A unified dashboard for GitHub repositories, commits, pull requests, and Vercel deployments. Built for modern development teams who want to streamline their workflow.

🚀 Features

✅ Core Features

• GitHub Integration: View repositories, commits, and pull requests
• Vercel Deployment Status: Track deployment statuses and build logs
• Real-time Updates: Get notified about failed builds and deployment issues
• Dark Mode: Beautiful dark/light mode toggle
• Responsive Design: Works perfectly on desktop and mobile
• OAuth Authentication: Secure GitHub OAuth integration

🎯 Dashboard Features

• Repository Overview: See all your GitHub repositories in one place
• Commit Tracking: Monitor recent commits with detailed information
• Pull Request Management: Track open and closed pull requests
• Deployment Monitoring: Real-time Vercel deployment status
• Analytics: Development activity insights and statistics
• Team Collaboration: Share insights with your development team

🛠️ Tech Stack

Frontend

• React 18 with Vite for fast development
• TailwindCSS for styling
• React Router for navigation
• Framer Motion for animations
• Headless UI for accessible components
• Axios for API calls

Backend

• Node.js with Express.js
• MongoDB with Mongoose ODM
• Passport.js for GitHub OAuth
• JWT for authentication
• CORS for cross-origin requests

🚀 Quick Start

Prerequisites

• Node.js 18+
• MongoDB (local or Atlas)
• GitHub OAuth app
• Vercel account (optional)

Installation

1. Clone the repository

   git clone https://github.com/devlopersumit/Syncly-Developer-Workflow-Dashboard.git
   cd Syncly-Developer-Workflow-Dashboard

2. Install Dependencies

   # Backend
   cd backend
   npm install
   
   # Frontend
   cd ../frontend
   npm install

3. Environment Setup

   Backend (.env)

   MONGO_URI=mongodb://localhost:27017/syncly
   JWT_SECRET=your_super_secret_jwt_key_here
   GITHUB_CLIENT_ID=your_github_client_id
   GITHUB_CLIENT_SECRET=your_github_client_secret
   GITHUB_OAUTH_CALLBACK_URL=http://localhost:4000/auth/github/callback
   FRONTEND_URL=http://localhost:5173
   NODE_ENV=development
   PORT=4000
   VERCEL_API_TOKEN=your_vercel_api_token (optional)

   Frontend (.env)

   VITE_API_URL=http://localhost:4000
   VITE_GITHUB_CLIENT_ID=your_github_client_id (optional)
   VITE_NODE_ENV=development

4. Start the Application

   # Terminal 1 - Backend
   cd backend
   npm run dev
   
   # Terminal 2 - Frontend
   cd frontend
   npm run dev

5. Access the Application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:4000
   • Health Check: http://localhost:4000/health

📖 Detailed Setup Guide: See SETUP.md for comprehensive setup instructions including GitHub OAuth configuration and MongoDB setup.

📁 Project Structure

Syncly/
├── backend/
│   ├── src/
│   │   ├── controllers/     # Route controllers
│   │   ├── models/          # MongoDB schemas
│   │   ├── routes/          # API routes
│   │   ├── middleware/      # Custom middleware
│   │   └── lib/            # Utility libraries
│   ├── package.json
│   └── .env
├── frontend/
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── pages/          # Page components
│   │   ├── context/        # React contexts
│   │   ├── hooks/          # Custom hooks
│   │   └── lib/            # Utility functions
│   ├── public/
│   └── package.json
└── README.md

🎨 Design System

• Colors: Professional blue and gray palette
• Typography: Inter font family for clean readability
• Components: Reusable UI components with consistent styling
• Dark Mode: Full dark/light mode support
• Animations: Smooth transitions and micro-interactions

🔧 Development

Backend Development

cd backend
npm run dev          # Start development server
npm run start        # Start production server

Frontend Development

cd frontend
npm run dev          # Start Vite dev server
npm run build        # Build for production
npm run preview      # Preview production build

🚀 Deployment

Frontend (Vercel)

1. Connect your GitHub repository to Vercel
2. Set build command: npm run build
3. Set output directory: dist
4. Add environment variables

Backend (Render)

1. Connect your GitHub repository to Render
2. Set build command: npm install
3. Set start command: npm start
4. Add environment variables

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• GitHub API for repository data
• Vercel API for deployment status
• React community for excellent libraries
• TailwindCSS for beautiful styling

📞 Support

If you have any questions or need help, please open an issue or contact us at sumitsj2002@gmail.com.

---

Built by developers, for developers ❤️