πΊ
FAC-Tube The Product
FAC-Tube is a website where members of the FAC community (applicants, current cohorts, alumni) can easily find and recommend useful coding YouTube videos.
Our Team
Many thanks to our project & role mentors, the FAC team and our code reviewers
π₯
Tech Stack - Miro & Figma for Wireframing
π¨ - Material UI for CSS components
π - Next.js with React.js for front-end & back-end
π - Supabase for our Postgres database & Authentication
π - Cypress for Testing
π² - Vercel for Deployment
β‘οΈ
To view this project
See our deployed version on Vercel here
- Run the code locally
Clone the repo
cd
into the folder and run
NPM install
then
NPM run dev
π
What we learnt getServerSideProps()
Wireframing & Prototype
Our wireframes in Figma
Our MVP
Our MVP is based on the features our user research had identified as the most important
It has a home page with a community video library that is sortable by most liked
a user can search YouTube
a user can view and update their profile
a user can add a video to their library
a user can view their added videos in their library
a user can like a video
π°
Future improvements Challenges
-
Learning new technologies
π -
Length of project
π -
Understanding the scope of the project - what was possible and what not to build
πββοΈ
Sprint planning Our Kanban board with time estimations and labels based on issue type and priority
π§±
Build Sprint 1 - Setting up Next.js with initial Vercel deployment
- YouTube API search feature
π - Like button component
π
𧱠π§±
Build Sprint 2 - User login/sign out and authentification
- CSS with Material UI
- User can view and update their profile
- User can view their library and add a video to the library
- User can like a video which increments the likes counter and is stored against their user id
π
Bugs Lots of bugs!
- Fetching from a Supabase database using async functions was tricky to render on the page using React
- Customising Materials UI was harder than expected
- Our YouTube API key often maxxed out
- Vercel sometimes gave us errors in deployment that were not apparent in development