Adding new features to Course Management app!
Having built my course management app with Sinatra, it was time to submit my app for a project review with a Flatiron School instructor. This project will be a part of my portfolio through Flatiron’s online Fullstack web developer program.
During our code review session, my instructor Luke asked me to walk-through my code and demonstrate what I have learned about Sinatra and object-oriented programming. We spoke about:
- RESTful routes design
- CRUD database operations
- MVC app architecture
- Running a Sinatra app with Rack handler
- Refactoring code to use Conditional ternary operator where possible for cleaner code
As an extension exercise, Luke asked me to add a menu bar to my app. This was actually an oversight on my part, as I had been developing and testing my routes by modifying the URL directly in my browser.
However, users rely on common features such as a menu bar to navigate any web application. So it will be important to have “breadcrumbs”, or menu bar links for users to navigate any web or mobile app!
If you’ve read my previous article documenting how I built my course management app, you may remember I used the MUI CSS framework to style my app. The beauty of using a framework is the set of components / features they come with!
In this case, I was looking for a simple menu bar. And MUI CSS provides a Dropdown menu button. I was able to modify the code to create a dropdown menu for my users.
As there are two types of user: Student and Instructor , it was important to display different menu options based on the type of user.
Leveraging the Embedded Ruby (ERB) template syntax, I can use my helper method #current_user to determine if a user is a student or instructor. And display different menu options based on their roles!
And voila! This is the final menu bar:
Takeaways:
- Using a CSS framework such as MUI or Twitter Bootstrap makes building user-friendly web apps easy!
- Writing clean, modular code (with comments) will help you in the long run. It is easy to add new features or refactor code for any old project!
- Having unit, integration, and acceptance tests will safeguard you from breaking your app as you tweak and add new features!
