The Mānoa Now Marketplace is the culmination of a collaborative effort among a group of software engineering students from the University of Hawai‘i (ICS 314), working together to build a dynamic platform designed to streamline the buying, selling, and trading of various goods within the university community. This project allowed us to apply our technical skills in a real-world setting, while fostering teamwork and problem-solving throughout the development process.
In this project, I was responsible for the front-end development alongside our project leader, with a particular focus on creating and refining the user interface (UI) to ensure an intuitive and smooth user experience. From start to finish, the process was highly collaborative, requiring constant communication with both the back-end team and our project manager to ensure that the platform’s design was not only aesthetically pleasing but also functional and efficient.
My contributions included designing and implementing key components like the navigation bar (Navbars I & II) and the shopping cart features. I also took charge of creating the browse categories (Digital HQ, Study Tools, Campus Closet, and Self-Care), along with the search bar for filtering and sorting products. Below is a breakdown of my contributions and the timeframes during which I worked on specific features:
Navbar (Navbars I & II)
I began by designing the layout and structure of the navigation bar, ensuring that it was responsive and user-friendly. I spent additional time refining the navbar’s functionality and integrating it with routing, ensuring smooth transitions between pages.
Cart & Customer Service
For the shopping cart, I focused on creating a visually appealing and fully functional page. This included building the cart’s dynamic content, ensuring it could display added products correctly, as well as implementing the integration with local storage to retain items between sessions.
Browse Categories (Digital HQ & Study Tools)
I worked on implementing product category pages, including Digital HQ and Study Tools, which required organizing and displaying items in a user-friendly layout. The goal was to allow users to easily navigate between categories and find what they needed quickly.
Revising Categories (Digital HQ & Study Tools, Campus Closet & Self-Care)
End: 11:12 AM
I spent time refining these category pages, improving the UI/UX based on feedback and testing. This involved revising the design to make the flow smoother and ensure the content displayed correctly across all devices.
Shopping Cart
I dedicated a significant portion of time to further refine the shopping cart’s functionality, making sure that products could be added, removed, and stored seamlessly. Testing the cart was crucial to ensure that it integrated smoothly with the backend to handle user data accurately.
Search Bar (Text Search, Filtering, & Sorting)
End: 6:30 AM
I worked on developing a powerful search functionality that allowed users to filter products based on text input and other parameters. This feature was essential for the user experience, and I spent time optimizing it to be both fast and intuitive.
Implementing and Revising Features
End: 7:38 PM
As the project progressed, I was tasked with revising certain UI elements for better performance and design efficiency. This included the implementation of icons with React Icons and optimizing page load speeds.
Final Revisions and Testing
In the final phase, I addressed some design flaws and worked on improving the input speed of certain elements. I also spent time running tests with Playwright to ensure that the platform was fully functional and met the project’s specifications.
Throughout the project, I utilized various tools and libraries such as npm, React, and CSS to build and style the interface. The styling was handled through globals.css and page.modules.css, which ensured consistency across the site. I also worked with local storage to ensure user data persisted, even after the session ended.
Working on the final project as part of a software engineering team taught me invaluable lessons about collaboration and perseverance. With our schedules often conflicting due to personal commitments and other class responsibilities, it wasn’t always easy to stay aligned. However, despite these difficulties, we didn’t give up. We took proactive steps to address issues as they arose, communicated openly, and supported each other throughout the process. In the end, our ability to adapt, stay focused on our goals, and work together as a team allowed us to successfully complete the project and build an application we could all be proud of.