
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
A project developed during my last year on Computer Engineering Degree. We developed a cruiseship catalog using AngularJS.
University · February of 2025
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.
A set of tools used for this project.
On my GitHub you can find more information about my personal and professional projects.
Some repositories are on my student account.
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.
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.
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.
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.
I applied a similar approach to the individual cruise information page, refining the layout and visuals to align with our design system.
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.
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.
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.
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.
Universidad de Las Palmas de Gran Canaria. (2025). Official website.
https://www.ulpgc.esEscuela de Ingeniería Informática, ULPGC. (2025). Guía docente: Proyectos de Ingeniería y Gestión del Software (PIDGS).
https://www2.ulpgc.es/aplicaciones/proyectosdocentes/pdf.php?id_proyecto=70883&NUEVA=1