FeedItForward 🍚

Welcome to the official repository for NTU SC2006 Software Engineering group project FeedItForward.

Frontend | Backend | Demo Video

FeedItForward is a community-driven initiative that connects the surplus food from local hawkers directly to families in need. It not only reduces food waste but also ensures that nutritious meals reach those most vulnerable in our society.

This project applied software engineering best practices and design patterns to ensure high reliability, performance, and extensibility for future enhancements.

Demo Video

Demo.Video.mov

Supporting Documentations

1. Software Requirements Specification
2. Code and API Documentations
3. Use Case Diagram and Descriptions
4. User Interface Mockups

Diagrams

1. App Overview Diagram
2. Use Case Diagram
3. Architecture Diagram
4. Class Diagram
5. Stereotype Class Diagram
6. Sequence Diagrams
7. Dialog Map

Table of Content

• FeedItForward 🍚
• Setup Instructions
  • Frontend
  • Backend
    • Database Seeding
• Pre-configured Users
• Documentation
• API Docs
  • API Endpoints
• App Design
  • Overview
  • Frontend
  • Backend
  • Design Patterns
  • SOLID Principles
  • Tech Stack
• External APIs
• Contributors

Setup Instructions

Frontend

1. In the /frontend directory, install the required node modules.

npm install

2. Start the application.

npm run start

And you are ready to start using the FeedItForward Frontend! The frontend application is running on http://localhost:3000/

Backend

1. In the /backend directory, create a python virtual environment and activate it.

python -m venv .venv
. .venv/Scripts/activate # The .venv activation command might differ depending on your operating system

2. Install the required packages.

pip install -r requirements.txt

3. In the /backend/app directory, start the application.

cd app
uvicorn main:app --reload

And you are ready to start using the FeedItForward Backend! The server application is running on http://127.0.0.1:8000/

Database Seeding

If you would like to seed the database with pre-configured data, please uncomment the following line in the backend/app/main.py before re-starting the application.

# app/main.py
# Uncomment this line 👇🏻
# add_event_listener_to_seed_database()

Note: Please ensure that the sql_app.db in the app directory is deleted before re-starting the application.

Pre-configured Users

Name	Role	Email	Password
Admin Jane	Admin	admin1@gmail.com	123123123
Janice	Consumer	consumer1@gmail.com	123123123
Alicia	Consumer	consumer2@gmail.com	123123123
James	Consumer	consumer3@gmail.com	123123123
Alex (A Hot Hideout)	Hawker	hawker1@gmail.com	123123123
Adam (North Spine Koufu - Cai Fan Store)	Hawker	hawker2@gmail.com	123123123
Aaron (The Crowded Bowl)	Hawker	hawker3@gmail.com	123123123
Tim	Driver	driver1@gmail.com	123123123
Thomas	Driver	driver2@gmail.com	123123123

Documentation

API Docs

The FeedItForward Backend application uses FastAPI, which comes with an in-built documentation for API routes created. You may access it via http://127.0.0.1:8000/docs#/

*Note: A total of 100 API routes are documented.

API Endpoints

The FeedItForward API Endpoints consists of 3 main category - Controller, CRUD, and Misc.

1. Controller: API endpoints for Controller specific functionalities as specified in the class diagrams designed.
2. CRUD: API endpoints for basic Create, Read, Update, and Delete Operation on classes saved in the database.
3. Misc: Other API endpoints such as file uploads and retrievals.

Please refer to the the API Docs page for the specific endpoints and the required request body and expected response.

App Design

Overview

Credits: ztjhz

Frontend

The frontend (React.js) mainly consists of the different User Interfaces (Screens), which are structured and categorized into AdminUI, ConsumerUI, DriverUI, HawkerUI, and MainUI as designed in the class diagrams. More detailed sub-screens can be found in the respective UI screen folders. They can be found in the /src/screens directory.

The /src/App.tsx is the entry point of the frontend application.

