https://github.com/erhantezer/recap-project
https://github.com/erhantezer/recap-project
axios-react bootstrap5 filter html-css-javascript mockapi reactjs reduce
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/erhantezer/recap-project
- Owner: erhantezer
- Created: 2023-03-05T23:49:16.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-11T08:41:07.000Z (about 3 years ago)
- Last Synced: 2025-05-30T16:31:16.737Z (about 1 year ago)
- Topics: axios-react, bootstrap5, filter, html-css-javascript, mockapi, reactjs, reduce
- Language: JavaScript
- Homepage: https://recap-project-ten.vercel.app
- Size: 231 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Clarusway
# Checkout Router with Axios
## Description
Project aims to create a Checkout Page App.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
Checkout Page App with Axios (folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── App.js
│ ├── components
│ │ ├── CardTotal.jsx
│ │ ├── Navbar.jsx
│ │ ├── ProductCard.jsx
│ │ └── ProductForm.jsx
│ ├── index.css
│ ├── index.js
│ └── pages
│ ├── About.jsx
│ ├── Main.jsx
│ ├── NewProduct.jsx
│ ├── ProductList.jsx
│ └── UpdateProduct.jsx
├── package.json
└── yarn.lock
```
## Objective
Build a Checkout Page App using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### At the end of the project, students will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Steps to Solution
- Step 1: Create React App using `npx create-react-app checkout-axios`
- Step 2 : Install `"react-icons"` package to your `package.json` for icons or fontawesome cdn link paste to "public/index.html" and install `axios` package.
- Step 3: Build Checkout Page App.
- Step 4: You can use CSS frameworks like Bootstrap, Material UI etc.
- Step 5: Push your application into your own public repo on Github
- Step 6: Add project gif to your project and README.md file.
## Notes
- You can add additional functionalities(storage or mockApi etc.) to your app.
## Demo
React Checkout Router with Axios
## MockApi
**
☺ Happy Coding ✍
**