An E-commerce web application for selling men's suits and accessories. This project is created with the MERN (MongoDB, Express, React, Node) stack.
- 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!
Andrei Neagoie and Yihua Zhang's Intro to React course on Udemy
Created by: