HomeResumePortfolioContact
Desktop view of cruise list in CruiseCatalog.

Project Cruise Catalog

A project developed during my last year on Computer Engineering Degree. We developed a cruiseship catalog using AngularJS.

University · February of 2025

Introduction

This project was the final assignment for the subject PIDGS (Proyectos de Ingeniería y Gestión del Software), an elective course in the fourth year of my Computer Engineering degree at the Universidad de Las Palmas de Gran Canaria (ULPGC). The main objective was to develop a fully functional webpage while applying the project management methodologies we had learned in earlier courses. Since the outcome was successful, I decided to include it here and share some insights into the development process.

We decided to develop a webpage where cruise brands could share information about their fleets. Users would be able to register and save their favorite cruises. The main goal was to create a platform for sharing information, with the potential to eventually develop an API so other developers could easily access the data.

I mainly worked as a back-end developer on this project, but I also helped out with the front-end. Here are a few contributions I’d like to share.

Project Overview

Tools

A set of tools used for this project.

  • DevelopmentAngular, TailwindCSS, Firebase and FireAuthentication.
  • ManagementProjectLibre, Trello and Microsoft Office.
  • CommunicationMicrosoft Teams and physical meetings.
Chamil’s GitHub profile picture.

On my GitHub you can find more information about my personal and professional projects.

Some repositories are on my student account.

Design

The design process was fairly straightforward. We began by selecting the main colors for the webpage—settling on a clean palette of white, grey, and several shades of blue.

#0A2735

#ACC7CC

I then experimented with how these colors would work together by designing an interactive element—a button. This helped us evaluate how each color performed as a background and how readable and engaging the UI elements would be.

Button behavior in CruiseCatalog.

Due to time constraints, I used this button design as a reference for future design choices. The color scheme shown above became the foundation, allowing me to build consistent, visually distinct interactive elements that stood out from the background.

Application

Initially, my teammates developed all the pages with a basic and unpolished layout. My task was to refine these pages to match the design vision we had in mind. I began by working on the login and registration pages, which remained mostly unchanged from the original implementation.

Desktop view of login in CruiseCatalog.

The header and footer of the website were already functional and aligned with the intended design, so no major adjustments were needed there. My next focus was the cruise catalog page. This included a searchable, sortable list of cruise ships displayed as cards. I revised the design of each of these components to ensure consistency with the overall visual style.

Desktop view of cruise list in CruiseCatalog.

I applied a similar approach to the individual cruise information page, refining the layout and visuals to align with our design system.

Desktop view of cruise info in CruiseCatalog.

For the FAQ section, we had to make some design compromises. The dropdown elements didn’t work well with the same styling used for buttons, so we opted for a simpler, more subtle look that improved usability and clarity. The result was a cleaner, more square-based dropdown layout.

Desktop view of the FAQ section in CruiseCatalog.

The profile page followed the same visual guidelines as the cruise catalog page. Most of the components were reused, making implementation straightforward and consistent with the rest of the site.

Desktop view of profile in CruiseCatalog.

Knowing that the website would likely be accessed on mobile devices, we made responsiveness a priority. One of my favorite details in the final product is the behavior of the buttons: when screen space is limited, the text automatically hides, leaving only the icon visible. This ensures functionality and clarity across devices.

Mobile view of login in CruiseCatalog.
Mobile view of cruise list in CruiseCatalog.
Mobile view of cruise info in CruiseCatalog.
Mobile view of the FAQ section in CruiseCatalog.
Mobile view of profile in CruiseCatalog.

Conclusions

This project provided valuable experience in both software development and project management within the context of the PIDGS subject. Developing the Cruise Catalog allowed me to apply practical skills in Angular, TailwindCSS, and Firebase while understanding how to organize and manage a collaborative project effectively.

From a technical perspective, I improved my knowledge of front-end and back-end integration, handling authentication, state management, and responsive design. Ensuring that each page followed a consistent visual style was a key part of delivering a professional final product.

On the project management side, planning tasks, coordinating with team members, and using tools like Trello and ProjectLibre helped reinforce the importance of structure, deadlines, and clear communication in software projects.

Overall, this project strengthened both my technical and organizational abilities. It also demonstrated the impact of careful design and thoughtful implementation on user experience, reinforcing my interest in developing web applications that are functional, usable, and visually appealing.

References