shangguanwang / ecommerceshop

Fullstack React Ecommerce Website

Hi there 👋

🌱 Weclome to my Github page, I'm Shangguan

👀 I'm a self-taught Frontend Developer with a passion for building meaningful products, proficient in React and JavaScript.

Projects:

• BerryCart Shopping List 🍓
• NFT Marketplace 🖼️
• Little Joy 🌸
• TypeScript todo list 📝

💪 I'm currently working as a frontend engineer at a startup, continuing #100DaysofCode challenges, and contributing to open-source projects.

Tech Stack:

Connect With Me:

📫 Reach me at my [email protected]

📊 GitHub Stats:

ecommerceshop's Issues

Products Listing Page

Left side is three different filters, right side includes a banner image, and a List component.

Inside the List component, it will map each data item into the card component.

Home-Slider

contains two sections: the image and the move back and force icons

Home-Navbar

Home-Categories Grid

The Grid has 3 columns. First column has 2 rows, second column only has one row, third column is larger and has 2 rows, the first row contains two images side by side.
Each row should include a product image, and a button that includes category text and directs users to the product page.

Home-Footer

Contains:

• Logo
• Copyrights
• Payment Image

Backend: Filter Item using Strapi Rest API

In Products.jsx, grab data from Strapi by useFetch. Create a new useState for selectedSubCategories and a handleChange function to the checkbox.

In List.jsx, grab data from Strapi by useFetch. Add the query selectors for the 3 different filters.

Redux: Shopping Cart

• install react redux and redux toolkit
• wrap in index.js with
• useDispatch to control delete button and reset cart button
• install redux persist so that the cart item persists after refreshing the page

FeaturedProducts

Includes two sections with the same style: featured and trending products

For each product card, it should includes an image, old price, and current price. When hover over, the second image appears.
New product will have a tag at the top.
Old price should be striked through.

Backend: Connect React with Strapi to fetch data

Install MySQL and Strapi
Upload data to Strapi dashboard
Create an env file under client directory to store API key and URL
Use React UseEffect to fetch data from Strapi URL

Home-Contact

includes a text explanation, email input box and button, and social media icons

Single Product Page

The left side should include product images. Once clicked, the larger image will display.
The right side include product price, add button, and some description info.

Backend: Fetch a Single Product

add useFetch to component

replace src

Cart

Includes the cart title, two product items with delete button on each row, a subtotal price, and a checkout button.