Skip to content

Experimental Next.js + React + TypeScript version of Karaoke Nite. 👨‍🔬

Notifications You must be signed in to change notification settings

karaokenite/karaokenite-react

Repository files navigation

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

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.

About

Experimental Next.js + React + TypeScript version of Karaoke Nite. 👨‍🔬

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published