---
title: FACTube Build 2 by Anna, Mohamed, Danilo and Barbara
tags: presentation
slideOptions:
transition: 'fade'
# parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'
---
# 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** → user research → prototype → user test → MVP → **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>
Google Drive
Gist
Clipboard
Sign in with Wallet
