Dewalade1/20-questions-game-frontend

A two player game where player One thinks of a word and player two tries to guess the word within 20 attempts. Player 2 is allowed to ask yes/no questions about the word

20-questions-game-frontend

Tools used

• ReactJS - to build the app
• NextJS - for preview and production deployment
• Vercel - for hosting the app
• Git and GitHub - for tracking, storage and version control

How I worked on this Project

• I built the app based on the Kahoot website design: Link to website
• I used feature branches and pull requests in this Project
  • Example PRs
  • Example Branches
• I worked documented and fixed bugs using GitHub Issues: Example Issues

Why I built the Project this way

• I didn't use a state management library like Redux on purpose. For this app useState and useReducer hooks were sufficient. I realized that more and more projects don't use Redux anymore since GraphQL or react-query are often used for data management.

• UI libraries are a great place to find ready-made components that help speed up the dev process. They can also be handy if one only needs a few cusom components. For these reasons, I used Styled-Componends to create and style the buttons, inputs and cards used in this project.

• My plan is to become a FullStack Engineer eventually. This is why I chose to build a Custom RESTful API Server which can be found here. I built this API using the expressJS framework in NodeJS.

How to setup the app

Option 1

• The app has been setup and deployed on Vercel

Option 2

Alternatively, you can do the following to setup the app locally. Run the commands below in your terminal or CMD:

1 Clone the repo using this command

git clone https://github.com/Dewalade1/20-questions-game-frontend.git

2. Change directory to the repo folder

cd <path-to-repository>/20-questions-game-frontend

3. Install the dependencies using npm

npm i

4. See Option 2 in the How to start the app section below to start the app

How to start the app

Option 1

• The easiest way to start up the app is to click here

Option 2

You can start the app locally or run it on a development environment using the following commands:

• Start app locally

npm start

• Run on a local dev environment

npm run dev

Available Scripts

Most available scripts are NextJS built-in scripts but the most useful ones are:

• Start app

npm start

Open http://localhost:3000 in your browser to view it. The page will refresh if you make edits to the code. You will also see any compile and lint errors in the console.

• Start app using a dev environment

npm run dev

Open http://localhost:3000 in your browser to view it. The page will refresh if you make edits to the code. You will also see any compile and lint errors in the console.

• Check app for lint errors

npm run lint

• Build the app locally

npm run build