Other folders such as /components, /contexts, /data, /utils, /schemas, /hooks, and /contexts contains helper files that makes the frontend code more organized and easier to read for ease of collaboration (as recommended by the React.js framework).

Backend

• 📁 app/assets
  • Contains server assets like data files and uploads.
• 📁 app/models
  • Contains the Business Objects.
• 📁 app/services
  • Contains methods to create, read, update, and delete business objects.
• 📁 app/controllers
  • Controllers that uses the various services implemented in the app/services directory.
  • They implements the Facade Pattern by masking the more complex underlying implementation details from the frontend.
• 📁 app/routers
  • Routers that implements REST API endpoints for communication between frontend and backend. They allow the frontend to use the controllers in the backend.
  • Routers use the controllers implemented in the app/controllers directory.
• 📁 app/schemas
  • Defines all the request and response fields.
• 📁 app/factory
  • Factory design pattern implementation of the database.
• 📁 app/database.py
  • Entry point to database that will store all the business objects.
• 📁 app/websocket.py
  • Implements the Publisher-Subscriber Pattern via websockets for real-time text messaging communication between different users.

Design Patterns

1. Strategy + Factory Patterns for Database Implementation. a. Refer to backend/app/factory/database.py
2. Facade Pattern via the Controllers. a. Refer to backend/app/controllers/*.py
3. Publisher-Subscriber Pattern for real-time text messaging communication between different users (websocket). a. Refer to backend/app/websocket.py

SOLID Principles

1. Single Responsibility Principle (SRP) a. Different packages with different distinct responsibilities are created. Specific classes in each package are responsible for a specific business model or logic group.
2. Open-Closed Principle (OCP) a. The application is open to extension through the use of strategy pattern (database) as well as facade pattern (controllers).
3. Interface Segregation Principle (ISP) a. Numerous small and specific interfaces are used. b. For example, in backend/app/schemas/consumer.py, there are Consumer, ConsumerCreate, and ConsumerUpdate interfaces which are used for different purposes (Display, Creation, and Update).
4. Dependency Inversion Principle (DIP) a. High level and low level modules depends on abstractions through the use of the interfaces (backend/app/schemas and frontend/src/schemas).

Tech Stack

Frontend:

• React.js
• TypeScript
• Tailwind CSS

Backend:

• FastAPI
• Python
• MySQL

External APIs

1. Singapore's OneMap API
   1. Map (https://www.onemap.gov.sg/docs/maps/)
   2. Geocoding (https://developers.onemap.sg/commonapi/search?searchVal=639798&returnGeom=Y&getAddrDetails=Y)
2. Weather API (Live)
   1. 24-hour Weather Forecast (https://beta.data.gov.sg/datasets/d_50d2bbe678607d78d74a0fe6e8b5b6dd/view)
   2. 4-day Weather Forecast (https://beta.data.gov.sg/datasets/d_1efe4728b2dad26fd7729c5e4eff7802/view)
3. Hawker GeoJson Dataset
   1. https://beta.data.gov.sg/collections/1445/datasets/d_4a086da0a5553be1d89383cd90d07ecd/view
4. Google OAuth 2.0 API
   1. https://developers.google.com/identity/protocols/oauth2

Contributors

The following contributors have contributed to the whole Software Developement Life-cycle, including (not exhausive):

1. Ideation and refinement
2. Generation of functional and non-funtional requirements
3. Generation of Use Cases and Descriptions
4. UI/UX Mockup and Prototyping (Figma)
5. Design of Architecture Diagram, Class Diagram, Sequence Diagrams, and Dialog Map Diagram
6. Development of Application
7. Black-box and White-box Testing
8. Documentations

Name	Github Username	Role
Toh Jing Qiang	xJQx	Full-Stack
Toh Jing Hua	ztjhz	Backend
Denise Tay	denisetay8	Frontend
Minze	min-ze	Frontend
Tommy Wee	toomywee	Frontend
Pinyang	druggoat888	Frontend