INTRODUCING: Developer Typing Game Platform powered by the HERN Stack
Tags: harperdbhackerton, hernstack, developertypinggame, unclebigbayandfriends
Published: 2021-06-29 09:03:48

Hello my gorgeous friends on the internet 👋 , how are you doing today 🤗? In this article, I will be introducing to you my open source project for the **#HarperdbHackerton**.

![Orange and Blue 3D Elements Technology in Business and at Work Presentation (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624895652376/Kjb7a7Udv.png)

**THE PROJECT IDEA** is to create a platform where developers can improve on their typing speed and accuracy by playing a typing game in their preferred programming language, which will make developers both beginners and pros get more familiar with the syntax of their programming languages.


Without any further ado, I bring to you  [**The developer typing game**](https://developer-typing-game.netlify.app/) 

![frame_generic_light.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624818024340/iyy1ZiWSM.png)

<hr />

###  [Demo](https://www.youtube.com/watch?v=25E6FPy9SPc) 

<iframe width="853" height="480" src="https://www.youtube.com/embed/25E6FPy9SPc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<hr />

### Technologies 🧩

1. Frontend -  [React.js](https://reactjs.org/) 
2. Frontend Hosting -  [Netlify](https://www.netlify.com/) 
3. Backend - [ Node.js(Express.js)](https://nodejs.org/en/) ,  [Harperive](https://www.npmjs.com/package/harperive) ,  [Nodemailer](https://nodemailer.com/about/) .
4. Backend Hosting -  [Heroku](https://www.heroku.com/) 
5. Database -  [HarperDB Cloud](https://harperdb.io/) 
6. Version control -  [Github](https://github.com/) 


> The HERN stack is a development tool that combines **HarperDB**, **Express.js**, **React.js**, and **Node.js**.


<hr />

### Features 🚀
1. Personal Player Profile
2. Typing Area
3. Ranking 
4. Sharing of achievements
5. Star rating
6. Loffy Music

<hr />

### 1. Ranking 🎱
Every user of the  [developer typing game](https://developer-typing-game.netlify.app/#/)  platform will be ranked based on their typing performance and the top 10 players will be featured on the landing page.

![frame_generic_light.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624818024340/iyy1ZiWSM.png)


> 
This feature is inspired by @[Hashnode](@hashnode) article featuring on their feed page.

### 2. Personal Player Profile 👨‍💻 
Every visitor of the  [developer typing game](https://developer-typing-game.netlify.app/#/)  platform must have a registered personal account as a player, in order to have access to the typing area on the platform and to be featured on the landing page.

- ### Registration page

![frame_generic_light (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624818307011/MU4x61S79.png)

- ### Welcome email

![frame_generic_light (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624943006475/F8rHBRmOs.png)

- ### Login page 

![frame_generic_light (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624818323395/GBcVGkRDP.png)


- ### Profile page

![frame_generic_light (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624818419144/iW3sk2l_c.png)

### 3. Typing Area ⌨
This is where the main practice takes place, players get to type what's on their screen and monitor their performance.

![frame_generic_light (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624818944511/9aI5PGCPy.png)


### 4. Sharing of Achievements 🌟
Registered users of the  [developer typing game](https://developer-typing-game.netlify.app/#/)  can share their achievements on their social media (Twitter by default) after each of their games with a click.

![frame_generic_light (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624821407047/P4DxmJyqg.png)

### 5. Star Rating ⭐

The 10 featured players on the  [developer typing game](https://developer-typing-game.netlify.app/#/)  platform will be assigned a golden star rating based on their rank at the top fastest typist section on the landing page. 

![frame_generic_light (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624821560277/28u_kpOT_u.png)

> 
This ranking will be updated every time you visit the  [landing page](https://developer-typing-game.netlify.app/#/).

### 6. Lofi Music 🎶

Players get to play a **Lofi Music** while typing on the  [developer typing game](https://developer-typing-game.netlify.app/#/)  platform.
![frame_generic_light (7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624862579931/iDNwTmvsD.png)


> The UI, especially the sidebar was inspired by @[Hashnode](@hashnode) sidebar, which I really love so much.


<hr />

### Competitors 🎳

1.  [www.typing.io]( https://typing.io/) 
2.  [www.speedcoder.net](https://www.speedcoder.net/) 

### Competitive Advantage 🎯

1. Developer Typing Game Ranking
2. Featuring the fastest players on the landing page
3. Lofi Music

<hr />


### Upcoming Features 🌠

1. Support for multiple programming languages
2. Multi-player


### 1. Support for multiple programming languages

Developer Typing Game only supports JavaScript Language Training **for now,** support feature for other programming languages will be made available very soon.

### 2. Multi-player

Developer Typing Game only supports a single-player, for now, consideration is ongoing for multi-player and this will be considered based on feedback and the platform performance.

<hr />

## FAQ

### 1. Can I play this game on my mobile phone

- **Ans:** No, our platform is designed for computer keyboard training, and we think switching between characters and alphabet on mobile devices will be difficult for users.

### 2. I am not a programmer, can I still play the Developer Typing Game?

- **Ans:** Yes, in fact, human language in English text will be added to the language selection feature very coming soon.

### 3. How does the Ranking works?

- **Ans:** players word per minutes (wpm) + player accuracy (%) = Rank (considering time of submission also)

### 4. How secure are my data?

- **Ans:** All sensitive information such as the user password are encrypted(hashed) on our database, remember you can use a separate password if you want to.

<hr />

### Challenges

It is good to mention at this point that I have never worked with a backend language before the **#HarperDBHackerton**, and because **HarperDB** is also a new baby in town, it makes it more difficult to get things done as fast as possible as I wanted, due to few resources on the stack and things related to what I wanted to build, I enjoyed and was motivated by @[Catalin Pit](@Catalinpit) article on [Building API with fastify](https://catalins.tech/build-a-rest-api-with-harperdb-and-fastifyjs), but not to add more stress on myself, I had to go with Express.js as it is more popular here in Nigeria.

Learning in the process of building this project, leads to a lot of back and forth before getting the right choices. I enjoyed the process because I was able to document and share what I have learned by writing an article on  [How to build a mailing application](https://unclebigbay.com/build-an-email-application-using-node-js-express-js-with-gmail-and-nodemailer-all-in-one-article)  focusing on beginners, which I got a lot of encouraging feedback and letting me realized I am not doing bad using the new stacks, which really stood out for me.

<hr />

### Contribution

 If there is anything you feel could be better, the [ developer typing game](https://developer-typing-game.netlify.app)  is an open-source project, so feel free to review and send in pull requests to the project  [Frontend Repository](https://github.com/unclebay143/typing-game) and  [Backend Repository](https://github.com/unclebay143/typing-game-backend).



### Useful Links

- [Developers Typing Game Live](https://developer-typing-game.netlify.app/) 
- [Frontend Repository](https://github.com/unclebay143/typing-game) 
- [Backend Repository](https://github.com/unclebay143/typing-game-backend) 
- [Project Demo](https://www.youtube.com/watch?v=25E6FPy9SPc)