Skip to content

Completed: May 2022

Inteligets Fullstack MERN stack e-commerce site

The brief/ challenge

Helping the brand scale to a new avenue and establish a presence online.

Inteligets is a technology brand that sells quality “pre-loved” smart-devices and internet of things (IOT) gadgets, helping them find new homes. Their mission is to help make technology more attainable for people who wouldn’t be able to afford the luxuries of smart devices. While they specialise in acquiring and refurbishing smart devices, this project and store aimed to help the brand reach a bigger audience and lead them to greater sales.


The solution

A self hostable, scallable and easy to use eccommerce store that:

  • Is powered by the MERN stack.
  • Is easy to use all-in-one-place shop and management experience.
  • Is a completely self-reliant solution which doesnt rely on any third party sevices or platforms.

React.js

A JavaScript framework developed by Facebook (Meta) that makes developing user interfaces using declarative JavaScript code possible.

Node.js

An incredible backend technology that makes it possible to use JavaScript on the backend.

Express.js

A Node.js framework that makes makes it easier to develop Node backends.

Redux

An awesome state management library I mostly use with React apps.

Bootstrap

A CSS framework developed by twitter that makes working with CSS easier and quicker.


For the customers

The Inteligets store quickly and easily, allows users to explore a variety of products and just as quickly create an account, purchase and pay for their order (demo uses PayPal). Post purchase and/or account creation, the store also allows users the control, view and manage their orders.

The frontend

Powered by React, the entire frontend uses: -A combination of the React-Bootstrap component library and vanilla Bootstrap to layout the UI. - Redux and Redux-thunks to manage the all state across the product, order and user components. - Axios as the HTTP Client to query the backend. - PayPal to manage payments.

Managing the store

The store supports 2 user roles: regular customers and admins. While customers have limited permissions, admin users (using the same frontend) can: - Create, update and delete products in the store. - Manage users and user permissions. - View, manage and update user orders.

The backend

The backend uses: - Node.js and Express.js as the backend runtime. - MongoDB for the database. - Mongoose to enforce a consistent and predictable data structure into the MongoDB database.

1import mongoose from 'mongoose';
2
3const reviewSchema = mongoose.Schema(
4  {
5    name: {
6      type: String,
7      required: true,
8    },
9    rating: {
10      type: Number,
11      required: true,
12    },
13    comment: {
14      type: String,
15      required: true,
16    },
17    user: {
18      type: mongoose.Schema.Types.ObjectId,
19      required: true,
20      ref: 'User',
21      // Adds a relationship between user and product
22    },
23  },
24  { timestamps: true, /* create createdAt etc. auto-magically*/ }
25);
26
27const productSchema = mongoose.Schema(
28  {
29    user: {
30      type: mongoose.Schema.Types.ObjectId,
31      required: true,
32      ref: 'User',
33      // Adds a relationship between user and product
34    },
35    name: {
36      type: String,
37      required: true,
38    },
39    image: {
40      type: String,
41      required: true,
42    },
43    brand: {
44      type: String,
45      required: true,
46    },
47    category: {
48      type: String,
49      required: true,
50    },
51    description: {
52      type: String,
53      required: true,
54    },
55    reviews: [reviewSchema],
56    rating: {
57      type: Number,
58      required: true,
59      default: 0,
60    },
61    numReviews: {
62      type: Number,
63      required: true,
64      default: 0,
65    },
66    price: {
67      type: Number,
68      required: true,
69      default: 0,
70    },
71    countInStock: {
72      type: Number,
73      required: true,
74      default: 0,
75    },
76  },
77  { timestamps: true, /* create createdAt etc. auto-magically */  }
78);
79const Product = mongoose.model('Product', productSchema);
80export default Product;
Learn More

The product schema structure created using Mongoose.

Built with a RESTFUL API that bridges the database with the backend and front end.

1import express from 'express';
2import { isAdmin, protect } from '../middleware/authMiddleware.js';
3
4const router = express.Router();
5import {
6  addOrderItems,
7  getOrderById,
8  updateOrderToPaid,
9  getMyOrders,
10  getUserOrdersList,
11  getOrders,
12  updateOrderToDelivered,
13} from '../controllers/orderController.js';
14
15router.route('/').post(protect, addOrderItems).get(protect, isAdmin, getOrders);
16router.route('/myorders').get(protect, getMyOrders);
17router.route('/:id').get(protect, getOrderById);
18router.route('/:id/pay').put(protect, updateOrderToPaid);
19router.route('/:id/deliver').put(protect, isAdmin, updateOrderToDelivered);
20router.route('/user/:id').get(protect, isAdmin, getUserOrdersList);
21// * When using :colon based routes make sure they are below their more exact counterparts otherwise they will take over
22
23export default router;
View the API

Click the link below to view the published Postman API documentation I created for the store.