App is currently in construction.

Inkling

Inkling, one player draws a word or phrase while others race against the clock to guess what it is.

Contents

• Tech Stack
• Architecture
• Installation
• Frontend Deployment to Vercel
• Backend Deployment to Render

Tech Stack

• Vite + Typescript + React.js
• ShadcnUI
• Tailwind CSS
• Zod
• Node.js + Express.js
• MongoDB + Mongoose
• Redis Cloud
• Knip
• Socket.io
• Husky
• Docker (optional)

---

Architecture

├── 📁.husky                   # Git hooks for pre-commit checks  
├── 📁backend                  # Backend logic with API, models, services, and configurations  
│   ├── 📁src                  # Source code for the backend  
│   |   ├── 📁config               # Configuration for MongoDB, Redis, and Socket.IO  
│   |   ├── 📁models               # MongoDB models for User and Game  
│   |   ├── 📁routes               # API routes (Auth) with controllers
│   |   ├── 📁utils                # Utility functions like JWT and hashing 
│   |   ├── 📁services             # Service logic (e.g., game services) 
│   |   ├── server.js          # Server entry point  
│   |   └── app.js             # Creating an express instance
│   ├── Dockerfile             # Docker configuration
│   ├── knip.config.js         # Knip configurations
│   └── docker-compose.yml     # Multi-container Docker setup  
├── 📁frontend                 # Frontend code using Vite + React + Typescript with Tailwind CSS  
│   ├── 📁@                    # ShadcnUI components and utility libraries  
│   ├── 📁public               # Public assets  
│   ├── 📁src                  # Source code for frontend app  
│   |   ├── 📁context              # React contexts (Auth, Canvas, Game)  
│   |   ├── 📁hooks                # Custom hooks for API requests and sockets  
│   |   ├── 📁pages                # Application pages like Account and Game  
│   |   └── 📁utils                # Helper functions (e.g., date and drawing utilities)
│   ├── tailwind.config.js     # Tailwind CSS configuration  
│   ├── tsconfig.json          # TypeScript configuration  
│   └── vite.config.ts         # Vite configuration  
└── .gitignore                 # Files to be ignored by Git  

---

Installation

1. Clone the repo

git clone

2. Move to Inkling

cd Inkling

3. Install dependencies

npm install

• Frontend

  1. Move to frontend

  cd frontend

  2. Install dependencies

  npm install

  3. Create a .env file

  touch .env

  4. Add server url

  VITE_SERVER_URL=http://localhost:3000

  3. Run the development server

  npm run dev

• Backend (with docker)

  1. Move to backend

  cd backend

  2. Pull the docker container

  docker pull immortalnova/inkling

  3. Create a .env file

  touch .env

  4. Add the below to .env file

  NODE_ENV=development

  5. Create a MongoDB database and add your Mongo URL to .env file

  MONGO_URL=mongodb+srv://.....

  6. Generate a random secret key for digital signing (run in terminal) :

  openssl rand -base64 32

  7. Add your secret key used to hash JWT tokens

  JWT_SECRET=secret_key.....

  8. Create a Redis Cloud account and add your Redis details to .env file

  REDIS_PASSWORD=password.....
  REDIS_HOST=redis-something.....redis-cloud.com
  REDIS_PORT=xxxxx

  9. Add client url

  CLIENT_URL=http://localhost:5173

  10. Run an image locally (with env variables):

  docker run --env-file ./.env -p 3000:3000 immortalnova/inkling

• Backend (without docker)

  1. Move to backend

  cd backend

  2. Install dependencies

  npm install

  3. Create a .env file

  touch .env

  4. Add the below to .env file

  NODE_ENV=development

  5. Create a MongoDB database and add your Mongo URL to .env file

  MONGO_URL=mongodb+srv://.....

  6. Generate a random secret key for digital signing (run in terminal) :

  openssl rand -base64 32

  7. Add your secret key used to hash JWT tokens

  JWT_SECRET=secret_key.....

  8. Create a Redis Cloud account and add your Redis details to .env file

  REDIS_PASSWORD=password.....
  REDIS_HOST=redis-something.....redis-cloud.com
  REDIS_PORT=xxxxx

  9. Add client url

  CLIENT_URL=http://localhost:5173

  10. Run development server:

  npm run dev

---

Frontend Deployment to Vercel

Backend Deployment to Render