Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nullchilly/nextchess
Online chess built with nextjs and fastapi
https://github.com/nullchilly/nextchess
antd chess fastapi game javascript multiplayer next-js nextjs react socket socket-io sql tailwind-css tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Online chess built with nextjs and fastapi
- Host: GitHub
- URL: https://github.com/nullchilly/nextchess
- Owner: nullchilly
- Created: 2023-09-13T09:09:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-08T17:26:01.000Z (about 1 year ago)
- Last Synced: 2024-12-15T09:34:16.387Z (about 1 month ago)
- Topics: antd, chess, fastapi, game, javascript, multiplayer, next-js, nextjs, react, socket, socket-io, sql, tailwind-css, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 294 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next Chess
This project was bootstrapped frontend with [React](https://www.typescriptlang.org/docs/handbook/react.html), backend with [Python](https://www.python.org/doc/) and database with SQL.
> [!NOTE]
> For more previews see the [demo folder](./demo/)
## Features/packages/framework included
- [TypeScript](https://www.typescriptlang.org/) - Type checker.
- [Ant Design](https://ant.design/components/overview/) - Build layout & components.
- [Chess.js](https://github.com/jhlywa/chess.js) - Handle chess game.
- [Nextjs](https://nextjs.org/) - Powerful React framework for seamless development.
- [FastAPI](https://fastapi.tiangolo.com/) - High-performance web framework for building APIs with Python.
- [Socket.io](https://socket.io/docs/v4/) - Real-time communication for dynamic and interactive features.
- [Alembic]() - Database migrations for efficient management and version control.
## Installation
### Frontend
Use the package manager [npm](https://www.npmjs.com/) to install NextChess.
```
npm install
```
Run the app frontend in the development mode. Open [http://localhost:3000](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](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
- [chesskid.com](https://www.chesskid.com/) for UI inspiration
- [lichess.org](https://lichess.org/) for being the best
## Copyright
2024 @ UET-VNU