App Design and Development: Cafe 23

Date: January - May 2023

Care Companion Home Screens


    My Application Design and Development class revolved around learning ruby on rails and MVC. If you are unaware, MVC stands for Models, Views, and Controllers. We spent the majority of the semester building an app using MVC in ruby which was cafe 23. The goal was to develop an app for an imaginary cafe, cafe 23, to manage clocking in/clocking out, payroll, and all the information regarding stores, employees, shifts, and paygrades.

User Stories and ERD

Prior to commencing the coding process, we conducted a comprehensive analysis of our users' requirements. Our application caters to three primary user categories: Managers, Employees, and Admins, each with distinct needs and preferences. To identify these needs, we carefully examined a narrative document, categorizing them into A, B, and C levels of importance. A-level user scenarios were deemed essential for the application's core functionality, while B-level encompassed desirable features, and C-level represented optional enhancements. For instance:

  • As an Admin, I require the ability to add employees, stores, and shifts to the system.
  • As an Employee, I need to be able to conveniently clock in and clock out through the app.
  • As a Manager, I need to access a feature that allows me to generate payroll for my store.

By understanding these user needs at different levels of priority, we ensured that our development efforts were focused on delivering an application that addresses the most critical requirements first while offering additional features for an enhanced user experience.

Entity Relationship Diagram for Cafe 23

Fig 1. Entity Relationship Diagram for Cafe 23

Models and Controllers

After thoroughly understanding the functions to be implemented for my users and establishing the relationships between entities in the database, I proceeded with the coding phase. I first created models for all the entities outlined in my Entity-Relationship Diagram (ERD). Prior to starting the actual coding, I diligently crafted tests, covering various edge cases to ensure robustness and accuracy.

Embracing the principles of test-driven development, I wrote the tests before coding the models. This approach guaranteed that my models were designed to pass all the tests, minimizing potential errors and ensuring a solid foundation for the application.

Upon achieving 100% test coverage for my models, I moved on to develop the controllers. These controllers acted as the bridge between my models and the future views that I planned to create. I implemented controllers for key entities, such as employees, shifts, assignments, stores, jobs, and pay grades, paving the way for the seamless integration of data and functionality with the views in the later stages of development.

Models Views Controllers

Fig 2. MVC System


For views, I developed new, show, and index views for key models such as employees, shifts, assignments, stores, jobs, and pay grades, ensuring comprehensive coverage of essential functionalities. Subsequently, I utilized these views to fully develop the primary app, tailoring it to accommodate 8 distinct user scenarios as outlined in the project requirements.

Final Prototype

Some of the Admin Interactions for Cafe 23

App Pictures

screen 1 for cafe 23

Fig 3. Home Screen of Cafe 23

Screen 2 for cafe 23

Fig 4. Employees Page for Cafe 23

Screen 3 for cafe 23

Fig 5. Store Payroll for Cafe 23


Over the course of this project I learned about ruby on rails and using MVC for creating apps. I also learned more about concepts in web design such as reduction of cognitive load and the gulf of expectation and the gulf of evaluation. I intend on building upon the principles I learned in this class to further my understanding of app and web development.