Mānoa Menu

Team Homepage: GitHub Organization

Deployed Application: Manoa Menu

Overview

The Manoa Menu project is a web application designed to provide menu translations and item descriptions for international students at the University of Hawaiʻi at Mānoa. The application also allows users to view dining menus, find dining locations & hours, manage their favorite items, and get recommendations based on their preferences.

Concepts Used/Learned

Frontend Development

• React and Next.js: Utilized for building the user interface and managing the application state.
• React Bootstrap: Used for styling and responsive design.
• TypeScript: Ensured type safety and improved code quality.
• Material UI: Used for some pages for additional UI Components
• Webscraping: Essential for scraping menus that lack an API

Backend Development

• Next.js API Routes: Implemented for server-side logic and data fetching.
• Prisma ORM: Used for database interactions with PostgreSQL.
• OpenAI API: Integrated for generating menu translations in real time.

Testing and Quality Assurance

• Playwright: Employed for end-to-end testing.
• ESLint: Ensured code quality and consistency.

Deployment:

• Vercel: Learned key concepts about the Vercel CLI, deployment options, error logs, etc.

My Role

As a fullstack developer, I was responsible for several key features of the application:

• Developed the Menu page end-to-end:
  • Created a responsive and easy-to-read menu interface for multiple languages
  • Used JS-DOM to parse the University’s website for current accurate menu data (Campus Center)
  • Used PDF-Parse to extract menu data from the University’s online weekly PDF
  • Constructed API menu routes to get and check for newer menu versions
  • Engineered AI prompts for menu translations and descriptions, fetched with the OpenAI API for customizable JSON-structured data returns.
• Developed the Dining Locations and Hours page:
  • Implemented a convenient and responsive page to view dining locations and their hours
  • Used the Google Maps API for map embeds
  • Added an ‘Get Directions’ button for each location, which will directly guide users using their default maps app

Teamwork and Leadership

• Coordinated and worked with all developers on tasks and deadlines
• Reviewed code and gave ideas for improvement
• Lead the team’s weekly meetings with an overall agenda per meet