Merge pull request #1 from Ralph-1/catalogue

Catalogue

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+      "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-syntax-jsx"]
+}

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": ["airbnb", "plugin:react/recommended"],
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
+    "react/react-in-jsx-scope": "off",
+    "import/no-unresolved": "off",
+    "no-shadow": "off"
+  },
+  "ignorePatterns": [
+    "dist/",
+    "build/"
+  ]
+}

.github/workflows/linters.yml

@@ -0,0 +1,37 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup ESLint
+        run: |
+          npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x  @babel/plugin-syntax-jsx@7.x @babel/preset-env@7.x  @babel/preset-react@7.x
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.eslintrc.json
+          [ -f .babelrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.babelrc
+      - name: ESLint Report
+        run: npx eslint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "csstree/validator": true
+  },
+  "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+}

README.md

@@ -1,70 +1,83 @@
-# Getting Started with Create React App
+<h1 align="center"> The Secret Recipies</h1>
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This is Microverse's final project in React/Redux's course.
 
-## Available Scripts
+The objective of this project was to create a single page recipe catalogue using React, Redux and TheMealDB API.
 
-In the project directory, you can run:
+## Table of contents
+- [About](#about)
+- [The catalogue](#the-catalogue)
+  - [How to open](#how-to-open)
+  - [Tests](#tests)
+  - [Technologies used](#technologies-used)
+- [Author](#author)
+- [Contribution](#contribution)
+- [Disclaimer](#disclaimer)
 
-### `yarn start`
+## About
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+This project's goal was to build a browsable list of items that you can filter and access to the details of one item. The list should be accessed from an API, so I choose the [TheMealDB-API][TheMealDB-API] and filtered it to store only meals based on their categories.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+Link to a live version [here][live-version].
 
-### `yarn test`
+Repository: `https://github.com/Ralph-1/The-Sercet-Recipes`
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## The catalogue
 
-### `yarn build`
+When you open the catalog the React APP downloads the data from the server using an API and stores it in the Redux store.
+- A user can view all the meals categories in the CookBook
+![initScreenshot][initScreenshot]
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+- A user can click on any category and get to see the meals listed under that category.
+![mealsScreenshot][mealsScreenshot]
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+- Under each category, a user sees a variety of dishes to make a choice from and each dish chosen has a list of all the ingredients that were used to prepare it, area where it originates from and the category it belongs to:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+![descriptionScreenshot][descriptionScreenshot]
 
-### `yarn eject`
+### How to open
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+You can open the catalog online by clicking [here][live-version] or locally following these steps:
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+* Click on the green button "Clone or Download"
+* Click on Download ZIP or clone the repository to your desired directory
+* Extract the project (This step is for those who download the ZIP)
+* In your terminal, navigate to the folder
+* Run `npm install` or `yarn install`
+* Run `npm start` or `yarn start`
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+A tab will be opened in the browser.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+### Tests
+To run the tests, open a terminal in this project directory and run
+  `npm test` or `yarn test`
 
-## Learn More
+### Technologies used
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+To create this project I used:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+* JavaScript
+* A bit of HTML and CSS
+* Eslint
+* React
+* Redux
+* PropTypes
+* [TheMealDB-API][TheMealDB-API]
 
-### Code Splitting
+## Author
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+👤 **Ralph Oburu**
 
-### Analyzing the Bundle Size
+- Github: [Ralph-1](https://github.com/ralph-1)
+- Twitter: [@NotRalph0](https://twitter.com/NotRalph0)
+- LinkedIn: [Ralph](https://linkedin.com/in/ralph-oburu)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+### Contribution 🤝
+Contributions, issues and feature requests are welcome!
 
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+<!-- Links -->
+[TheMealDB-API]: https://www.themealdb.com/api.php
+[live-version]: https://hungry-johnson-4b570f.netlify.app/
+[initScreenshot]: ./src/assets/images/intial.png
+[mealsScreenshot]: ./src/assets/images/meals.png
+[descriptionScreenshot]: ./src/assets/images/description.png

package.json

@@ -6,9 +6,23 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.4",
+    "bootstrap": "^5.1.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.6.4",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.5",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-test-renderer": "^17.0.2",
+    "redux": "^4.1.1",
+    "redux-thunk": "^2.3.0",
+    "stylelint-config-standard": "21.x",
+    "stylelint-csstree-validator": "1.x",
+    "stylelint-scss": "3.x",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -34,5 +48,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.15.7",
+    "@babel/plugin-syntax-jsx": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react-hooks": "^4.2.0"
   }
 }

public/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="icon" href="./svg.png" />
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,6 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
     <title>React App</title>
   </head>
   <body>

src/actions/fetchAll.js

@@ -0,0 +1,22 @@
+import {
+  fetchProductsError,
+  fetchProductsPending,
+  fetchProductsSuccess,
+} from './index';
+
+const fetchMeals = (type) => (dispatch) => {
+  dispatch(fetchProductsPending);
+  fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?c=${type}`)
+    .then((res) => res.json())
+    .then((res) => {
+      if (res.error) {
+        throw (res.error);
+      }
+      dispatch(fetchProductsSuccess(res.meals));
+    })
+    .catch((error) => {
+      dispatch(fetchProductsError(error));
+    });
+};
+
+export default fetchMeals;