- Download Node.js LTS. (Recommend installing via NVM for Windows, a Node.js version manager)
- (Optional) Install pnpm (alternative to Node's default NPM)
- Download VS Code.
- Install the ESLint extension by Microsoft
- Install the IntelliCode extension by Microsoft
- (Optional) Install the IntelliCode API Usage Examples extension by Microsoft
- Download Docker Desktop.
- ❗If you are on Windows, Docker Desktop will require installing WSL 2 (Windows Subsystem for Linux).
- To check if you have WSL,
wsl --list
in your terminal should return something. - To install WSL, simply run
wsl --install
in an administrator PowerShell or Command Prompt & then restart your computer.
- To check if you have WSL,
- ❗If you are on Windows, Docker Desktop will require installing WSL 2 (Windows Subsystem for Linux).
- Download Git.
- Clone the repo (
git clone https://github.com/AdoryVo/big-two.git
) - Open your local repo folder in VS Code
- Open a new terminal (
Ctrl+`
) & runpnpm install
(ornpm install
) to install dependencies - Add a
.env
file to the root directory & add the contents received from Discord - Run
docker compose up
& leave the terminal open - Open a new terminal (
Ctrl+Shift+`
) and runpnpm prisma migrate dev
(ornpx prisma migrate dev
) to hook up Prisma to your database - Send
Ctrl+C
to your terminal running docker to stop the process
First, start your existing Docker image:
docker compose start
Next, run the development server:
npm run dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the app.
Key:
- ⭐: Primary - most changes will happen here
- 📝: Secondary - changes provide support for primary focuses
- 📄: Mainly for reference & foundation, unlikely to be changed
prisma/
└── schema.prisma # 📄 Database schema
src/
├── components/ # ⭐ React components
├── lib/
│ └── big-two/ # ⭐ Game logic
├── utils/ ## Constants and exports
│ └── hooks/ # 📝 Hooks
│ └── theme.ts/ # 📝 Theme specifications
└── pages/ ## Visitable routes
└── api/ # ⭐ Server API routes
└── _app.tsx # 📄 Page component wrapper
└── game/[gameId].tsx # ⭐ Game lobby page
└── index.tsx # 📝 Home page
└── sandbox.tsx # 📄 Development page for debugging game logic
.env # 📝 Environment variables
package.json # 📄 Dependencies
db push
: Push the Prisma schema state to the databasemigrate dev
: Create migrations from your Prisma schema, apply them to the database, generate artifacts (e.g. Prisma Client)studio
: Run Prisma's local browser tool for viewing models
- Next.js - React framework
- Prisma - Typescript-first ORM for database operations dealing with active games
- Pusher - Realtime web socket channels for multiplayer functionality
- Supabase - Cloud Postgres database
- SWR - Optimized data fetching for streamlined game updates
- Chakra UI - Component library inspired by Tailwind CSS
- Formik - Form logic
- Material Design icons via react-icons - Icons
- cards - Basic deck operation functionality
- random-word-slugs - Creative game ID generation
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.