This Rails web application allows a user to login and register a student for Chess Camps. The project lasted from January 2018 to May 2018, starting with basic controllers and models to building complex features such as a shopping cart, and Ajax forms for registration. The project proved to be both challenging and rewarding.
INITIAL DESIGN
The design process was the most critical part of creating the web application. To even begin coding, the following had to be created:
Use Case Chart and Prioritization
Database ERD
Database Design
Data Dictionary
After the initial backend, I started designing the website using simple wireframes to make sure I had the correct information in the right place.
RESEARCH
To further improve upon my base designs, I turned to several design texts such as Designing the Obvious and The Design of Everyday Things as well as Cognitive Psychology and Its Implications to study the psychological effects of design. The most important guidelines I found were the Pareto Principle (80% of data within the first page) and supporting the user mental models. By following these rules, I was able to create a website that was intuitive and clean, which allowed for a quality user experience.
FEATURES
After thoroughly looking at the possibilities with using Materialize and VueJs, I decided to implement several features, ranging from subtle to noticeable, in order to ease the user experience. This includes:
Writing the user's first name on the dashboard
Personalizing the dashboard based on role (parent/instructor/admin)
Toasts when an item was added or removed from the cart
Consistent color palette throughout website
AJAX forms to easily add or remove students directly from the camp show page
Ability to change account information such as password or email
Validations on forms to check age restrictions and regex format
FINAL DESIGN
REFLECTION
This project was frustrating at times because I learned that what you imagine your site to look like can be painstakingly difficult to create in reality. Rails has so many moving parts that it is so easy for a line of javascript to break the whole thing. Really understanding the backend of the framework allows you to debug more efficiently, because there were times I would stuck for hours because of some discreet file that I had no idea existed. This project helped me allocate time for plan vs implement, and this has inspired to learn more frameworks and languages such as React and Flask.
