Shopi eCommerce App

http://andrewpham.ca/shopi-fe

Shopi is a fully featured e-commerce web application with authentication, content management and an admin dashboard with analytics.

Features

• User authentication with JWT for added security
• Credit card checkout with Stripe payment method
• Node REST API CRUD operations for products, users, carts, orders, etc.

Stack

• React for the front-end (Styled-components, react hooks, react router)
• Redux/redux toolkit for state management
• Node.js/express for the back-end
• MongoDB for the backend
• Stripe for checkout
• Heroku used to deploy the server
• Github pages to deploy the frontend

Insights

Authentication

• I utilized JWT to create private API calls. A user would need a token and user credentials to make certain CRUD operations/API calls.

If I had more time I would improve:

• Responsiveness and styles
• Improve admin dashboard analytics with aggregation of orders, users, etc.
• Enable users to create an account with a third-party service
• Enable users to view order history, wishlist

Available Scripts

• To start the React development server

cd client
npm install
npm start

• To start the Node development server

cd server
npm install
npm run dev

Client File Structure

client/src/
├── components    # All UI components
├── redux         # state management files
├── API.js        # REST api requests
├── pages         # Pages
├── App.js        # Routes and initial component renders

Server File Structure

server/
├── controllers    # Route-handler callback functions
├── models         # data models
├── routes         # Forward request to appropriate controllers
├── index.js       # Main server index with middlewares