Graduation Digital Playbill
A responsive full-stack digital playbill website to replace paper programs for the annual graduation show, serving over 500 attendees. Enhancing the traditional program experience.
Project Overview
Being in the Class Representative Committee, I was asked to build a digital playbill website for the graduation show. Built it in a few days using React and with the help of AI.
Features
• Beautiful Interface
Designed with Tailwind CSS for a theme-fitting, responsive layout that works across devices, from mobile phones to desktops.
• Interactive Comments Section
Attendees can upload comments, share thoughts in real-time. Powered by Supabase.
• Cast Photos and Videos
An integrated gallery showcasing cast photos and embedded videos, allowing users to view performer highlights, behind-the-scenes footage, and personal introductions. This feature adds a visual and interactive element, making the playbill more immersive and memorable.
• Event Schedule and Details
A comprehensive display of the graduation schedule, including performer names, performance times, and show summary.
Technical Architecture
Backend
- Supabase: provides a simple SQL database
Frontend
- TypeScript: for static type checking and code organization
- React: for building the user interface
- Tailwind CSS: for easy styling
Lessons Learned
This is the first website that I built for a client, so I'm afraid that I might not have fully met the expectations. However, the experience was incredibly valuable and taught me a key lesson:
Time Management and Planning
Most of the time was not spent building the website, but instead it was spent tweaking with the client. I provided a demo version of the website to the client to see if the styles meets the client's expectation and see if the features are what they want. Communication is crucial to ensure I can use my time effectively and the client gets what they want.
Impact and Results
The website was used by over 500 attendees during the graduation show. By going digital, we were able to save money by replacing hundreds of printed paper programs, making the event more eco-friendly. The comments section became a highlight, with attendees leaving messages of congratulations and encouragement, which added a personal and interactive touch to the event. The school appreciated how easy it was to update the schedule and details without needing to reprint anything.
Conclusion
In conclusion, this is my first time where I actually get to work on a real world project, serving a purpose. I learned how to effectively communicate with someone and work together to achieve the desired and satisfactory outcome. It also gave me the confidence to tackle more complex projects in the future.