2 Final Projects We Loved from Thinkful's Demo Day

Table of Contents

• Game of Towers
• Sync-In

Every cohort in Thinkful’s Full Time Web Development Bootcamp gets to take part in an online Demo Day to demonstrate their final projects. We recently attended a Thinkful Demo Day to see two teams present the projects that they worked on for three weeks. Each team explained the technologies that powered their projects, the roles each team member played, and they shared their screens to show off what they built. You'll be amazed at what these new developers built in just a few weeks; read on to see Game of Towers, a retro-styled tower defense game, and Sync-In, a music aggregation application!

The projects were presented through Thinkful’s custom-built video chat software where students can present simultaneously, and other students or participants can react to it in a chat bar down the side. Students can share their screens or show their webcams when presenting.

Each Thinkful student learned brand new technologies specifically to build their projects. “Once these students start working as developers, they’ll need to learn new technologies on the job," explained Bhaumik Patel, Head of Thinkful’s Full Time Web Development Bootcamp. "The world of web development is always changing, so making sure students are able to learn new skills is an essential part of a Thinkful education.” During the presentations students explained why they chose each technology and any challenges they faced.

Game of Towers

Team

Mathew Johns - Team Captain

JR Ruiz - Algorithm Overlord

Beatrix House - Design Lead

Matthew Rayburn - Database Engineer

Playing the Game

Game of Towers is a tower defense game the team describes as “inspired by a popular HBO TV series.” On the home page players can choose “login”, “register”, “play game” or “high scores”. Players place defense heroes to shoot at “creeps”. A creep is an evil character from the TV series which tries to follow a predetermined path. The player can earn money by killing creeps and then use the money to buy more defense heroes. The player also scores points by killing creeps. The game is divided into waves and with each new wave, more creeps arrive. You lose lives when the creeps get to the endpoint of the path.

Technology

The team used HTML Canvas for the graphics, React and Redux for the front end, NodeJS and MongoDB for the backend, Passport for authentication, and A* algorithm for the AI. They used an entity component system (ECS) to define the behavior of the game’s components, and piskelapp.com to design the sprites. The A* algorithm controls the path of the creeps.

Challenges

• The team members had to learn a number of technologies from scratch, as they had never used them before.
• One of these was Canvas, which most of the team needed to know.
• JR, who was in charge of algorithms, found learning A* to be pretty challenging– it took him more than a week to get the hang of it but once he got it, it seemed to work well.
• Mathew found ECS difficult to understand, but later found it worked well for maintaining large programs.
• Beatrix, who was in charge of design, did not have much experience with games, so she had a whole new vocabulary to learn, on top of the new technologies. “It was really inspiring, and I’m really excited to have these new skills.”
• Matthew, the database engineer, had some issues getting Firebase integrated, and had to scrap a few days’ work to use MongoDB and MLab instead.

Future

In the future, the team plans to integrate socket.io to make the game multi-player.

 

Sync-In

Team

Surbhi Poswalia - Project Manager

Lavie Ruan - Scrum Master

Michelle Nguyen - Design Lead

Kevin Lee - Product Manager

The App

Sync-In is an all-in-one music platform that brings together music from three different places– YouTube, Vimeo, and SoundCloud. Users can then search and create playlists using songs from all three services. Sync-In is designed for music explorers who may want to mix listening to underground artists on SoundCloud with more mainstream music on YouTube. “You can get the best of both worlds without switching between platforms,” Michelle says.

When users get to the Sync-In homepage they can log in using either Google or Facebook. The welcome screen shows the user’s favorite playlists. If users click on a track, they can add it to the queue of the music player. Within the playlists users can add tracks, delete tracks, and move tracks up and down. When users type in a term on the search page the search results will be from YouTube, Vimeo, and SoundCloud. Next to each result is a play button, and an add to queue button. Users can also checkmark tracks and add them to a new playlist. Users can opt to make playlists private or public.

Technology

The team used JavaScript as the main programming language because of its compatibility with multiple browsers. They chose React for front end because of component support and efficiency. They used MongoDB for the database because it’s free and open source. NodeJS was chosen for its ease of use, great ecosystem, and flexibility with package customization. Express was used to handle the server, and CSS was used for styling, to help avoid duplication and make maintenance easier.

Challenges

• They found the Google and Facebook authentication very hard to implement.
• They found it challenging to migrate from front end to back end and vice versa.
• Each member of the team had their own style of code, so they had to work hard to make sure the code they wrote was understood by other members of the team.
• As the app grew larger they had problems implementing new features. More communication between team members was needed, which took away from the coding time.

Future

The team would like to integrate more music platforms to allow more cross-platform music searchability, add customizable profile pages for users, and make the app compatible for mobile so users can listen to music on the go. They also would like to deploy the app officially and legally.

FURTHER READING:

• Project Spotlight: Robbie & Sierra of Thinkful
• Project Spotlight: Connie & Kyle of Thinkful

Find out more and read Thinkful reviews on Course Report. Check out the Thinkful Full Time Web Development Bootcamp.