board-game_ito

0921_compressed.mov

Connect to project env vault

1. Connect to your project env vault (visit dotenv website and login to your account first).

   npx dotenv-vault@latest new vlt_your-project-vault

2. Pull the existing env vault.

   npx dotenv-vault@latest pull

3. Open the env vault in your local workspace.

   npx dotenv-vault@latest open

4. Make folder for env files (if you haven't created any)

   # From the root project, create "env/" folder.
   mkdir env
   
   # Move all the .env related files into the "env/" folder.
   mv .env .env.me .env.vault env/

Mongo DB & Docker Setup

1. Make sure start.sh and the other shell scripts in /.docker is executable.

   chmod +x .docker/keyfile.sh .docker/entrypoint.sh start.sh
   chmod +x start.sh

2. Run the script.

   ./start.sh
   # OR bash start.sh
   # OR zsh start.sh

3. (Optional): Open the Mongo DB shell (mongosh) in your bash terminal

   You can open the MongoDB shell (mongosh) in your bash terminal to interact with your Mongo DB instance after your script has started the MongoDB containers. NOTE: ${DATABASE_NAME} should usually be "admin".

   cd ./docker
   
   docker exec -it mongo1 mongosh -u ${USERNAME} -p ${PASSWORD} --authenticationDatabase ${DATABASE_NAME}

   OR

   cd ./docker
   
   # Opens a bash shell inside the mongo1 container first
   docker exec -it mongo1 bash
   
   # Then run mongosh (Mongo Shell)
   mongosh -u ${USERNAME} -p ${PASSWORD} --authenticationDatabase ${DATABASE_NAME}

4. Testing connection string as if connecting from client

   You can login from the CLI as following:

   mongosh --username ${USERNAME} --password ${PASSWORD} --host mongo1

   OR

   # Just directly pass a connection string.
   mongosh "mongodb://${USERNAME}:${PASSWORD}@localhost/${DB_NAME}"

Stop & Remove Docker Containers

Run the following script (Specify -v to also remove volumes):

# From .docker folder:
cd .docker
docker-compose down -v

OR

# From root folder:
docker-compose -f .docker/docker-compose.yaml down -v

References

Setup

React + Node + TypeScript

• Initializing a Node Project
• How to Create a React app with a Node backend
• React - Typescript

ESLint + Prettier

• Improving Code Quality in React with ESLint, Prettier, and TypeScript
• How to set up ESLint and Prettier in React TypeScript 5 project? 2023
• Setup a Node.js project with Typescript, ESLint, Prettier, Husky

HTTP to HTTPS

• Https on Localhost for Vite and React, Vue, Vanilla, Svelte
• How to Secure Your NodeJS App with HTTPS and SSL Certificates
• How to configure docker container with https

Unique ID

• How to generate unique ID with node.js?
• UUID vs Crypto.randomUUID vs NanoID

Routing

• The Power Of CreateBrowserRouter: Optimizing Your React App's Navigation

Authentication

• Authentication with React Router v6

Local Storage

• How to refresh a React component when local storage has changed

Chat Box

• Building a Scrollable Chat Box with React

Socket.io

• Real-Time Data Exchange: Building a Socket.io Backend Server in Node.js
• Real-Time Chat in a Phaser Game with MongoDB and Socket.io
• Prevent multiple socket connections and events in React (useContext)
• [Example] Building a chat app with Socket.io and React

WebRTC

Basic Demo

• A Comprehensive Guide to Integrating Socket.io with WebRTC
• Develop a Video Chat App with WebRTC, Socket.IO, Express and React.

Others

• State of a MediaStreamTrack (for muted / unmuted state)

Mongo DB

• Changes to findOneAnd* APIs in Node.js Driver 6.0.0