Gig Bird: Music Calendar App

2019

    Gig Bird is a music event calendar iOS app in Taiwan. As developer in this project, I'm responsible for the complete full-stack development, including front-end, server-side and database.

    role iOS / full-stack developer

    stack Swift, Express.js, PostgreSQL, Heroku, AWS RDS

    Team Member Salie Chien (Designer), Eve Chen (Marketing), Vince Shao

    ITP class Mobile Lab

    Background

    Objective

    As music events lover in Taiwan, it's hard to find one music event calendar app with quality. Gig Bird is the product to solve this problem. Gig Bird team is fully aware of the fact that building a music calendar app is extremely challenging, because it's a competitive market crowded with startups and companies. The goal here is not building a new product to replace the existing ones, but to create a prototype and try to figure out a way to distinguish Gig Bird from which.

    About

    Gig Bird is a very exciting project for me, Eve and Salie, because we want to have the experience of creating a product as full-stack developer, marketing specialist and product designer individually. Wishing for the best for sure, but the result of the product is not our primary concern: it's to actually build and deliver Gig Bird.

    Working remotely with Eve and Salie in Taipei, Taiwan and me in New York, U.S, To build the project, Eve, Salie and me use our spare time after works and classes to research, design and finally develop the app. Because I'm taking ITP class Mobile Lab in spring, 2019 semester, I decide to take the chance to develop Gig Bird as my final project.

    Design

    Our designer Salie has done an incredible job on creating the visual identity system of Gig Bird and UI of the app. The first priority we have been focusing on in terms of interface is mobile experience, even if we're not aiming for building mobile app. This constraint brings us challenges, but it's also proved worthy when we decide to go for mobile app before web app.

    design branding and wireframes design

    Full-stack Development

    As the full-stack developer of Gig Bird team, I'm responsible for every techinical development from front end, server and database. The app is built with a stack including Swift, Express.js server hosted on Heroku and PostgreSQL database running in AWS RDS.

    Swift

    Building a iOS app with Swift is a new experience for me, and it's been a exciting journey. Powered by Objective-C, coding in Swift teaches me a lot in terms of memory management, types and class that I've never thought of in JavaScript experience. Though coding in the new language is programmatically challenging, my knowledge from web development experience helps me code as organized and robust as possible.

    1. Code Structure

    The app is consist of two primary views: calendar view and single event view. The views are organized in Views folder with corresponding ViewControllers, and managed as ChildViews in parent ViewController file.

    To look a layer deeper into the primary views, every sub-components, including NavBar, Calendar, OverlayTable and EventInfo, are managed in individual component folders, with Utilities helper files if necessary to keep the code clean.

    code structure code structure

    2. Readability of Code

    As the scale of the app grows, the codes get messy and unreadable easily without careful management. To keep the code readable and clean as much as possible, in addition to split the codes into right files, I organize codes with same purpose into function with clear name, and create typealias, enums and struct if necessary.

    readability of code readability of the code

    3. Design System and Tokens

    To ensure a communication between designer and developer with quality and efficiency, a file to manage is colors, fonts, spacing and more settings is necessary. This system always boosts productivity prominently by saving time on redundant miscommunication.

    design system and tokens design system and tokens

    Server and Database

    The data in the calendar is all dynamic ones from database and server running in cloud. In Swift, I'm using Alamofire to help fetching real-time data from the API I create in the server.

    alamofire Alamofire

    1. PostgreSQL and AWS RDS

    Constructing a running database is a new challenge for me too. Without too much sense on the good practice of managing the data, I split complete information of one event, including time, date, address, performer and more, into individual tables, and joins the required ones when required. The purpose of doing this seperation is to keep flexibility of inserting or removing columms in the future.

    psql and rds PostgreSQL and AWS RDS

    2. Express.js and Heroku

    The server run by Express.js is serving as API manager at this moment. It fetches data from database based on quries of year, time, day or hour dynamically. The query joins the related tables together and removes unnecessary ones into one event data chunck. The server is deployed and running on Heroku service.

    server and heroku Express.js server and Heroku

    Conclusion and Future

    It's not easy to build an app without a full-time level resources including time, skills and money. But we made it. As a team, we learned how to roll out a product; as a developer, I got precious full-stack development experience. Of course, Gig Bird is still at the stage of prototype development, and we'll keep working on it in the future.

    To be continued.