Joanne Tsai

Overview

Duration	Feb - May 2022 (14 weeks)
Role	Full Stack Developer
Focus	Web App Design & Development
Tools	Ruby on Rails • REST API • Materialized CSS

The Great Pittsburgh Baking Outlet is a fully functional e-commerce web application built from scratch. The process involved writing user stories, applying the Model-View-Controller software architectural pattern to build back-end relational models, middleware controllers, and front-end views, and writing unit tests to ensure 100% test coverage.

A "shopping cart" program was incorporated into the system — customers can perform actions such as signing up, editing profile, adding items to cart, and checking out, etc. Administrators can add, edit, delete items, and view customer & order information.

As a final phase, I also created high-fidelity wireframes for the business, customer, and shipper dashboards that visualize business data and web metrics effectively.

Demonstration

The Structure

I applied the Model-View-Controller (MVC) software architectural pattern to build the application. Each component was also tested with unit or Cucumber tests to ensure correctness.

Model

Created user stories for three roles (administrator, customer, and shipper)
Developed relational database based on the GPBO business structure
Set up scopes, validations, and methods for each class

Controller

Managed user authentication and authorizations
Implemented shopping cart, checkout, search features with back-end queries and class functions
Executed new, index, show, create, edit, update, destroy actions for all entities including items, orders, and customers

View

Designed and constructed web interface and user interactions
Rendered partials for forms and search bars to develop interactive flow
Displayed different data and enabled different actions based on logged in user role

Dashboards

Key Takeaways

I have learned and gained hands-on practice with the full application development cycle.

This project was done through an interdisciplinary approach — incorporating the business context and perspectives, database structure, information retrieval process, and the user-centered design principles into building up an interactive web interface. Hence, I was able to apply my learning in different fields and better understand the complete full-stack development process and how different disciplines can be pieced together in a larger-scope project.

Apart from software programming, I also learned to apply design and data visualization concepts as well as to interpret and improve web metrics, which are essential when it comes to designing the structure of a real-world business online application.