This is a submission for the GitHub Finish-Up-A-Thon Challenge
This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
StylesByShahid is an AI-powered presentation creation platform designed to make building modern presentations faster, smarter, and more collaborative.
The project originally started as an experimental frontend prototype during my learning journey in full-stack development. Over time, it evolved into a larger vision involving AI-assisted presentation generation, authentication, real-time collaboration, and scalable backend architecture.
Using JavaScript, Node.js, Express, MongoDB, and GitHub Copilot, I revived the project and transformed it into a more complete and production-ready platform.
Key Features
- AI-powered presentation workflow
- Modern glassmorphism UI
- JWT authentication system
- Real-time collaboration using Socket.io
- File uploads for multimedia presentations
- Responsive design for desktop and mobile
- MongoDB-powered backend architecture
Demo
GitHub Repository
https://github.com/SHAHID-glitch/StylesByShahid
Live Demo
https://shahidmalik786-stylesbyshahid.hf.space/#
Screenshots / Video Walkthrough
Before - the backend was incomplete and non-functional. User registration and login requests were not being processed correctly, making authentication unusable.
The application could not register new users, lacked database integration, and could not generate presentations using AI. Users were limited to static demo presentations.
Dashboard – The original version did not include a dashboard for managing presentations or user activity.
After - I fixed and completed the backend, enabling secure user registration, login, and authentication workflows.
AI Integration – I integrated Groq AI APIs to generate presentation content dynamically, transforming the platform from a static demo into an AI-assisted presentation builder.
Dashboard - I added a dedicated dashboard to improve navigation, presentation management, and the overall user experience.
Database Integration – I connected the platform to MongoDB, enabling persistent user accounts, presentation storage, and application data management.
GitHub Copilot in Action – GitHub Copilot assisted with backend development, API implementation, debugging, and code refactoring throughout the project revival process.
Video - https://player.mux.com/YMmB00CfqgOW2REobfWgAaNqNo4GSyzf01r3zG2gy00VSY
The Comeback Story
This project started as an unfinished idea that had strong potential but lacked polish, structure, and completion.
Originally, the platform only had:
- basic frontend screens
- incomplete backend integration
- unfinished deployment setup
- missing authentication flows
- limited usability
For this challenge, I decided to revisit the project and properly finish what I started.
What I Improved
- Refactored the project structure for better scalability
- Improved backend API organization
- Added deployment support with Docker and Hugging Face Spaces
- Enhanced UI responsiveness and animations
- Improved authentication and security handling
- Cleaned up project architecture and documentation
- Optimized the overall developer experience
The biggest transformation was shifting the project from an experimental prototype into a more realistic full-stack AI presentation platform.
My Experience with GitHub Copilot
GitHub Copilot played a major role throughout the revival process.
It helped me:
- refactor repetitive backend logic
- generate API boilerplate faster
- debug integration issues
- improve documentation
- speed up frontend styling iterations
- experiment with new implementation ideas
One of the most useful aspects was using Copilot as a collaborative coding assistant while rebuilding unfinished parts of the application.
Instead of spending hours searching for syntax or boilerplate patterns, I could focus more on product improvements and architecture decisions.
Tech Stack
- Frontend: HTML, CSS, JavaScript
- Backend: Node.js, Express.js
- Database: MongoDB
- Authentication: JWT
- Real-time Communication: Socket.io
- Deployment: Docker, Hugging Face Spaces
Project Impact
During this revival, I:
- Completed the backend authentication system
- Added MongoDB database integration
- Integrated Groq AI for presentation generation
- Added a dedicated dashboard
- Improved deployment using Docker and Hugging Face Spaces
- Refactored and organized the project structure
Final Thoughts
This challenge gave me the motivation to revisit an unfinished project and turn it into something much closer to the original vision I had in mind.
There’s still room to grow, but bringing this project back to life taught me an important lesson: unfinished projects still hold potential if you’re willing to return and improve them.
Top comments (0)