The objective of this repo is to build an app based on a "Catalogue of Recipes".
The app is called "gamepedia" which displays a browsable list of videogames that the user can filter, access the details of each one, and can also search for games by title.
The main requirements were:
- The web app should have at least two types of pages:
a. One with a list of items that could be filtered by some parameters.
b. Another for the item details. - It should collect the data from an API from the React application.
- NPM,
- Nodejs,
- Yarn,
- Eslint,
- Stylelint,
- Sass,
- Jest,
- React,
- Redux,
- JavaScript,
- Visual Studio Code
You can try it here.
To get a local copy up and running follow these simple example steps.
Before you continue, be sure that you have installed:
To run the project:
- Clone the repository with Git.
- Open it with your IDE.
- Install the dependencies.
npm install
- Run the app in development mode.
npm run start
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
Instructions from Heroku Buildpack.
-
Generate a react app.
replace $APP_NAME with the name for your unique app.
npx [email protected] $APP_NAME
-
Create the heroku app.
replace $APP_NAME with the name for your unique app.
heroku create $APP_NAME --buildpack mars/create-react-app
-
Deploy.
git push heroku master
-
Visit the app's public URL in your browser.
heroku open
- It displays the most popular games.
- The game's list can be filtered by genre.
- The user can search a game by title.
- When the user clicks on a game, it loads a webpage with the details of the item.
It contains unit tests for:
- Presentational components.
- Containers.
- Action creators.
- Reducers.
- Helpers.
To run the tests.
npm run test
Rossiel Carranza
- Github: @RossielCS
- LinkedIn: Rossiel Carranza
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
- Fork this repository.
- Create a branch: git checkout -b <branch_name>
- Make your changes and commit them: git commit -m '<commit_message>'
- Push to the original branch: git push origin <project_name>/
- Create the pull request.
Give an ⭐️ if you like this project!
This app uses RAWG as a source of the data and/or images.
Design based in NomNom by Marc-Antoine Roy.
This project is MIT licensed.