Experimental Next.js + React + TypeScript version of Karaoke Nite. 🎙🎶
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.
These are the major tech things used to create Karaoke Nite:
- 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.
- 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.
- 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.