Updates

[Joe-Lindie]

07/11/2022

Team 1: Abby / Joe
Create nav bar
Use dummy data
Render to homepage

Team 2: Lisa / Paz

Fetch homepage data from API
render data to page

Team 1

Continue rendering veg of the month homepage
Start with seasonal calendar page

Team 2

Start on the Recipes page

Accomplishments

1. Fetched fruits API and render to homepage
2. Created Navbar
3. Created basic file structure
4. Added responsive styling
5. Fetched the recipes API
6. Randomised the vag/ then grabbed recipes

Blocks

1. Cannot render random recipes to the homepage

Where to begin tomorrow?

1. • Close issues / kanban board
2. • One team to continue working on random recipes
3. • One team to start the seasonal calendar page

08/11/2022

Accomplishments

1. Created tabs for seasonal calendar
2. Filtered by month
3. Managed to get food from API
4. Filter recipes by monthly veg

Blocks

1. Displaying images/names for months (maybe pass as props)
2. File too large to render
3. reach the limit of API calls for the day

Things to do tomorrow

1. Send a message to mentors (about recipes API)
2. Close issues/update the Kanban board
3. One pull request

Team 1

1. Extract components from the seasonal calendar

Team 2

1. Start individual vegetable page

09/11/2022

Accomplishments

Finished the seasonal calendar page
Extract vegetable information component
Completed the recipes data

Blocks

Render recipes to page

Things to do tomorrow

1. Deploy site

Questions for mentors?

• 20-minute meet @ 15:00

1. Is there any way we can call the API once and save/reuse the data? (Is the SWR package something we can use?) (Abby)

---

3. Can we use useContext() to store the veg names of the month? (Paz)
4. How does getStaticProps() work? (Lisa)
5. Need some insight regarding deployment - Vercel has lots of errors.

Team 1

• Deploy site!
• Start working on the individual veg page (creating dynamic routes)

Team 2

• Render recipes to the Recipes Page
• Extract as component
• Use components wherever needed

10/11/2022

Accomplishments

• Deployed site
• Rendered recipes to page
• extracted recipe component

Blocks

Things to do tomorrow

Team 1

• Respond to issues

Team 2

14/11/2022

Accomplishments

1. Error handling for APIs
2. Accessibility (lighthouse)
3. Rendered nutrition onto the individual page

Blocks

1. PR request/deployment
2. Rendering name/image to page

Things to do tomorrow

Team 1

1. Look into/start tests

Team 2

1. Solve blockers

17/11/2022

Accomplishments

1. Error handling
2. Debugging test
3. new tests
4. CSS styling
5. cleaned up code
6. hide API keys .env files

Blocks

1. Error handling - Not catching correctly

Tomorrow

1. Readme

[lisahns]

Mentor meeting 10/11

• no need for useContext for a variable, because it makes the app slow -> only use that to pass logic, not just value

• other options:

  • useState()
  • or use new Date() on every page

• call loadVeg in global context, rather than every page

• react query - library - whenever you render state or component it doesnt re-fetch

• swr caches data

https://swr.vercel.app/docs/advanced/cache
https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/

maybe recipe card on homgepage uses too much data for now???
focus on vegetable page for functionality???

• vegetables in useState()

• not sure about getStaticProps(), maybe serverSideProps?

• chaining response

• error hanlding with asnyc function

https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/
https://tanstack.com/query/v4/docs/overview

[lisahns]

SWR:
We highly recommend it if you’re fetching data on the client side. It handles caching, revalidation, focus tracking, refetching on interval, and more.
SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

• Fast, lightweight and reusable data fetching
• Built-in cache and request deduplication

getStaticProps:
getStaticProps: It’s an async function that we export from the page component, used to generate data on the build time. It fetches the data and generates the HTML pages on our server and it caches it. So when we navigate to this page on our client-side, the cached HTML page is served directly to us, which is very useful for search engine optimization (SEO).

[lisahns]

Sprint Review & planning for next week:

2 options:

• better understanding of api and getstaticprops
  options: re-validate, getServerSideProps

• stretch goal: RESEARCH
  authentication: login/signup
  Library?

• individual vegetable page

• refactoring

• accessibility

-take out usecontext?

Monday:

Team 1:

• recipe api and caching
• check images on vercel

Team 2:

• individual vegetable page
• accessibility (nav, tabs, etc)
• organise variables, (new Date, globalcontext, maybe make veggies of the month available for all pages?)

[Abbbyccc]

15th Nov
what we achieved today

• render images to the individual page
• fix deployment- getServerSideProps

What we want to do tomorrow-
-testing
-render recipe pages to other pages
-solve data fetch issue-caching Maybe?

Paz-
Styling

[lisahns]

16/11

Accomplishments:

• set up cypress
• tested navbar (2-3)
• tested api endpoint(2-3)
• update readme
• implement searchbar on recipe page
• redirect to recipes page according to search

Blocks
nothing

What we do tomorrow

• respond to issues
• refactor the way we call recipes

[Abbbyccc]

• API
  • create .env (API keys)
  • make sure API keys we are using have enough limits
  • .env file with deployment (Vercel)

-QA-tidy up the code

• useContext (not sure if we are still using it)
• refractor? (variable name..)
• error handling
• recipe images not loading (maybe look into fallback)

-Few more tests

• CSS
  • Home page title maybe show "Vegetable for the month"
  • logo?

-README

How our data render on the page now
-Home page- getStaticProps- render at build time refresh every week now
-Individual veg page - getServersideProps- render everything people click the page
-recipe page- getStaticProps- render at build time refresh every week now
-recipe search result page- getServersideProps- render everything people click the page