<aside> 🔥 invite some friends, send a chat, listen to lofi beats.

</aside>

GitHub - chroline/supersesh: 👨‍🎤 invite some friends, send a chat, listen to lofi beats.

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:

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.