# FAC-Tube 📺 --- ## Demo 🔗 https://fac-tube-n1iron2xb-fac-tube.vercel.app/ --- ## 🧩 Process --- ### Last Sprint  --- ### 🗺️ Kanban board  --- ### :spiral_note_pad: This Sprint... 1. Installations 1. Tech Spikes 1. Get more familiar with YouTube API --- ### :spiral_note_pad: ... This Sprint | Video Feed | Material UI | | -------- | -------- | | a. Search<br>b. Sort<br>c. Filter<br>d. Like | a. Decide Colours, Fonts<br>b. Material UI<br>c. Navbar<br>d. Layout<br>e. Video Card | --- ### How we worked - Set Daily Goals - Underplan: allow time for bugs - Switch between Group, Pair, Individual work --- ## Difficulties :dizzy_face: <iframe src="https://giphy.com/embed/hqb6fTvZv0LCheZt1I" width="424" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- ### Material - [ ] Material UI :penguin: 1. new way of styling in css 2. Time consuming 3. CAUSING BUGS :bug: --- ### API - [ ] API 1. Having limited fetching for their API key 2. they are not generous 3. it depends what you call, depending on the weight/credit.(Token) 1. data getting fetched by the search  --- ### SWC - [ ] SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers. SWC is 20x faster than Babel on a single thread and 70x faster on four cores. ---  <iframe src="https://giphy.com/embed/yCkpLXGiSP6KY" width="480" height="180" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> Terminal: Disabled SWC as replacement for Babel because of custom Babel configuration .babelrc --- ### Ad Blocker <iframe src="https://giphy.com/embed/d2YZzTQvyoNYf9YI" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>  --- ### Hide your API key :rolling_on_the_floor_laughing: - [ ] Github Message API :+1: - [ ] .env.local contains our API Key ``` //.env.local NEXT_PUBLIC_YOUTUBE_API_KEY=... // in our files const apiKey = process.env.NEXT_PUBLIC_YOUTUBE_API_KEY; ``` --- ## What worked well  --- ### Deployment on Vercel  --- ### Libraries - React Player 📺 - Lodash 📆 - Material UI 🎨 - React Components 🧩 --- #### React Player 📺 ```jsx= import ReactPlayer from 'react-player/youtube'; <ReactPlayer controls="true" url={`https://www.youtube.com/embed/${video.id.videoId}`} /> ``` --- #### Lodash 📆  --- ```jsx= import { orderBy } from 'lodash'; e.target.value === 'newest' ? (order = 'desc') : (order = 'asc'); const orderedVideos = orderBy( copyVideoData, ['snippet.publishTime'], [order] ); setVideos(orderedVideos); }; ``` --- ## What we learnt 💡 - [x] How to set up a Supabase database and access it using Next.js functions - getServerSideProps - [x] How to query the YouTube API with user generated search term (added to state) and output the data onto the page - [x] How to find and install relevant components from NPM e.g. ReactPlayer --- - [x] How to use Lodash library function to sort videos by publish date - [x] How to bring in pre-made styled components from Material UI - [x] How to set our environment variables for development and production --- ## Next week... To add to the project ➕ user authentification 🔑 likes counter on videos 💖 user video libraries 📺 📚 user profiles 👩🏻‍💻 add testing with Cypress 🌲 database layer with Supabase ⚡️ get more familiar with Material UI 📝 --- Any questions? 🎉 --- ---