Skip to content

reader-wh94/react-shop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

1. How to use

To use this application,

  1. make dev.js file inside config folder
  2. put mongoDB info into dev.js file
  3. Type " npm install " inside the root directory ( Download Server Dependencies )
  4. Type " npm install " inside the client directory ( Download Front-end Dependencies )



2. Screen shot

1. Main page

url : http://localhost:3000/

This is main page. And you can see Sign In, Sign Up button.

main


You can filter by continent and price. (However, this item is not a travel product.)

box



2. Sign Up Page

url: http://localhost:3000/register

This is sign up page. You can sign up by filling in all the blanks.

signup



3. Sign In Page

url: http://localhost:3000/login

After signing up, just log in.

login



4. After Login header

Header changes when you logged in.

header



5. Upload Page

url: http://localhost:3000/upload

You can upload items with pictures, name, description, price.

And you must select continent. (Example is not a country, sorry)

upload



5-1. Upload Complete

If the upload is successful, you will see this popup.

ok


On the main page, you can see that the products you uploaded are new.

upload_ok



6. Detail Page

url: http://localhost:3000/product/{productId}

This is the product detail page.

detail



6-1. Click Add to Cart Button

When you click the Add to Cart button on the product detail page, the header number changes.

cart1



7. Cart page

url: http://localhost:3000/cart

Click the cart in the header to go to the cart page. Here you can see what you put in your cart, total price, etc. You can also delete it by clicking the remove button.

Oh, you can also pay with the paypal button. I'll show you from behind

cart



7-1. Empty Cart

This screen appears when there are no products in the cart.

empty



7-2. Cart Page after payment

This is the page that appears after paying for a cart product.

emptycart



8. Payment

It's a pop-up window that opens when you click the PayPal button.

payment


payment1



9. History Page

url: http://localhost:3000/history

This is the page where you can check your payment details.

Right now it's empty because I don't have any payment history.

his


After payment, it will show.

hist

About

Create a shopping mall page with react, mongodb, and nodejs.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published