Developing a Calculation Game with React/Django at Home Hackathon 2

5/6/2021•Hackathon React Django Personal Development For Kids

Since I couldn’t go out during Golden Week, I decided to try my hand at a hackathon for the first time. By completing a project in 3 days, it helped my own growth, and I was able to experience the attitudes towards development, products, and high technical levels of the participants, which was very educational.

My simple profile @tanosugi:

I used to do part-time work with Visual C++ but had been away from programming for a while
I wanted to try personal development, so I’ve been studying React, Django, AWS, etc. on Udemy for a year
I’m in the process of creating a portfolio, about 80% done

That’s the kind of person I am.

Home Hackathon 2

The period was 3 days, you could work in a team or individually, or even have study sessions, and at the end, each person shared their achievements in 10 minutes at the presentation session. It’s the second time, following last year, so it’s Home Hackathon 2.
Theme: Something everyone can enjoy
Schedule: 5/3 10:00 Free development start, post development status freely on Slack until the presentation 5/5 17:00 Presentation, vote and announce awards 5/5 20:00 Networking party

https://connpass.com/event/211876/

What I Created: Calculation Game

It’s a very simple game where you choose addition, subtraction, multiplication, or division and answer 10 questions.
It’s a web app, but made to fit smartphone sizes, so you can play on PC or smartphone browsers.
If you choose to play against someone, you register, share the match ID, and the match starts. During the match, the opponent’s progress (how many questions they’ve finished) is also displayed.
Demo: Removed Github: https://github.com/tanosugi/calcgame

Purpose of Creation

I wanted to create something that kids can study while having fun
To help kids understand what can be made with programming
There are few calculation games that allow competition, so I decided to make one myself
Kids can compete with each other in parks or via Line video calls
There are apps for two people to operate one smartphone, or to play against the computer, but I couldn’t find an app for online competition

Technologies Used

For frontend, I used React/TypeScript, Material UI, react router, etc.
For backend, I used Django, poetry for virtual environment, PostgreSQL on docker for database.
Communication between frontend and backend via GraphQL.
Deployment via AWS CLI, placed on S3 and EC2. Developed on EC2, code management on Github.
No CI since the development period was 3 days. I made it so that running a simple shell script deploys it.

Creation Schedule

I was working on it all 3 days.
Since I desperately aimed to complete what I set out to do in a time-limited environment, I feel like I grew in 3 days. It seems like last year was 5 days, but for me, 3 days was just the right period.
Day 1 Morning: Designed rough design and data structure Day 1 Afternoon-Evening: Created backend
Day 2 Morning-Evening: Frontend
Day 3 Morning-16:00: Connecting frontend and backend Day 3 16:00-17:00: Preparing presentation script Day 3 17:00 Presentation, vote and announce awards Day 3 20:00 Networking party

What I posted on Slack for hackathon participants after finishing Day 1 morning: Design and data structure

Screenshot of calculation game design.png

What I Gained from Participating

Listening to the presentations of the participants made me think I still need to study more. I only used the language I’m most proficient in that I’ve learned in this year, but I was surprised that many groups took on different technologies from usual and brought products to completion in 3 days.
Voice input chat, natural language processing, games with black jokes, full-fledged game apps that took 2 years to make, very wide range of themes, various technologies, very interesting.
For the opponent’s progress display (how many questions they’ve finished) in the calculation game I created, I used the method of “going to place my progress via GraphQL, via Django, to SQL, and retrieving the opponent’s progress with the game number as key”. Since there’s no need for persistence and it’s short-term communication, it seems a bit unorthodox. I was taught at the presentation that generally “use WebSocket or P2P with WebRTC”.
At the networking party, we talked about “what is UI that is not declarative UI”, “should we write tests at hackathons”, “should code formatters run locally or on CI”, “what is the appropriate unit price for taking on homepage creation”, etc., which was a very enjoyable time for me who usually studies alone.
Thank you to everyone I participated with.