Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages