Epic React Typing Game
A typing game where you can compete for high scores
Made and meant to be played on 💻.
Check the Demo ✨
Why? 🤔
My first brush with the full stack ecosystem, so what better than to make a game ✌️.
Features / Stack 🛠
- React
- Styled Components 🎉: styled component system
- Offline support
- Netlify Deployment Friendly
- Serverless functions
- Dark & Light theme support
- Auth0 Login (Google login integrated too)
- User authentication
- Developer tools:
eslint
prettier
▶️
How to start Setting Up Environment
First have npm installed on your system, set up its path variables.
Then install netlify development environment using npm command:
$ npm install -g netlify-dev
Installing Dependencies
Run the following command to download the respective dependencies of project :
$ npm i
Running the application
At this point you have the repository download with all the dependencies installed, but if you try to start by running
npm start
& you are good to go.
After this step we can finally run the project and see the result in http://localhost:3000/ 😃
Login Functionality / Backend Setup
As we are dealing with environment variables, the
.env
file is excluded from.gitignore
file. Therefore, in order to use login functionality & backend you need have environment variables set upAirtable
AIRTABLE_API_KEY
AIRTABLE_BASE
AIRTABLE_TABLE
Auth
AUTH0_KEY_ID
AUTH0_DOMAIN
Along with these environment variables Auth0Provider details also need to be set up in "Index.js" which are :-
- Domain
- Client Id
- Redirect URL
- Audience
These can be found in the quick start guide on your auth0 dashboard of your app
ReactDOM.render( <React.StrictMode> <Auth0Provider domain="learn-build-type-xcc.us.auth0.com" clientId="30vUWo93AWF72YAr078uhLC8DJ9B9Ofq" redirectUri={window.location.origin} audience="https://typinggameapi/" > <ScoreProvider> <App /> </ScoreProvider> </Auth0Provider> </React.StrictMode>, document.getElementById("root") );
$ netlify dev
Screenshot and Design 🖼
/
: main page with the sections ofHome
,Game
,Game Over
andHigh Score
.
Section | Screenshot |
---|---|
Home | |
Game | |
Game Over | |
High Score |
Themes & Colors 🎨
.dark{
background: #333;
color: #f9f9f9;
}
.light{
background: #f9f9f9;
color: #333;
}
Layout Overview 👷♂️
The structure for the main page is the following:
<Layout>
<Navbar />
<Landing />
<Game />
<High Score />
<Game Over />
</Layout>
All the components inside Layout
are Section
components. A section can have a link inside the Navbar
.
License 📝
MIT.