Karaoke Nite (React)

Experimental Next.js + React + TypeScript version of Karaoke Nite. 🎙🎶

Local Development

Requires Node 16.

First, install everything once using yarn:

yarn

Now, in two separate terminals, you can start the server with yarn dev:server and the site with yarn dev:site:

yarn dev:server

yarn dev:site

The site will now be available on http://localhost:3000.

🤗 Both client and server are set up to reload automatically when you save source files.

Architecture

Documentation

• Folders
• Room DOM
• Server Rooms
• Client Room Context
• Video Synchronization

Tech Stack

These are the major tech things used to create Karaoke Nite:

Full Stack

• Next.js: Stitches together pages written in React with nice development & build tools.
• Socket.IO: Real time communication between client and server using WebSockets.
• TypeScript: Language that compiles down to JavaScript, but adds in "type" declarations & type checking.

Backend

• Koa: Simple web server; successor to express.js designed by the same team.
• Networked-Aframe ("NAF"): Syncs together A-Frame entities along with audio streaming.
• TS-Node: Compiles TypeScript code to JavaScript in real-time to run it as a Node application.

Frontend

• A-Frame: Set up 3D WebVR spaces using plain HTML and a touch of JavaScript.
• CSS Modules: Write your CSS in a (S)CSS file; import its class names in your JS/TS files.
• React: JavaScript library to create dynamic components that render to the DOM.
• React Context: Lets you make objects in a parent available to any of its children without using props.
• React Hooks: Newer ways to declare stateful or imperative code in React.
• SCSS: Imports, variables, and functions in your CSS files. A.k.a. Sass for some reason.