Table of Contents
In June, I deployed a hobby project to track my Extra Life team progress. I’ve been a part of the Extra Life movement since 2015 and a member of the Extra Lifers 24/7 team since 2017. Even though I haven’t been as active as I’d like to be these past two years, I’ve been working on this hobby project on and off for a while and decided to deploy it.
Although the Extra Life website has information about the team, the amount raised and each team member, I thought: Why not create a branded dashboard that we can customize and show the information that we want?.
One thing that the EL website doesn’t show in it’s own section is a Recent Donations tab. This is especially useful when there are events going on where you can see donations that have been coming in for the team all in one place. This, along with the preference of having a central hub catered to our team, I went ahead with developing it. I’m sure it may require more iterations in the future, but I believe this first version servers the main purpose.
Project: https://el247.codeshelf.dev
Summary and Key Features
The Extra Lifers 24/7 Team Progress Dashboard is a web application for the Extra Lifers 24/7 gaming team that participates in Extra Life events. This web app displays real time team statistics, member profiles and recent donations for the Children’s Foundation of Puerto Rico.
Key Features
- 🏆 Team Overview - Real-time fundraising progress, goals, and statistics
- 👥 Member Directory - Searchable and sortable team member profiles with streaming info
- 💰 Recent Donations - Live donation feed with donor messages and recipient tracking
- 📱 Responsive Design - Mobile-friendly interface
- 🎮 Streaming Integration - Links to members’ Twitch, YouTube, and Facebook streams
- 🔍 Advanced Filtering - Search members by name, sort by various criteria
- 📊 Pagination - Data display with customizable page sizes
Purpose
This dashboard serves as a central hub for the Extra Lifers 24/7 team to:
- Track fundraising progress in real-time
- Showcase team members and their streaming activities
- Display recent donations and donor appreciation
- Provide easy access to donation links and Extra Life profiles
- Support the team’s charitable mission for the Children’s Foundation of Puerto Rico
Where do I get the data?
All the data for participants donations, goals and progress is gathered from the DonorDrive API.
API Endpoints Used
- Team Information: GET /api/teams/{teamId}
- Team Members: GET /api/teams/{teamId}/participants
- Individual Participant Details: GET /api/teams/{teamId}/participants
- Team Donations: GET /api/teams/{teamId}/donations
Tech Stack
Front-end
- Next.js 14 - React framework with server-side rendering
- React 18 - Component-based UI library
- TypeScript - Type-safe JavaScript
Styling & UI
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - Modern React component library
- Radix UI - Open source component library
- Lucide React - Icon library
State Management & Data
- Custom API Routes - Next.js API routes for server-side data fetching
What’s next?
I’m thinking of new additions to include in the web app. I’m also considering creating a widget that can be embedded in streams that is branded to our team.