Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/VeroMoreno/mealplan-front
Sort your meals in this - React.js - meal calendar
https://github.com/VeroMoreno/mealplan-front
hooks javascript meals react recipes
Last synced: 10 days ago
JSON representation
Sort your meals in this - React.js - meal calendar
- Host: GitHub
- URL: https://github.com/VeroMoreno/mealplan-front
- Owner: VeroMoreno
- Created: 2020-10-23T19:56:22.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-01T02:18:01.000Z (almost 3 years ago)
- Last Synced: 2024-08-02T02:15:43.323Z (3 months ago)
- Topics: hooks, javascript, meals, react, recipes
- Language: JavaScript
- Homepage: https://veromoreno.github.io/mealplan-front/
- Size: 35.6 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
FYI at the end
# π± Mealplan!
Javascript-based application that randomly displays a menu of meals (own recipes) from Monday to Friday
You can use the draggable to change the position of the cards.
You can also see in the chart the nutritional information by day and week.
Meals are only organized into lunch and dinner, differentiating that there are some foods that cannot be included at dinner.
Check your food list by clicking on "check list" button.### Feature
Developed with β‘οΈ React Hooks [ useState, useEffect, useContext, useRef ]
* Functional components (State-less Functions)
* Context API### Technologies
* β¨ Node.js
* π£ React
* π πΎ Styled Components### Funcionality
* Show meal list clicking at "check list" button
* Sorts meals randomly clicking at "Random" button
* Drag & drop meals
* Nutrient charts (By day and by week)### Dependencies
* chart.js
* react-chartjs-2
* react-beautiful-dnd
* styled-components### How to
NPX, to install packages that react needs
```shell
npm install -g npx (test version: npx -v)
```Later of have **node** & **npm** installed execute `npx create-react-app nameOfProjectWithouthComillas`
To verify that the package has been installed successfully, run in the console: `create-react-app` and wait for a successful installation message.
Lets see!: `npm start`
### To be continue...
* Window.localStorage
* backend* Fyi
Ahora mismo el proyecto estΓ‘ preparado para funcionar apuntando a la api mealplan-back,
por este motivo no voy a hacer la build para github pages.En todo caso, ahora cuando intento obtener la info de menuData.json no funciona.
Ya que de algun modo la manera en la que se ha formado el json es distinta en bbdd que
en el propio json "a pelo". Revisar.