DEMO: https://pramodsum.github.io/tacopundit/
API DOCUMENTATION: https://github.com/pramodsum/taco-pundit-api
Javascript ES6 Best Practices/Cheat Sheet: https://github.com/DrkSephy/es6-cheatsheet
React Best Practices:
- https://devhints.io/react
- https://reactcheatsheet.com/
- https://www.freecodecamp.org/news/the-react-cheatsheet-for-2020/
How to use React Hooks: https://blog.logrocket.com/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70/
Make sure you have a github account before starting. Otherwise sign up for free here! https://github.com/
- Click the "Use this template" button in the template repository on Github
- Create a public repository called "tacopundit"
If you have a local development setup that you prefer and already have a propernode.js and git environment, then you can skip this step and simply clone your tacopundit repository locally onto your machine.
Repl.it is an online IDE which allows you to begin developming withouth wasting time setting up a development environment.
- Create a Repl.it account at https://repl.it/signup
- Create a new repl.it instance using the "Import from Github" button in the top right of the window
If this is your first time running the app, run the following command
yarn install
To start the app, run the following commands
yarn dev
- Think about which parts of the page are re-used. What's based on an
ifstatement? See the sample breakdown here
Sample recipe response:
The TacoPundit API is documented here: https://github.com/pramodsum/taco-pundit-api
// GET https://pramodsum.github.io/taco-pundit-api/toppings
[
{
"name": "Mango Avocado Salsa",
"url": "https://raw.github.com/sinker/tacofancy/master/condiments/mango_avocado_salsa.md",
"recipe": "Goes great on soft shell chicken tacos with cheese (or deep-friend wantons with scallops)!\n\n__Ingredients__\n\n* 2 Avocados\n* 2 Mangos\n* 1 Orange\n* 1 Tablespoon Honey\n* Garlic cloves (leave it up to your buds)\n* Pepper\n* 1 Lime\n\n__Directions__\n\n1. Chop avocado and mango into bowl.\n2. Squeeze the lime and half the orange in, add honey.\n3. Add garlic (chopped or pressed) and pepper to taste.\n4. Stir and enjoy!\n\ntags: vegetarian, vegan\n",
"slug": "mango_avocado_salsa",
"uuid": "2f02d742-64eb-11ea-820b-acde48001122"
},
{
"name": "Chipotle Sauce",
"url": "https://raw.github.com/sinker/tacofancy/master/condiments/chipotle_sauce.md",
"recipe": "__Ingredients__\n\n* 1 cup plain Greek yogurt\n* Juice from 2 limes\n* 2-3 chipotl\u00e9 peppers, with surrounding adobo sauce from can\n\n__Directions__\n\n1. Drop all of this into a food processor, and blend away.\n2. Let sit in fridge for 30 minutes or overnight for flavor melding. \n3. Add to tacos, and anything else you'd like.\n\ntags: vegetarian\n",
"slug": "chipotle_sauce",
"uuid": "2f02e476-64eb-11ea-820b-acde48001122"
},
{
"name": "Phoning it in Pico de Gallo",
"url": "https://raw.github.com/sinker/tacofancy/master/condiments/Pico_de_gallo.md",
"recipe": "_Super Quick & Easy Pico_\n\n\n* 1 pint grape tomatoes, quartered (make your kids do this part)\n* 3 tablespoons finely chopped white onion\n* Coarse salt\n* Squeeze of lime\n* As many finely chopped red (or green) jalape\u00f1os as you want (optional)\n\nCombine the tomatoes, cilantro and onion together in a bowl. Season to taste with salt and lime.\n\nReserve some of this mixture for kids, and then add as much jalape\u00f1o as you like to the remaining mixture for the non wimps.\n\ntags: vegetarian, vegan\n",
"slug": "phoning_it_in_pico_de_gallo",
"uuid": "2f02f222-64eb-11ea-820b-acde48001122"
},
....
]
The page should look like the following:
Sample recipe response:
// GET https://pramodsum.github.io/taco-pundit-api/toppings/mango_avocado_salsa.json
{
"name": "Mango Avocado Salsa",
"url": "https://raw.github.com/sinker/tacofancy/master/condiments/mango_avocado_salsa.md",
"recipe": "Goes great on soft shell chicken tacos with cheese (or deep-friend wantons with scallops)!\n\n__Ingredients__\n\n* 2 Avocados\n* 2 Mangos\n* 1 Orange\n* 1 Tablespoon Honey\n* Garlic cloves (leave it up to your buds)\n* Pepper\n* 1 Lime\n\n__Directions__\n\n1. Chop avocado and mango into bowl.\n2. Squeeze the lime and half the orange in, add honey.\n3. Add garlic (chopped or pressed) and pepper to taste.\n4. Stir and enjoy!\n\ntags: vegetarian, vegan\n",
"slug": "mango_avocado_salsa",
"uuid": "2f02d742-64eb-11ea-820b-acde48001122"
}
Take a look at the Material UI documentation to find components that you can use.
You should be able to access a topping's recipe at tacopundit/toppings/{TOPPING_SLUG} or as an example https://pramodsum.github.io/tacopundit/toppings/mango_avocado_salsa
React Router DOM Documentation
They should be able to leave stars, their name, and the actual content of their review.
Take a look at the Material UI documentation to find components that you can use.
We want to display the reviews in a way that shows all the information they've entered in, ordered by when they were left. The most recent review should be at the top of your list.
Take a look at Material UI's tables for how you would represent the reviews.
For connection to a simple database, let's set up Firebase. You can create an account and set up a Real-Time Database for free, which you can then connect to your web app via environment variables. Follow the setup instructions.
-
Saving reviews to the database
When a user clicks the submit button for a review, the data should get saved to the database under the reviews table. See the firebase docs for the proper way to write data into your database.
-
Pulling reviews from the database
Once a user loads the page for a recipe, we should pull all the reviews for the recipe by the recipe name and display them in our reviews table. Use the link above to see how to read data from the database.
Preferably test as you go. Create a review, check in Firebase that it exists. Click back and re-enter the page - your review should still be there.
Update the following line in your package.json to use your github username
"homepage": "http://{GITHUB_USERNAME}.github.io/tacopundit",
Then run:
yarn deploy
This will deploy your app to your github pages!
The url will likely be https://{GITHUB_USERNAME}.github.io/tacopundit
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.