Skip to content

Latest commit

 

History

History
208 lines (185 loc) · 5.65 KB

README.md

File metadata and controls

208 lines (185 loc) · 5.65 KB
Raw

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

  • 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
  1. Move to Inkling
cd Inkling
  1. Install dependencies
npm install

  • Frontend

    1. Move to frontend
    cd frontend
    1. Install dependencies
    npm install
    1. Create a .env file
    touch .env
    1. Add server url
    VITE_SERVER_URL=http://localhost:3000
    1. Run the development server
    npm run dev

  • Backend (with docker)

    1. Move to backend
    cd backend
    1. Pull the docker container
    docker pull immortalnova/inkling
    1. Create a .env file
    touch .env
    1. Add the below to .env file
    NODE_ENV=development
    1. Create a MongoDB database and add your Mongo URL to .env file
    MONGO_URL=mongodb+srv://.....
    1. Generate a random secret key for digital signing (run in terminal) :
    openssl rand -base64 32
    1. Add your secret key used to hash JWT tokens
    JWT_SECRET=secret_key.....
    1. 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
    1. Add client url
    CLIENT_URL=http://localhost:5173
    1. 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
    1. Install dependencies
    npm install
    1. Create a .env file
    touch .env
    1. Add the below to .env file
    NODE_ENV=development
    1. Create a MongoDB database and add your Mongo URL to .env file
    MONGO_URL=mongodb+srv://.....
    1. Generate a random secret key for digital signing (run in terminal) :
    openssl rand -base64 32
    1. Add your secret key used to hash JWT tokens
    JWT_SECRET=secret_key.....
    1. 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
    1. Add client url
    CLIENT_URL=http://localhost:5173
    1. Run development server:
    npm run dev

Frontend Deployment to Vercel

Backend Deployment to Render

Deploy with Vercel