borderhacks-wavedirect

Created for the WaveDirect Challenge at BorderHacks 2020

Background

Over the past several months, I have been working on a project to develop a mobile app for the club management system at my university. That project was my first experience with React Native, so I spent a lot of time learning and establishing good practices as I went. That's good, but the end result is an app with quite a bit of bloat and redundancy. The WaveDirect challenge has a similar premise to that project, so I saw it as an opportunity to apply what I've learned about React from scratch to create a much more refined project.

I started by building up some of the subsystems I was familiar with, but I quickly realized that many of the coding practices and code structures that I picked up early in my React career have been made completely obsolete by the things I've learned since. Because of that, much of this project was spent pruning and streamlining my workflow and even rebuilding some modules from scratch. I think I've been able to improve quite a bit with this project, so I'm pretty satisfied with the result.

A note on hard-coded data

All the test data for this project is hard coded in test-data.js. To access this data, the app passes through a simulated API in mock-api.js. This might be a bit more complicated than is strictly necessary to access static data, but it is intended to mirror how an actual app would access data remotely.

Setup

This project is a cross-platform React Native app built on the Expo platform. To run the project, you must follow the steps at Expo's Getting Started page. The gist of it is this:

  1. Install Node.js
  2. Install the Expo CLI with npm install expo-cli --global
  3. Install the Expo app on whatever device or emulator you plan to test with. (App Store) (Google Play)

Running the Project

  1. Open a terminal window and navigate to the project's root directory
  2. Run expo start to launch the Expo Developer Tools. A project dashboard should automatically open in the browser.
  3. Using the either the CLI or the web dashboard, run the project on the device or emulator of your choice.

There are tools to streamline this process such as the npm extension for Visual Studio Code.

Features

  • Major app sections are accessible using bottom tabs
    • The My Account page provides access to personal and product information, as well as providing buttons to call or email WaveDirect sales
    • The Outage Map page displays a live coverage/outage map and textual information on the status of the user's current access point
    • The Live Support page provides a live chat function to communicate with support staff (Replies in this prototype are randomly generated)
  • Other features are accessible in a side drawer
    • Links to useful pages on the WaveDirect website
    • A page to refer a friend to WaveDirect
    • Light and dark themes
    • The log out button
  • A login page with hard-coded user credentials (any email in the test data will work, and the password is always "password")
  • Simulated API to interact with hard-coded test data

Disclaimer

I do not have access to an Apple device, so this project has not been tested on iOS. It should work, but I make no guarantees.

Share this project:

Updates