pdybowski / healthy-food Goto Github PK

HTML 1.26% CSS 2.60% JavaScript 96.15%

coderscamp coderscamp2021 coderscamp2021-dzial-2

healthy-food's Introduction

Healthy Food App

Healthy Food App is a single page application created with React.

Main functionality of the app is searching for recipes, adding recipes, planning meals as well as generating shopping lists based on the recipe or menu.

Note: due to the issuess realted to the limited number of characters available in db.json file, app version published on github page does not display images. To see full version of the app, please install and display it locally.

Installation
Stack
Features
Authors
Additonal informations

1. Installation

Clone the app:

git clone https://github.com/pdybowski/healthy-food.git

Install packages

npm install

Launch development server (available on localhost:3000)

npm run start:app-with-server

2. Stack

Project is created with:

React 17.0.2 and React packages
Babel 7.16.7
Webpack 5.66.0
Prettier 2.5.1
EsLint 8.6.0
JSON Server 0.17.0
gh-pages - to deploy app on github pages

3. Features

Main page

Navigation and sign-in/sign-up panel
General information about the app
Contact form

Public User Features

searching for recipes and menus
checking recommended recipes and menus
downloading shopping list for recipes and menus

Signed-up User Features

editing users settings
creating, editing and deleting recipes and menus
checking favorite recipes and menus

4. Authors

5. Additional Informations

This project was created during the CodersCamp, 2021/2022 edition. To read more, please check: CodersCamp, CodersCamp Github.

healthy-food's People

Contributors

Stargazers

Watchers

Forkers

jusgladysz altnameforstudying patrycjastarzec tomprzadka

healthy-food's Issues

fix footer position - should be at the very bottom (always)

edit db.json to publish on git hub pages

add new menu page

create a page where user will be able to create w new menu:

sum up:
create carousel with days.
each day should have the ability to create:
title - required
image
day name - dropdown
two dropdowns:

mealType dropdown
recipies dropdown (based on mealType)
"Add new meal" button -> then append new meal
"Add new day" button -> add new day to fill

example

improvements for edit recipe page

user page - settings

add page for user settings:
username
password
email
phone number
name
lastname

404 page

add recipy/menu remove confirmation modal

add modal to confirm removing recipy / menu

add dropdown to recipies to allow user filter by mealType

to recipies - dropdown to filter recipies by mealType

rename menu to meal plan

fix search box

search box throws an error

here:

open menu

add functionality to open menus

some button in each box: "Come and try' or 'Check it out' or 'View'

add logic for 'favouries' filter buttons

user context

add user context

footer shouldnt have that big height

add ability to display shopping list for both for recipy and menu (yellow button)

popup

add / edit menu page

check model from db.json

main page - contact

on the bottom of a page add form with email
add some phone number

add requests to sign up, sign in and sign out

add requests to sign up | sign in | sign out

after sign in and sign up we should save token to Local Storage.

After refresh page we should check if token exists. If so then auto sign in user

After sign out please remove token from LocalStoragee

Fix bug to allow user check favorite recipes

Heart button doesn't work in user recipes page - fix bug.

main page - banner

add something cool to impress people (image/text whatever)

add context to application

add context when page is initialized (JUST CREATE CONTEXT AND WRAP ALL COMPONENTS WITH CONTEXT PROVIDER)

contex can be empty for now

example of how you can use context:
(https://www.loginradius.com/blog/async/react-context-api/)

protected route

read docs

add spinner component

create component with moving circle

add api class

useQuery - dodatkowe

fix loggin in email message

after catching first error you should return that message
conditions are wrong, please check and fix

create custom popup component

create custom popup (you can use bootstrap)

edit profile routing

when user click 'edit profile' then it should change the url

popup - sign in/up/out

add validation to user settings page

when user wants to changes their settings please add validation there

set default one button to popup

If we dont pass any button to the popup we should display Close button by default.

Just modify popup

open recipy

add functionality to open recipies

some button in each box: "Come and try' or 'Check it out' or 'View'

recomeded page - ui

create ui for recomended page. can be similar t the one we have in recipies or menus but...
in the right corner we should display red/pink heart with likes number

dociągnąć kafelki

main page - navigation

recipies | recommended | menu | contact | about

eslint - fix config

install all needed libraries

install bootstrap
install storybook
add eslint
add prettier
babel

prevent main page animation frmmoving when user click 'How it works?' dropdowns (no longer then 1hour)

user page - init

init user page component

ad routes for:
- recipy
- menu
- favourite
- profile (use can click 'fa-edit' and then it opens input that can be changed)

we need to validate if email is an email

user page - recipies list

above table:
Add new

columns:
action | name | tags | time (to prepare) | type (e.g breakfast)

under action show:
pencil | trash

without js logic, just the UI

add example-recipy-model.json with recipy json model
add example-menu-model.json iwht menu model

example:

user page - navigation

recipy | menu | favourite | profile

add new recipy page

create a page where user will be able to create w new recipy:
properties:
title - required
tags
timeToPrepare - required
mealType - required
ingredients - ability to add many ingredients:

title - required
quantity - required
unit - required (dropdown)

description
recipy (probably not in JSON file) - required
image
peopleNumber