https://github.com/mesbol6647/spaghetti-world

https://github.com/mesbol6647/spaghetti-world

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/mesbol6647/spaghetti-world
• Owner: mesbol6647
• Created: 2023-12-26T16:54:02.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-26T19:07:02.000Z (about 1 year ago)
• Last Synced: 2024-11-05T11:10:15.397Z (2 months ago)
• Language: JavaScript
• Size: 3.48 MB
• 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

```

## Expected Outcome

![checkout-gif](checkout-router.gif)

## 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

MockApi

## How do we create mockApi? Watch the video!



 Watch the video



**
☺ Happy Coding ✍
**