A Cloud-Native, Distributed Platform for Scalable Collaboration & Hackathon Management
InShot_20260612_191404340.mp4
Built with modern backend architecture principles, real-time event processing, and a premium "glassmorphism" UI.
SkillSync is a highly scalable, distributed ecosystem engineered to orchestrate hackathons, facilitate team collaboration, and manage complex project lifecycles.
Designed to demonstrate production-grade system architecture, SkillSync leverages a Microservices Architecture utilizing NestJS, RabbitMQ, and an API Gateway. The frontend is a highly responsive, animated React application built with Vite and Framer Motion, delivering a seamless user experience.
The platform is decoupled into tightly scoped, independently deployable services (Auth, User, Project, Chat, Hackathon). This enforces domain separation, ensures fault isolation, and allows individual services to scale horizontally based on load.
Synchronous HTTP calls between services are minimized. Instead, services communicate asynchronously via RabbitMQ. This event-driven pattern offloads heavy processing, prevents cascading failures, and reduces response latency by up to 30%.
A unified NestJS API Gateway acts as the single entry point for the frontend client. It handles request routing, JWT validation, payload parsing (including multipart/form-data for AWS S3 uploads), and strict access control before traffic ever hits internal microservices.
The client application isn't just functional—it's beautifully engineered as a modern workspace. Built with React 19, it features:
- Workspace Dashboard: A rigid layout featuring real-time presence, dynamic metrics, and quick action widgets.
- Global Command Palette: A sleek
Ctrl + Kinterface for instant application-wide navigation. - Animated Auth Views: Split-pane login and registration screens featuring a dynamic typewriter quote engine.
- Glassmorphism Design System: Dark luxury aesthetics with dynamic dual-tone radial gradients, deep drop-shadows, and backdrop blurs.
- Advanced Media Handling: A custom multi-video rendering engine that intelligently embeds YouTube and native Google Drive iframe streams.
Direct integration with AWS S3 for secure, durable, and highly available storage of project gallery images and user assets, streamed directly through the API Gateway using multer.
flowchart TD
subgraph Frontend["Frontend Architecture (React 19 / Vite)"]
direction TB
CoreUI["Premium UI Engine<br/>(Glassmorphism, Framer Motion)"]
Dashboard["Workspace Dashboard<br/>(Rigid Layout, Metrics)"]
CmdPalette["Global Command Palette<br/>(Ctrl+K Navigation)"]
AuthUI["Animated Auth Views<br/>(Typewriter Engine)"]
CoreUI --- Dashboard
CoreUI --- CmdPalette
CoreUI --- AuthUI
end
Gateway["API Gateway (NestJS)"]
S3["AWS S3 Bucket"]
Frontend -->|HTTP / REST| Gateway
Gateway -->|Multipart Upload| S3
subgraph Microservices["Microservices Cluster"]
Auth["Auth Service"]
User["User Service"]
Project["Project Service"]
Chat["Chat Service"]
Hackathon["Hackathon Service"]
Notification["Notification Service"]
end
Gateway -.->|TCP / Internal| Auth
Gateway -.->|TCP / Internal| User
Gateway -.->|TCP / Internal| Project
Gateway -.->|TCP / Internal| Chat
Gateway -.->|TCP / Internal| Hackathon
subgraph Infrastructure
PostgreSQL["PostgreSQL"]
Redis["Redis Cache"]
RabbitMQ["RabbitMQ Message Broker"]
end
Auth --> PostgreSQL
User --> PostgreSQL
Project --> PostgreSQL
Hackathon --> PostgreSQL
Auth --> Redis
User --> Redis
Project --> Redis
User -->|Publish Events| RabbitMQ
Project -->|Publish Events| RabbitMQ
Hackathon -->|Publish Events| RabbitMQ
RabbitMQ -->|Consume Events| Notification
RabbitMQ -->|Consume Events| Auth
Chat <-->|WebSocket| Frontend
- Framework: React 19, TypeScript, Vite
- Styling: Custom CSS Design System, Tailwind Utilities, Glassmorphism
- Animations: Framer Motion
- Components: Lucide React (Icons), UIW Markdown Editor, React Player
- State & Auth: React Context API, JWT Decode, Axios Interceptors
- Framework: NestJS, Node.js, Express
- Database: PostgreSQL (Relational Data), Prisma ORM
- Message Broker: RabbitMQ (Event-driven AMQP communication)
- Caching: Redis (Session & fast-access data)
- Cloud Storage: AWS S3 (via
@aws-sdk/client-s3)
- Containerization: Docker, Docker Compose
- Architecture Pattern: API Gateway + Distributed Microservices
| Service | Primary Responsibility | Key Integrations |
|---|---|---|
| API Gateway | Request routing, JWT validation, AWS S3 File proxying. | NestJS, Multer, AWS S3 |
| Auth Service | Identity management, token signing, Bcrypt hashing. | PostgreSQL, Redis, RabbitMQ |
| User Service | User profiles, preferences, social metrics. | PostgreSQL, RabbitMQ |
| Project Service | Project lifecycle, relational constraints (Cascade Deletes), task management. | PostgreSQL, RabbitMQ |
| Hackathon Service | Hackathons, Search Hackathons, Participate in Hackathons, Host hackathons, Role based management. | PostgreSQL, PQSQL fast Search |
| Chat Service | Real-time messaging and dynamic WebSocket rooms. | WebSockets, Socket.IO |
| Notification | Asynchronous email/push dispatch via RabbitMQ consumer queues. | RabbitMQ |
The entire distributed stack can be spun up locally using Docker.
git clone https://github.com/your-username/skillsync.git
cd skillsyncCreate .env files where required. The Docker Compose configuration handles most internal networking automatically. You will need to provide AWS S3 credentials in the api-gateway environment if you wish to test cloud uploads.
Docker Compose will build the frontend, the API Gateway, all 6 microservices, and provision the PostgreSQL and RabbitMQ containers.
docker-compose up --build- Frontend UI:
http://localhost:5173 - API Gateway:
http://localhost:3000 - RabbitMQ Management:
http://localhost:15672(guest / guest)
- Stateless Authentication: Short-lived JWTs managed client-side with auto-attaching Axios interceptors.
- Relational Integrity: Prisma schemas utilize robust constraints (e.g.,
onDelete: Cascadefor project members) to prevent orphaned records. - Secure File Handling: Files are buffered server-side via the API Gateway to prevent exposing AWS S3 CORS policies or direct write-access to the client.
- Rate Limiting & Guards: NestJS guards protect internal microservice boundaries.
This project is open-source and available under the MIT License.
