Description

Walktober is an annual event held at Portland State University's Rec Center where they challenge participants to walk 10,000 steps every day in the month of October. The program requires software that allows participants to log their daily steps and admins to view who has won the incentives. In the past, the software that they used was either expensive or difficult to use.

My frontend team worked together with a backend team to create a website and mobile application that accomplishes everything the Rec Center needs to implement this program. Users can sign up, log in, enter their steps manually, connect their smart wactches to log steps automatically, view their position in the leaderboard, create a new team, join an existing team, view the teams' leaderboard, chat with all participants, chat with just their team members, and view a bar graph detailing the steps they've taken in the last week. Admins can do all of this, plus see a table of all users and their total steps, see a table of all teams and their total steps, export the user data, export the team data, export the survey data, change the event settings, change the team settings, and post announcements to the group chat.

Tech Specs

In order to achieve all the necessary features in a compressed timeline, we opted to use Ionic, which is an open-source framework for building cross-platform mobile applications. This allowed us to develop the website and mobile application simultaneously. We used Firebase's database and hosting services. For the chats, we embedded discord servers.

Screenshots

Below is a collection of screenshots from our website.

Home - Light

The Home Page displays the individual and team leaderboards, the user's daily and total steps, their recent history in a bar graph, and the program group chat.

Home - Dark

All pages on our website are dark-mode compatible and respond to the system's settings.

Log In

The Log In Page allows users to log in with either email and password or their Google account.

Forgot Password

The Forgot Password Page allows users to have a password reset link sent to their email.

Team Join

The Team Join Page allows users to join an existing team, whether it is a private team or a public team.

Team Creation

The Team Creation Page allows users to create a public or private team. Private teams will require a password before joining.

Team Home

The Team Home Page allows users to see how they rank in their team, see how their team ranks amongst others, chat with their teammates, and see a table of all their team members.

Admin

The Admin Page is only accessible to admins and displays all partcipants and teams. It also allows the admin to change settings, print reports, and post announcements.

Health App Integration - Apple

This page is only visible on the mobile appliciation on Apple products. It allows the user to connect their Apple Health app to automatically upload steps.

Health App Integration - Android

This page is only visible on the mobile appliciation on Android products. It allows the user to connect their Google Health app to automatically upload steps.