Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenepokalyuk/react-personik
This web application is a game of cities for time. The goal of the game is to name as many real cities as possible. The application includes a game with “AI” validation of cities, animation of progress bar and display of game results.
https://github.com/eugenepokalyuk/react-personik
react react-router tailwindcss
Last synced: about 2 months ago
JSON representation
This web application is a game of cities for time. The goal of the game is to name as many real cities as possible. The application includes a game with “AI” validation of cities, animation of progress bar and display of game results.
- Host: GitHub
- URL: https://github.com/eugenepokalyuk/react-personik
- Owner: eugenepokalyuk
- Created: 2024-05-29T15:55:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-03T16:41:10.000Z (7 months ago)
- Last Synced: 2024-06-04T18:52:02.375Z (7 months ago)
- Topics: react, react-router, tailwindcss
- Language: TypeScript
- Homepage: https://react-personik.vercel.app
- Size: 400 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The game of cities
This web application is a game of cities for time. The goal of the game is to name as many real cities as possible. The application includes a game with “AI” validation of cities, animation of progress bar and display of game results.
## Features
- Validation on existing cities.
- Game rule support: cities cannot be repeated.
- Game rule support: no city names with “ъ”, "ы" and “ь” signs.
- Game rule support: each player is given 2 minutes to think.
- BONUS: Display error messages for inappropriate cities.
## Technologies Used
- React (React Router)
- TypeScript
- Tailwind CSS
## Getting Started
To get a local copy up and running, follow these steps:
### Prerequisites
- Node.js and npm installed on your machine.
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/eugenepokalyuk/react-personik.git
cd react-personik
```
2. **Install dependencies**:
```bash
npm install
```
3. **Start the development server**:
```bash
npm start
```
4. **Open the application**:
Open your browser and navigate to `http://localhost:3000`.
## Project Structure
```
src/
├── assets/
│ └── icons
├── components/
│ ├── App ── App.tsx
│ ├── GameFrame ── GameFrame.tsx
│ └── LoadingDots ── LoadingDots.tsx, LoadingDots.css
├── pages/
│ ├── GamePage ── GamePage.tsx
│ ├── ResultPage ── ResultPage.tsx
│ └── WelcomePage ── WelcomePage.tsx
├── utils/
│ ├── getLastChar.tsx
│ ├── getNextCity.tsx
│ ├── validateExistingCity.tsx
│ └── validateCityName.tsx
├── data/
│ └── cities.ts
├── index.css
└── index.tsx
```
### Explanation of Key Files
- **`src/components`**: Contains common components used in the application.
- **`src/pages`**: Contains page components.
- **`src/utils`**: Contains utilities and validation functions.
- **`src/data`**: Contains data such as a list of cities.
## Deployment
To build the application for production, run:
```bash
npm run build
```
The built files will be in the `build` directory, which can be deployed to any static hosting service.