dario-piotrowicz / ReactJS_e-commerce-miniproject

React e-commerce learning project from udemy course

Home Page:https://ecomm-miniproject.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ReactJS e-commerce miniproject

What this project is

This is a project written in ReactJS simulating an e-commerce clothes shop that I coded along the following Udemy course:
Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL) By Andrei Neagoie and Yihua Zhang.

Though I did code along the instructor, all the code written is entirely mine (no copy and paste!) and I often made my own decisions (most noticiably I aborred the CSS in JS topic which I listened to but refused to implement in my project, or a completely alternative implementation I did for the Redux Sagas).
So I honestly would say that roughly 70% of the code/project can be attributed to the course's instructors and 30% of it can be attributed to my own efforts/decisions.

Furthermore I did and plan on doing extra personal bits of work on the project, as you can see in the reposity's issues page.

Overall Description/Technologies Involved

The application is implemented using ReacJS, it's been created using the Create-React-App tool and:

  • uses the React Router (Dom) to implement pages routing
  • uses Firebase it implements authentication methods and data retrival (if you want to check the security rules set in firestore check the security rules file)
  • manages its local state using the Redux library (enhanced with Redux-Saga)
  • processes (test) payments via the Stripe plaftorm
    (in order to implement this an additional very small backend project was needed, you can see it in its own repository here)
  • uses functional components with the new React Hooks instead of class components with lifecycle methods
  • it is responsive thanks to the use of media queries and can be used as a Progressive Web App (the latter came practically out of the box thanks to Create-React-App)

Screenshots

Follow some screenshots of the application:

  • HomePage:

Home Page

  • Shop:

Shop Page

  • Checkout:

Checkout Page

  • Registration:

Registration Page

  • As a Progressive Web App:

Progressive Web App

Deployment

The application is deployed on the Heroku platfrom and can be accessed via the following link:
ecomm-miniproject.herokuapp.com.

About

React e-commerce learning project from udemy course

https://ecomm-miniproject.herokuapp.com/


Languages

Language:JavaScript 82.7%Language:SCSS 15.0%Language:HTML 1.9%Language:CSS 0.4%