# FAC-Tube 📺 --- ### FAC-Tube 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 Anna (QA) Danilo (DevOps) Mohamed(UX) Barbara (Scrum) 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 ⚡️ --- ### Demo 👀 https://fac-tube.vercel.app/ --- ### :strawberry: Sprints #### Sprint planning :runner: Labels: "Chores", "Feature", "E2", "Week 1", "Core", "Stretch"  --- #### :strawberry: Habits ✅ Daily stand ups ✅ Frequent merge and code review ✅ Swapping over work on challenging areas and sharing knowedge ✅ Asking questions - of mentors and in Help and Solutions --- #### Design Sprint 🎨 (A) ###### Wireframing and protoypes Mobile:  --- Desktop:  --- #### :strawberry: Build Sprint 1 🧱 - Setting up Next.js with initial Vercel deployment - YouTube API search feature 🔎 - Like button component 💖 --- #### :strawberry: 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 & unlike a video which increments the likes counter and is stored against their user id --- ### Deployment 🛠 (D) --- #### ***Project set up*** **Create a project** * Go to app.supabase.io. * Click on "New Project". * Enter your project details. * Wait for the new database to launch. --- **Set up the database schema**  ---  --- **Development/Production environment**  --- **Environmental variables**  --- #### Material UI (A)  --- - A library of pre-built UI components - Components can be customised using themes or the makeStyles() hook - Based on the Material Design system by Google - Useful for creating consistent UIs across large apps. Common UI elements - buttons, text input etc look good out of the box 📦 --- ### Bugs 🐛 (D) Lots of bugs! - 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 --- ### :strawberry: Accessing Supabase ```javascript= const likeChecker = async (video_id, user_id) => { let { data, error } = await supabase .from('likes') .select() .eq(`video_id`, `${video_id}`) .eq(`user_id`, `${user_id}`); } ``` --- This comes back as a Promise :arrow_right: How access Promise value? --- #### :strawberry: 1. `getServerSideProps` - can't access localStorrage, SessionStorge ```javascript= export async function getServerSideProps() { let { data: videos, error: videosError } = await supabase .from('videos') .select(); return { props: { databaseVideos: videos, dataError: videosError, // userId: user_id, },};} ``` --- #### 2. :strawberry: `useEffect` in Component ```javascript= const [like, setLike] = useState(); useEffect(() => { likeChecker(video_id, user_id) .then(response => response.json()) .then(data => setLike(data)); }, []); ``` --- ### TESTING (M) <iframe src="https://giphy.com/embed/xT0xeps3jsB0Y8XRPG" width="280" height="260" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> - [ ] vercel not liking cypress - [ ] make sure to commit - [ ] supabase authentication issues, not having access to the token within cypress --- ### creating an account [Fake Email Website](https://temp-mail.org/en/) ``` javascript describe('login', () => { it('page', () => { ///id="email-input" cy.visit('/login'); cy.get('#email-input') .type('nacero7373@luxiu2.com') .get('[type=submit]') .click(); }); }); ``` --- ### MVP - Most valuable player :man-playing-handball: * Home page  --- ## Search  --- ## profile  --- #### NAV  --- ### like feature  --- ### :strawberry: 📚 What we learned... 📌 **Problem** &rarr; user research &rarr; prototype &rarr; user test &rarr; MVP &rarr; **2 Build Sprints** 📌 Supabase & Next.js interaction: database, authentication, accessing Promise 📌 Use YouTube API: search & access specific videos 📺 📌 Generally: be careful with your API key! :heavy_dollar_sign: :oncoming_police_car: --- ### :strawberry: ...What we learned 📚 📌 NPM packages e.g. ReactPlayer 🧩 📌 Material UI for CSS 📌 Different UIs for logged-in and anonymous 👩🏻‍💻 📌 Learning a new framework takes time :alarm_clock: --- #### Future improvements <iframe src="https://giphy.com/embed/WrrydbG4pWoURRcDV9" width="350" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- 📌 A user should be able to apply tags to a video depending on topic, video features etc 📌 A user should be able to see who has liked a video 📌 Users should be able to view each other's profiles 📌 A user should be able to add a video to their library with just a YouTube url 📌 More resuable code/components --- 📌 supabase using discord or google login feature.  --- ### Thanks for listening! Any Questions? <iframe src="https://giphy.com/embed/xUOwFSvvXbyYKzb9Ac" width="480" height="264" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>