A modern IPL dashboard built with Next.js, Tailwind CSS, Recharts, and SWR.
It shows:
- Live match details with notifications
- Points table with real-time updates
- Match schedule
- Interactive charts of team performance
- Dark mode and responsive design
👉 Live site: https://ipl-dashboard-inky-six.vercel.app/
✅ Live match data auto-refresh every 30s
✅ Native and in-app notifications for:
- Match start
- Toss result
- Score updates
- Milestones
✅ Dark Mode Toggle
✅ Notification Drawer with unread counts
✅ Fully Responsive UI
✅ Historical charts for points progression
✅ Smooth transitions between light/dark
✅ Caching with SWR
/components
Navbar.tsx
MatchCard.tsx
PointsTable.tsx
ScheduleList.tsx
NotificationBell.tsx
DarkModeToggle.tsx
Loader.tsx
/lib
dummyData.ts
utils.ts
/pages
index.tsx # Home page (live match + points table)
schedule.tsx # Schedule page
history.tsx # Historical charts
api/scrape.ts # Server API to fetch & transform data
/types
Match.ts
PointsTableEntry.ts
ScheduleEntry.ts
HistoryPoint.ts
1️⃣ Clone the repo
git clone https://github.com/hraj6056/ipl-dashboard.git
cd ipl-dashboard2️⃣ Install dependencies
npm install3️⃣ Run the development server
npm run devOpen http://localhost:3000 to see the dashboard.
- Wait ~30s to see the data auto-refresh.
- If notifications are enabled, you’ll see them pop up.
- Use the toggle in the navbar.
- Verify smooth transitions and correct colors.
- Grant notification permissions.
- Check bell icon badge count.
- Open the drawer to see notification history.
-
Scroll below points table to view points progression.
-
Observe the lines for each team evolving over matches.
npm run dev– Start dev servernpm run build– Build for productionnpm start– Run production server
- Next.js 14
- Tailwind CSS
- SWR (caching + revalidation)
- Recharts (data visualization)
MIT