Campus Plate Mate

Table of contents

• Overview
• Goals
• User Guide
• Community Feedback
• Developer Guide
• Project Boards
• Team

Overview

Campus Plate Mate is a web application that provides pages to share food and claim rewards. It illustrates various technologies useful to ICS software engineering students, including:

• Next.js which enables the creation of web applications with React components.
• React for component-based UI implementation and routing.
• React Bootstrap CSS Framework for UI design.

Goals

As a team, we plan on creating a website where users can offer up or exchange leftover or unused foods within the UH Manoa area. We want to utilize all skills learned while taking our software engineering class like creating data bases, programming pages for user interaction, and using UI and CSS tools for our website’s design.

User Guide

Below you can find a guide through our website:

Landing Page and Footer

The first page you see when you launch the application. Here, you will see a brief introduction to the website and its functionality.

On our footer, you can send us feedback on what to improve on!

Sign In/Sign up Slider and Sign Out Page

Sign in page and Sign up page:

This is a slider form where you can choose to sign in or sign up (Create Account).

Sign out page:

Add Food Page

From left to right, enter your Name, name of the Food, Image of the food, the Quantity you are giving away, the Location of pick up, the Best Before date, and a Description to create a post which will appear on the dashboard.

Dashboard

This is where users post the food they want to give away. Only owners of the posts are able to edit or delete a post.

Rewards Page

In our rewards page, you can redeem your points (which we unfortunately did not implement at the time of writing this) for rewards. You can choose the amount you want to order.

Profile Page

Admin Page - Feedback

The Admin can view the feedback submitted by the users here.

Community Feedback

We talked to five members of the UH community and had told us about the following:

• Get the claim button to work
• Add a navbar
• Move the location of the button when posting a food

Developer Guide

• First, install GitHub Desktop.
• Second, go to the Campus Plate Mate repo, click the “Code” dropdown and clone the digits repo (i.e. using the “Open with GitHub Desktop” option).
• Third, cd into the app/ directory of your local copy of *Campus Plate Mate**, and install third party libraries via cmd or PowerShell:

$ npm install

• Fourth, once the libraries are installed, you can run the application by invoking the following:

$ npm run dev

• Lastly, navigate to http://localhost:3000 to see the application running.

View Our Deployment

Take a look at our project’s deployment through Vercel.

Project Boards

View the tasks we’ve completed for the project thus far for Milestone 1, Milestone 2 and Milestone 3.

Team

Campus Plate Mate is designed, implemented, and maintained by Ka’ili Benavente, Kimi Qi, Jaylin Morimoto, Ruhi Pirnia, Naydel Espiritu, and Lou Rae Robles.

See our Team Contract.