A modern, responsive React application that helps competitive programmers automatically sync upcoming coding contests to their Google Calendar.
Built with React + Vite + Tailwind CSS, CPSync provides a beautiful dashboard for viewing contests, managing platform preferences, and triggering instant Google Calendar synchronization.
-
🎯 Beautiful Modern UI
- Clean glassmorphism design
- Smooth Framer Motion animations
- Fully responsive layout
-
🔐 Google OAuth2 Authentication
- One-click Google Sign-In
- JWT-based authentication
- Automatic session handling
-
📅 Contest Dashboard
- View upcoming contests
- Countdown timers
- Contest duration
- Direct contest links
-
🌍 Multi Platform Support
- Codeforces
- LeetCode
- CodeChef
- AtCoder
-
🔍 Smart Filtering
- Filter contests by platform
- View only preferred contests
- Dynamic sorting
-
⚡ Instant Calendar Sync
- Sync contests to Google Calendar with one click
- No duplicate events
- Real-time synchronization status
-
👤 Profile Management
- Enable/Disable platforms
- Pause automatic syncing
- Resume synchronization anytime
| Category | Technologies |
|---|---|
| Framework | React 19 + Vite |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Routing | React Router DOM |
| HTTP Client | Fetch API |
| Authentication | Google OAuth2 + JWT |
| UI Components | Custom Components + shadcn/ui |
src/
│
├── assets/
│ ├── hero.png
│ └── icons
│
├── components/
│ │
│ ├── common/
│ │ ├── Hero.jsx
│ │ ├── Features.jsx
│ │ ├── HowItWorks.jsx
│ │ └── Stats.jsx
│ │
│ ├── contests/
│ │ ├── ContestCard.jsx
│ │ └── Filters.jsx
│ │
│ ├── layout/
│ │ ├── Navbar.jsx
│ │ └── Footer.jsx
│ │
│ └── ui/
│ ├── button.jsx
│ ├── card.jsx
│ └── index.jsx
│
├── lib/
│ ├── api.js
│ ├── auth.js
│ └── utils.js
│
├── pages/
│ ├── LandingPage.jsx
│ ├── Dashboard.jsx
│ ├── ProfilePage.jsx
│ ├── AuthCallback.jsx
│ └── NotFound.jsx
│
├── App.jsx
├── main.jsx
└── index.css
- Node.js 18+
- npm or pnpm
- CPSync Backend running locally or deployed
Clone the repository
git clone https://github.com/yourusername/cpsync-frontend.git
cd cpsync-frontendInstall dependencies
npm installor
pnpm installCreate a .env file in the project root.
VITE_API_URL=http://localhost:8080
VITE_FRONTEND_URL=http://localhost:5173If using a deployed backend:
VITE_API_URL=https://your-backend-url.comnpm run devApplication will be available at
http://localhost:5173
npm run buildPreview production build
npm run preview- Animated Hero Section
- Platform Showcase
- Feature Cards
- How It Works
- Statistics
- Footer
- Upcoming Contests
- Live Countdown
- Platform Filters
- Manual Sync Button
- Responsive Contest Cards
- User Information
- Platform Preferences
- Pause/Resume Auto Sync
- Google Account Integration
User
│
▼
Continue with Google
│
▼
Google OAuth2
│
▼
Backend Authentication
│
▼
JWT Token
│
▼
Frontend Dashboard
| Platform | Status |
|---|---|
| Codeforces | ✅ |
| LeetCode | ✅ |
| CodeChef | ✅ |
| AtCoder | ✅ |
The frontend communicates with the Spring Boot backend using REST APIs.
GET /api/contests
Returns all upcoming contests.
GET /api/user/profile
PUT /api/user/platforms
PUT /api/user/pause
PUT /api/user/resume
POST /api/sync
All protected endpoints require
Authorization: Bearer <JWT_TOKEN>
Optimized for
- 💻 Desktop
- 💼 Laptop
- 📱 Mobile
- 📟 Tablet
- Vite Fast Refresh
- Lazy Rendering
- Optimized Components
- Smooth Framer Motion Animations
- Minimal Bundle Size
- Fork the repository
git checkout -b feature/my-feature
- Commit your changes
git commit -m "Add awesome feature"
- Push the branch
git push origin feature/my-feature
- Open a Pull Request
Released under the MIT License.
Feel free to use, modify, and distribute this project.
Never miss a coding contest again.
Automatically sync Codeforces, LeetCode, CodeChef, and AtCoder contests directly to your Google Calendar with a beautiful, fast, and modern interface.