https://github.com/yosephdev/isaks-bilar

An assignment where I had to develop a web shop using React.
https://github.com/yosephdev/isaks-bilar

create-react-app react

Last synced: 4 days ago
JSON representation

An assignment where I had to develop a web shop using React.

• Host: GitHub
• URL: https://github.com/yosephdev/isaks-bilar
• Owner: yosephdev
• Created: 2022-04-12T09:49:31.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-06-28T06:47:11.000Z (5 months ago)
• Last Synced: 2024-06-28T08:01:52.664Z (5 months ago)
• Topics: create-react-app, react
• Language: JavaScript
• Homepage: https://isaks-bilar.netlify.app/
• Size: 438 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dynamic React Storefront for Isaks Bilar

Welcome to the development journey of Isaks Bilar's online storefront, crafted with the robustness of React using Create React App.

## Project Overview

This project's mission is to architect an interactive web store that showcases a catalog of products with seamless navigation and an intuitive shopping experience.

### Product Listing

The heart of the store is a dynamic product listing, where each item is presented with:

- A preview image that captures the essence of the product.

- A concise and informative title.

- A clear display of the price.

- A direct link to a detailed product page.

The design ensures each product is distinctly represented within the list, utilizing clean and modular JSX for structure and style.

### Enhanced Shopping Features

Enhancing the user's shopping experience, each product in the listing includes an "Add to Cart" button, enabling the effortless addition of items to the shopping cart.

### Product Details Page (`pages/Product.js`)

Dive into the details of each product on its dedicated page, which includes:

- A high-resolution product image.

- An engaging title.

- Competitive pricing information.

- A thorough description that highlights key features.

- Availability status, reflecting the current stock levels.

A strategically placed "Add to Cart" button on this page invites users to make a purchase, contributing to a streamlined shopping flow.

### Checkout Experience (`pages/Checkout.js`)

The checkout page is where the excitement builds, listing all the selected items in a user-friendly HTML table format. Here, customers can review:

- Product images for a visual summary of their cart.

- Titles and prices of the chosen items.

The page smartly calculates and displays the total cost of the cart's contents. If the cart is empty, a friendly prompt encourages users to continue shopping, with a button redirecting them to the product list.

### Persistent Shopping Cart Component (`components/Cart.js`)

`Cart.js` is not just a page but a persistent component that accompanies the user throughout their shopping journey, akin to the site's footer and header.

It serves as a mini-cart, listing:

- Product images for recognition.

- Titles for recall.

- Prices for budget tracking.

The component also provides a total cost summary and a convenient button to proceed to checkout, ensuring a smooth transition to purchase completion.

---

Isaks Bilar's online store is more than just a marketplace; it's a testament to modern e-commerce, designed to deliver a superior shopping experience powered by React.