Hawaii Bites

Landing Page

What You Can Do: As a new or returning user, you will be greeted with a clean landing page. Here, you can log in to your account or sign up if you don’t already have one.

Screenshot Description: Display the screenshot showing the login/signup options.

Screenshot Version 2:

User Home Page

What You Can Do: Once logged in, you will be directed to the user home page. Here, you can view today’s food options based on your food preferences (e.g., vegan, spicy, vegetarian) and where they are available.

Screenshot Description: Display a screenshot of the user dashboard, highlighting food categories and available vendors.

Screenshot Version 2:

User Profile Page

What You Can Do: In this section, users can manage their profile, including food preferences (e.g., which foods they like or dislike). This helps the system suggest more relevant food options.

Screenshot Description: Show the profile management page with editable fields for preferences and personal info.

Screenshot Version 2:

Screenshot Version 3:

Vendor Home Page

What You Can Do: Vendors can log in to update their menus for the day. They can add or remove items from their food offerings and update details about the menu item (e.g., description, availability).

Screenshot Description: A screenshot of a vendor’s home page showing the "Update Menu" section.

Screenshot Version 2:

Foods Available Right Now

What You Can Do: View food options available right now across various vendors. This is useful if you're in a rush and want to know what's immediately available.

Screenshot Description: Show a list of food items available at different vendors, with filtering options.

Admin Home Page

What You Can Do: Admins can manage users and vendors, including setting food preferences and assigning roles. They can also monitor and update site settings.

Screenshot Description: Display the admin dashboard showing user management and system controls.

Add Vendor Page

What You Can Do: Admins can add new vendors to the system, providing their details (name, location, and menu).

Screenshot Description: A screenshot of the "Add Vendor" page with a form to input vendor data.

Today’s Top Picks Page

What You Can Do: This page will show the best food options based on user preferences, trending dishes, or daily specials.

Screenshot Description: A screenshot of top-rated or recommended dishes for the day.

Overview

This guide will walk a developer through the process of setting up, running, and modifying the Hawaii Bites app. The app allows users to browse available food items on campus, filter them based on preferences, and enables vendors to update their menus. It uses Next.js for the frontend and Supabase for database management.

1. Setup and Installation

Prerequisites

• Node.js: The environment for running JavaScript on your machine.
• Supabase Account: You will need to create a Supabase account to manage the database.
• Git: Used for version control.

Steps to Get Started

1. Clone the Repository: Download the code repository to your local machine using Git. This will set up the project directory on your system.
2. Install Dependencies: Once the repository is cloned, you need to install the required dependencies for the project. This is done by running npm install in the project directory, which will download all necessary packages.
3. Set Up Environment Variables: The project requires certain keys to connect to Supabase. You will need to configure these by creating a .env.local file in the root of the project. In this file, include the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY values provided by Supabase.
4. Run the Development Server: After the setup, run the application in a development environment by running npm run dev. This will start a local server on your machine where you can interact with the app.

2. Database Setup

Supabase Database Configuration

The app uses Supabase to store and manage data. You will need to set up the following tables in Supabase:

• Users: Stores information about the app users, such as their personal details and authentication information.
• FoodVendors: Stores information about vendors, such as their name and location.
• MenuItems: Stores the food items offered by vendors, with a reference to the vendor and additional information like category and description.
• UserPreferences: Stores user preferences for food categories, helping to personalize recommendations.

In the Supabase dashboard, create the tables with appropriate columns. For example, the Users table should include columns for firstName, lastName, email, and password, while the MenuItems table should include vendor_id, item_name, category, and description.

Supabase Client Setup

The app interacts with the database using Supabase’s client. You need to ensure that the Supabase client is properly set up to handle database queries such as retrieving or inserting data into the tables.

3. Running and Modifying the System

Pages and Components

The app’s structure is based on Next.js, and the pages are stored in the src/pages directory.

For reusable components like the Navbar and Footer, the code is stored in the src/components directory. These components are used across multiple pages for a consistent layout.

Adding or Modifying Pages

If you need to create new pages (like a new page for a specific vendor or a new feature), you will create a new file in the src/pages directory. For example, to add a page that displays menu items for a specific vendor, you can create a file under pages/vendors/[id].tsx.

Database Operations

The app fetches data from the Supabase database to display relevant information. For example, when displaying the list of menu items, the app makes a query to the MenuItems table, filtered by vendor or category. Similarly, when adding a new menu item or updating vendor information, the app sends the data to the Supabase database for storage.

User Authentication

Authentication is handled through Supabase’s built-in authentication system. Users can sign up, log in, and maintain sessions using Supabase’s auth module. This is used to manage user logins and ensure that the data displayed is tailored to the logged-in user’s preferences.

4. Modifying Features

Add New Features

To add new functionality (such as an admin page to manage users or additional filters for food items), you will need to create new components and connect them to the database.

For example, if you want to allow users to rate menu items, you could create a new component to collect ratings and store them in a new Ratings table in Supabase.

Customization

Customize the profile page to allow users to select food preferences or exclude certain food types. This can be done by adding input fields for the preferences and updating the UserPreferences table accordingly.

Updating Menu Items

Vendors need to log in to update their daily or weekly menu items. This can be accomplished by adding a form that lets vendors input their menu items and then store those items in the MenuItems table.

5. Testing and Deployment

Test the Application

Before deploying the application, thoroughly test all the features locally. Ensure that the app behaves as expected when users log in, vendors update their menus, and the correct food items are displayed based on user preferences.

Deploying the Application

After successful testing, deploy the app using a service like Vercel, which integrates directly with Next.js projects. You will need to configure your deployment environment by setting up the Supabase environment variables to ensure that the production environment has access to the database.

6. Additional Developer Notes

Use Git for Version Control

Regularly commit your changes and push them to a remote Git repository. This helps keep track of changes and allows you to collaborate with other developers on the project.

Branching Strategy

Use Git branches for different features or bug fixes. For example, create a new branch for adding a new vendor feature or fixing an issue, and then merge it back into the main branch once the work is complete.