fac22 / factube Goto Github PK

Investigate YouTube API and Material UI library and how to use them in our project

Relates to #8

• fetch
• embed on page

...it is not always working. Sometimes, I get an error about foreign key constraint 🤔

How come you aren't using SWC as your compiler? (Next says it is better)

Was there something that didn't work with SWC?

• Install dependencies
• Follow steps for Next.js installation
• ESLint, Prettier
• Install Cypress
• Initialise Supabase
• Hosting on Vercel
• Try database: create a dummy table

https://romansorin.com/blog/setting-up-supabase-with-nextjs-and-vercel
https://learn.foundersandcoders.com/course/syllabus/apprenticeship/full-stack-app/project/

Research and report back to the group:

• Video embed with React: https://hackmd.io/o9zRHQ3YQ569vZCDNAGK4A
• Learn Material UI: https://mui.com/
• Supabase: https://hackmd.io/HLijrV8LR1urdIZZRcPM5g?edit
• Learn youtube API:
  • What it could do:
    

Closes #3

A README on your repo can introduce the project and give an idea of what you built and how you built it.

Draft your README early and continuing to update it throughout your project. This will save you time later on, and help make sure you don't forget anything! 🐘

The apprenticeship assessment focuses on documenting projects with this structure. Following this for your in-house and Tech for Better projects will give you a good understanding of how to write project documentation.

Nice progress for the first week! ✨ 🎉 Here are a few things I noticed:

• You're doing React.useState here quite a few times. Neater to import { useState } from 'react'.
• Prefer arrow functions as React components eg. const Search = () => {}
• you need an Id the same as the for attribute on this input to correctly associate the label
• I don't think it effects functionality but getServerSideProps, getStaticProps etc. are normally used at the bottom of the file.
• Can your api url be an env var?
• Try and be consistent with components - if you're using Material UI containers - stick to it, unless there is a reason it doesn't work for you in a particular context

I've tried not comment on the bits it looks like you're not using atm.

The menu drawer is 😙👌

Would be good to have a confirmation message that let you know that your profile has been saved successfully

I love your project board with all your user stories! Great use of labels 👌

On the homepage, it's not clear what the default sort is and you can't go back to it when you apply the liked filter

• get all my liked videos

I really like how when you paste a pic url it immediately is displayed as your profile pic

For the MVP the likes will be stored in state only - potential to add video database later

Love the clean design and how each video is presented in its own card with the like button ❤️

• Colour palette: https://material.io/resources/color/#!/?view.left=0&view.right=1&primary.color=1061e4&secondary.color=fff
• Fonts: Montserrat, Roboto

It's amazing how many features you've managed to add. hard work ✌️✌️✌️

You've got this identical bit of code for handling Supabase auth sessions in quite a few pages. Since it's likely that every page needs to know if you're logged in or not, you could put this into pages/_app.js. This components sits "above" all other pages, so any code in here will run for every page. You could then pass the session down as a prop to the pages:

// pages/_app.js

function MyApp({ Component, pageProps }) {
  const [session, setSession] = useState(null);
  useEffect(() => {
    setSession(supabase.auth.session());
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  }, []);
  return (
    <Layout>
      <Component {...pageProps} session={session} />
    </Layout>
  );
}

• Material UI
  • Nav
  • Page Layout: mobile, desktop
  • Video card

https://docs.github.com/en/actions/automating-builds-and-tests/about-continuous-integration

• Figure out Supabase authentication
• Does it need to store users in a database?

I'm curious about the Catalogue component that doesn't get used anywhere. What is it? What was it? What was happening with this line?

// loadCatalogue(); Bad!!! Maxxes out API key

• Cannot read properties of null (reading 'id')
• Invalid input syntax for type uuid: "0"

I had to google what a video id was and where I might find it, might be good to include some examples to show what people need to put in