ReactJS application which shows the list of recipes and details.
I have used create-react-app (react hooks) and Marley Spoon API's to develop this application. The purpose of the application is to correctly render the data from API as a list and also the details about the individual list item.
This applicaiton has been devleoped with help of following stack
In order to quick started with this application follow as below,
npx create-react-app recipes-detail-app
cd recipes-detail-app
npm startThen open http://localhost:8000/ to see your app.
Required software and how to install.
- npm
npm install npm@latest -g- Clone the repo
git clone https://github.com/TanveerAliS/recipes-detail-app.git- Go to dir and Install NPM packages then start
cd recipes-detail-app
npm install
npm start├── .gitignore <- Files that should be ignored by git.
├── README.md <- The top-level README for this project.
├── package.json <- This file contains all the devDependencies, dependencies and scripts to run app.
├── package-lock.json <- It stores an exact, versioned dependency tree rather than using starred versioning like | package.json itself
└── src
├── actions <- Payloads of information that send data from application to store.
├── components <- Different genric componenent used for this app
| ├── Button
| ├── Card
| ├── CardBody
| ├── CardDetails
| ├── Cardheader
| └── Title
├── Constans <- Constants which are used in this app
├── containers
| ├── RecipeDetails <- Display the Details about the selected recipe
| ├── Recpies <- Display the list of all recipes
├── middlewares <- Handles action in the Async Actions
├── mockdata <- Mock data for testing and development
├── reducers <- Handle the multiple reducer function for application
├── services <- Handle the fetch call
├── store <- A store holds the whole state tree of your application
├── index.js <- Init and place app in document
├── index.scss <- Created single style sheet for simplicty
├── Routes <- Handle the routing of application
└── Utils <- Simple function to get recipes details
In this application, we fetching the data from Marley Spoon's APT to get the different recipes and display list with details view.
It will render loading component while application fetching data from API.
This application is fully accessible with tabs and screen readers.
Your Name - @TanveerAli_S
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent