An E-commerce web application for selling men's suits and accessories. This project is created with the MERN (MongoDB, Express, React, Node) stack.

• Motivations
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

• Solve a modern business problem
  • E-commerce
• Dive deep into JS and ES2015+ features
  • Promises
  • Currying
  • Scope/Closures
  • Async / Await
  • Generators

Front Page

Shop Page

GraphQL is a query language for APIs and a runtime for fulfilling queries with existing data. In our application, we used it as an API to fetch data from our MongoDB database.

You can play with GraphQL on the playground here.

Here is how playground looks like with query example:

npm install
npm run launch

In order to run GraphQL API to fetch data in api directory, run:

npm install
npm start

Build script will create a build directory with a compiled JavaScript code which will be compatible with most modern browsers. We are using create-react-app as a strating point in our app, which under the hood uses babel as a transpiler.

npm run build

As a testing frameworking we are usng Jest. Just run test script to run tests

npm run test

All components are functional and written in Typescript:

interface CartIconProps {
  toggleCartHidden: (event: any) => void
  itemCount: number
}

export const CartIcon = ({
  toggleCartHidden,
  itemCount
}: CartIconProps): JSX.Element => (
  <div className='cart-icon' onClick={toggleCartHidden}>
    <ShoppingIcon className='shopping-icon'></ShoppingIcon>
    <span className='item-count'>{itemCount}</span>
  </div>
)

• Users can be authenticated using Google Sign-In or by creating a new account
• Cart data persists throughout browser sessions using localStorage
• Payments are handled via external Stripe API
• Clothing/accessory models are stored in Mongo and retrieved dynamically

Considerations for improvement:

• Expand inventory models with options for stock quantity, size, alt angles
• Save cart persistence on database for logged in users
• Better pop-up messages for error handling

Landing page: here

Project is deployed on Heroku!

Banksy-Trading-Co

Andrei Neagoie and Yihua Zhang's Intro to React course on Udemy

Created by:

• Tu Vo
• Farrukh Ahkrarov