Traveling Tree

Web app project: Full stack dev
JuN 2019 - dec 2019
I worked in a group of four students to create a simple web game to demonstrate proficiency in Web Tools.
All four of us had 0 experience in web development, not even html or css — however, we took a nose-dived into this final project and self taught ourself to create a full SQL-Express-React-NodeJS stack app integrated with Open Weather API.

Abstract

Created a simple web game where a user can grow their pet seed into a tree through the simple tap of a button to water, feed, play music, have conversation and travel with it.

Process

Moodboard

First we chose the theme of our game.
Stuck in the cold, dark and wintery Rochester, we wanted to travel and be somewhere surrounded by nature.

Defining Gameplay

Next challenge was thinking of a game that original and intriguing but simple enough to implement. Inspired by Flight Rising, a web-based game that is based on a world training dragons, we decided to create a game where the user can grow trees by traveling with it.

Prototyping Screens

Using Figma for the first time, we prototyped a sign-in page and 3 game pages.

Code, Code & Code

As we prototyped, we built a server using ExpressJS.
Then we split up and separately worked on building the front-end, back-end and implementing API.

Accomplishments

Learned how to use Figma; used Figma as a white board for a collaborative design jam.
Learned how to use GitHub; collaborated on a multiple-branch workflow on GitHub.

Front End:
Developed 2 pages: Log-In and Game page in ReactJS, Material UI, CSS and other React packages.
The login page includes a game description and a navigation bar with Google Sign-In button that uses Google's OAuth 2.0 Protocol.
The game page implemented OpenWeather API and connected to the back-end to send and receive user data.

Back End:
Created a three table database locally hosted on MySQL: The Users table contains a user’s name, unique ID (generated by us) and their GoogleID; trees table matches a particular tree with its owner; and. the TreeAttributes table keeps track of the user's tree as it contains tree’s attribute levels, development score, location, and the last time it was interacted with.

API:
Integrated Open Weather API to front and back end to use real-time weather data for gameplay.


I worked as a full-stack and project manager for this project. I worked as a developer for both front and back end, learning all parts of the web stack as well as gaining experience managing a project with a tight deadline.