A sample e-commerce clothing application, built with React, Redux, JavaScript, and CSS

A sample e-commerce clothing application, built with React, Redux, JavaScript, and CSS

cloth-app A sample e-commerce clothing application, built with React, Redux, JavaScript, and CSS

ClothApp

A sample e-commerce clothing application, built with React, Redux, JavaScript, and CSS.

Project Screen Shots

Home Page

Shop Page

Checkout Page

Authentication Page

Installation and Setup Instructions

Clone down this repository. You will need node and npm installed globally on your machine.

Installation

Run either npm install or yarn in project root directory and client folder to build all dependencies.

Firebase config

Replace the firebaseConfig variable in client/src/utils/firebase.utils.js with your own config object from the firebase dashboard. Learn more.

Stripe config

Set the publishableKey variable in the client/src/components/stripe/StripeCheckoutButton with your own publishable key from the stripe dashboard. Learn More.

In the project root directory, create a .env file, type STRIPE_SECRET_KEY=secret_key, replacing secret_key with your own Stripe secret key. Learn More.

Start Server

npm dev or yarn dev in project root directory.

To Visit App:

localhost:3000

Languages, Tools & Libraries

JavaScript

  • ESLint : JavaScript and JSX Linter.

  • React : Library for building UI.

  • Redux : Library for managing application state.

  • Node.js / Express : Node.js for server side coding, used with express framework.

  • axios : Promise based HTTP client for the browser and node.js.

CSS

Extra

  • Firebase : Realtime database + users authentication management.

  • Stripe : Online payment platform.

Functionality overview

  • Sign-up / Sign-in using email or google account.

  • Browse items by category.

  • Add items to cart.

  • Show cart content information (quantity of each article, total price...)

  • Checkout items using Stripe with a given test credit card information to use.

Reflection

This is a 3 week long project following a course built in order to learn React's advanced features and familiarizing myself with React ecosystem. I was planning to add many more features I had in mind, but I wasn't able to do so due to time constraints. I chose to use the create-react-app boilerplate to minimize initial setup and invest more time in diving into weird technological rabbit holes.

Download Details:

Author: hsusanoo

Demo: https://cloth-app.herokuapp.com/

Source Code: https://github.com/hsusanoo/cloth-app

react redux reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React and React Redux — Connecting to Redux

Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.

ReactJS With Redux.

As one starts building his application in ReactJS, one needs to keep an eye on the complexity of application state management. As the application state tree grows with more nodes, the complexity to manage them also increases widely. So, we need a state management utility to manage our states effectively. Here will be using Redux, a library coupled with our ReactJS application for state management.

Full Shopping Cart By React & Redux

Build Shopping Cart Using React, Redux, React Router, React Reveal and React Modal.

React Native Redux | How To Use Redux In React Native

React Native Redux Example Tutorial From Scratch. We connect the React Native app to Redux store to save and retrieve the application data.