halyngoc / recipedia Goto Github PK

Favorites should be stored in local storage. Use a context to pass down to components.

Most notable when there are no favorites on desktop

Add some css :hover state to buttons

Same as browse page (see #8) but shows favorited recipes. Search button optional.

Search page.

Transitions between pages and buttons/icons animations

axe said the orange color in the theme doesn't have enough contrast with the background color.

Should review all the colors too while I'm at it

Charts:

• Random recipes by category (vegan, vegetarian, etc)
• Favorited recipes by category
• Favorited recipes by nutrition value percentage (not doing cause you'll have to make a request for every recipe)

Stats:

• Random recipes avg prep time
• Favorited recipes avg prep time
• Random recipes avg ww points
• Favorited recipes avg ww points

Responsiveness:

• Mobile: two rows horizontal scroll
• Tablet and bigger: two columns, all visible

The main area contains:

• Greeting depending on time of day (good morning, good afternoon, good evening)
• Hero banner with current date and time
• Greeting has user name (will be a props)
• Browse recipes button that takes you to the browse page (see #8)
• See my favorites button that takes you to the favorites page (see #9)
• Charts (see #5)

Responsiveness: maximum width at device breakpoints

The main area (yellow background) is too narrow and looks weird

Save recipes into session storage to save api calls.

Browse an arbitrary number of recipes according to some search query (if any). Contains logo, search button, current query, and matched recipes.

Clicking on logo takes you back to dashboard.

Sidebar contains 2 tabs: discover which shows latest (or random) recipes, and favorites, which shows recipes marked as favorites. The list of favorite recipes will be passed in as props. Each tab holds a maximum of 5 recipes.

Responsiveness:

• Mobile & tablet: tabs are horizontal carousels, both visible
• Laptop: tabs are vertical on the right of screen, with a button to flip between tabs
• Desktop: tabs are vertical on the right of screen, both visible

Functionality:

• Clicking on a recipe card views the recipe in detail
• Clicking on the discover action buttons takes you to the browse page
• Clicking on the favorites action buttons takes you to the favorites page