👨‍🎤 SuperSesh!

a project created by Cole Gawin

Getting Started

To run SuperSesh on your local machine:

1. Install repositories with yarn install
2. Start the dev server with yarn dev
3. Visit http://localhost:3000

To run the production server:

1. Install repositories with yarn install
2. Build the repo with yarn build
3. Run the prod server with yarn start
4. Visit http://localhost:3000

Technical Overview

Key Takeaways

1. This project uses a modified MERN stack.
   1. The backend is able to handle both one-way and two-way communication with the client due to ExpressJS and Socket.IO.
   2. The frontend application is managed by Next.js which handles SSR and other high-level features.
2. This project is structured as a monorepo codebase that contains code used in both the client- and server-side.
3. Chakra UI is used as a base component library for stylistic purposes.
   1. A custom theme was created with a custom font choices and colors.
   2. SCSS was used to style the nprogress loading indicator.

MERN Stack

SuperSesh is built using the MERN (MongoDB, ExpressJS, React, Node.js) stack sans MongoDB (more on that in a bit). Here is a brief overview on the specifics of the implementation of the stack for this project:

• MongoDB is a NoSQL document-oriented database and is one of the defining features of the MERN stack. To replicate the nature of a MongoDB database, I opted to have a single native Javascript object act as the "database storage" for the project, and I created an asynchronous wrapper around this object to simulate the asynchronicity of a MongoDB database.
  • For the scope of this project, I was focused on getting a working MVP that can be deployed publicly. I therefore chose not to use an actual MongoDB database, and instead implemented the mock database previously described. However, this mock database is abstracted such that MongoDB can eventually be implemented without having to re-implement the rest of the features in the project.
• ExpressJS is a backend web application framework for Node.js that handles HTTP requests to the web application. In conjunction with Socket.IO, the backend application powering SuperSesh handles both one-way (HTTP GET) requests and two-way (Socket.IO channels) connections.
• React is a front-end library for creating web interfaces and applications. This project makes use of Next.js, a framework built on-top of React that handles SSR (server-side rendering), production bundling, and client-side routing. SuperSesh uses a custom server powered by ExpressJS (as previously explained) that allows the project to use Next.js and Socket.IO in the same application.
• Node.js is the Javascript runtime environment used by SuperSesh. Since this project is coded entirely in Typescript, a typed superset of Javascript, the codebase is compiled from Typescript to Javascript before executing.

Monorepo

This project is structured as a monorepo containing code that is used both client- and server-side within the src directory. All the client code is within the src/client directory, all the server code is within the src/server directory, and all shared utility types (interfaces, enums, etc.) used in both the client and server code are within the src/shared directory.

Styling

To make SuperSesh look as polished as possible, it uses Chakra UI as a base component library since it provides a lot of highly functional components that are equally customizable. To that extent, a custom theme was created to give the project some extra flare.

• The font used in this project is Calibre by Klim Type Foundry.
• The theme used in this project is based off this base theme.

Additionally, this project uses NProgress to display page loading progress to the user. SCSS is used to provide custom styling to the NProgress loading indicator that matches the brand of SuperSesh.