"Eats, Shoots & Leaves" is my capstone project for Microverse's React & Redux module. The website is a filterable index of vegan recipes provided by the Edamam Recipe Search API.
The website consists of two pages:
-
The main page, where the user may view images and titles for all the recipes and apply filters to the list of recipes shown.
-
The recipe page, which can be accessed by clicking on any of the recipe tiles on the main page. Here, the user can view more details about the recipe and follow a link to the original recipe's website.
To jump right into the project, visit the Live Demo, deployed on Heroku.
- React - Bootstrapped using the create-react-app package.
- Redux - Redux is used for storing state. The
react-reduxpackage was used to enable React bindings for Redux. - React Router - the
react-router-dompackage was used to allow navigation between pages. - Bootstrap and Font Awesome were both used, via their npm packages.
- Kent Dodds' Testing Library - the
/jest-domand/reactAPIs were used for testing, on top of Jest, which iscreate-react-app's default testing suite. - ESLint and Stylelint for linting JavaScript and CSS respectively.
node.js is a pre-requisite of this project.
Don't have node.js? Choose a download method here.
-
Open a Terminal and navigate to the location in your system where you would like to download the project. New to Terminal? Learn here.
-
Enter the following line of code to clone this repository:
git clone git@github.com:Joseph-Burke/Eats-Shoots-Leaves.git
-
Now that the repository has been cloned, navigate inside it using
cd Eats-Shoots-Leaves. -
The project's dependencies are managed by npm. The details of this project's dependencies can be found in
package.json. To install them, enter the following line of code in the Terminal.
npm install
-
The project is now fully installed. The only thing left to do is set up your personal Edamam Recipe Search API credentials as environment variables. To do that, follow this link and hit that "Start Now" button in the 'Developer' column.
-
Complete the form that appears and submit it. Make sure that the "Developer" option under "Recipe Search API" is selected in the "Choose your plan" dropdown.
-
Having signed up, you will now be able to log in to the Edamam website. Navigate to the Dashboard using the button in the top right of the window. Then, hit the "Applications" tab. From there, press the "Create New Application" button and choose the "Recipe Search API" option. You can then enter a name and a description for the application; you may wish to enter "Eats, Shoots and Leaves" as a name.
-
You will immediately receive an e-mail to confirm that your application has been created. On the Dashboard's "Applications" tab, your newly created app will be there. Hit the view button and you will be able to see the details of your app. The two important pieces of information are the Application ID and the Application Keys.
-
The only thing that remains is to create a file in the root directory of the project called
.env. Enter the two variables in the.envfile as seen in the screenshot:
-
You're ready to go! Your personal API credentials are now available inside
process.envand will be used in the project's calls to the API - the Developer plan allows up to 5 calls per minute. -
Start the project with the
npm startcommand.
To run tests, simply enter the npm test command in the terminal. This will begin create-react-app's built-in testing script, which will watch for changes and run tests automatically.
If you're interested in writing further tests for this project, refer to the documentation for Jest and Testing Library.
👤 Joe Burke
- Github: @Joseph-Burke
- Twitter: @__joeburke
- Linkedin: Joseph Burke
Contributions, issues and feature requests are always welcome!
Drop me a line through any of the channels listed above or head directly to the issues page.
Hey! Give this project a ⭐️! It costs nothing :)
- This project was built as part of the Microverse Web Development course, which you can learn more about here.
This project is MIT licensed.