/web101

Online chess built with nextjs and fastapi

Primary LanguageTypeScript

Next Chess

This project was bootstrapped frontend with React, backend with Python and database with SQL.

Note

For more previews see the demo folder

Features/packages/framework included

  • TypeScript - Type checker.
  • Ant Design - Build layout & components.
  • Chess.js - Handle chess game.
  • Nextjs - Powerful React framework for seamless development.
  • FastAPI - High-performance web framework for building APIs with Python.
  • Socket.io - Real-time communication for dynamic and interactive features.
  • Alembic - Database migrations for efficient management and version control.

Installation

Frontend

Use the package manager npm to install NextChess.

npm install

Run the app frontend in the development mode. Open http://localhost:3000 to view it in the browser.

npm run next-dev

Backend

Run the app backend in the development mode. Listen at port http://localhost:8000.

npm run fastapi-dev

Database

  • Every alembic script is located at alembic/versions folder.

  • Edit alembic script by SQL

  • Run to update database

npm run update-db

Configuration

Environment variables

  • To customize environment variables, override values at src/.env (create this file if it doesn't exist).

Run and Deploy

Important

cd web; npm run start to run the production server

The service is available at http://fall2324w3g9.int3306.freeddns.org/

Note

npm run dev to run the development server

Folder structure

api

Define all api for application (eg: login, getUserById, getGame, findGame, ...).

alembic

Contains database migration scripts using Alembic for efficient management and version control.

src/app

Indexing and organizing application-specific modules and components.

src/components

You can write components for application inside this folder. Each component should be self-contained as a module.

Example:

components
├── Admin
│   └── AdminPage.tsx
│
└── Icon
    ├── BotIcon
    │    ├── Cat.tsx
    │    ├── Elephant.tsx
    │    └── index.tsx
    └── ChessPiece
         ├── BlackKing.tsx
         └── index.tsx

src/helpers

Define all shared constants used in application

src/types

Define all shared types used in application

src/context

Define all shared context and context provider used in application

src/hooks

Define all shared hook used in application

Thanks to

Copyright

2024 @ UET-VNU