<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
- This project uses a modified MERN stack.
- This project is structured as a monorepo codebase that contains code used in both the client- and server-side.
- Chakra UI is used as a base component library for stylistic purposes.
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.
- 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.