🔥 invite some friends, send a chat, listen to lofi beats.
GitHub - chroline/supersesh: 👨🎤 invite some friends, send a chat, listen to lofi beats.
- This project uses a modified MERN stack.
- The backend is able to handle both one-way and two-way communication with the client due to ExpressJS and Socket.IO.
- The frontend application is managed by Next.js which handles SSR and other high-level features.
- 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.
- A custom theme was created with a custom font choices and colors.
- SCSS was used to style the nprogress loading indicator.
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:
- 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.
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
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.