TrackEd

Videos

Description

Progress During Hackathon

Day 1: Initial Setup and Early Challenges The project began with the creation of a Next.js application using TypeScript and Tailwind CSS for styling. The initial focus was on setting up the basic structure, including a navigation bar, course card layout, and footer. Authentication was implemented using NextAuth.js with Google OAuth, allowing users to sign in seamlessly. However, several challenges emerged during this phase. The OpenAI API initially chosen for AI-powered features proved problematic due to rate limits and inconsistent response formatting, prompting a switch to the Gemini API, which offered better documentation and a more straightforward integration. The YouTube API also caused issues, primarily due to quota restrictions and CORS errors, which were resolved by handling requests through Next.js server-side API routes. Additionally, the gallery section faced layout problems, with divs misaligning or overflowing. This was fixed by refining the Tailwind CSS grid utilities and applying custom breakpoints for a responsive design. Day 2: UI Refinements and MVP Completion The second day focused on enhancing the user interface and stabilizing the core functionalities. The UI was significantly improved with the addition of a dark/light theme toggle, achieved using either next-themes or a custom Context API solution, ensuring a consistent and user-friendly experience across different preferences. Responsive design was further polished with mobile-first Tailwind classes, ensuring the app looked great on all devices. The Gemini API integration was completed successfully, replacing OpenAI entirely and providing reliable AI-generated course recommendations. The YouTube API issues were fully resolved, with video embeds now working smoothly thanks to server-side fetching and response caching. By the end of the day, the minimum viable product (MVP) was finalized, featuring user authentication via Google OAuth, a functional course gallery with search and filtering capabilities, and a test-ready Stripe payment flow. Next Steps and Future Goals With the MVP now stable, the next phase of development will focus on backend enhancements, such as tracking user progress within courses and implementing Stripe webhooks for subscription management. UI/UX improvements, including loading skeletons for API-heavy sections and smoother theme transitions, are also planned. Additional features like an admin dashboard for course creation and a user review system will further enrich the platform, making it more interactive and comprehensive.

Tech Stack