🎪 NP Open House 2026 — Group 2 App

A full-stack web application built for Ngee Ann Polytechnic's Open House 2026, featuring an AI-powered image background remover and a modern, responsive frontend.

About

This project was developed as part of NP Overflow's Open House 2026 initiative. It is a monorepo containing a Next.js frontend and a FastAPI backend, working together to deliver a seamless phototaking experience — including an AI-powered background removal feature.

On top of that, users can opt to add stickers to their photostrips to personalise them.

🛠️ Tech Stack

Layer	Technology
Frontend	Next.js (TypeScript), React
Backend	FastAPI (Python 3.9+)
API Proxy	Next.js rewrites (`/api/*`)
Styling	Geist Font (via Vercel)

📁 Project Structure

OH-Group2-2026/
├── frontend/   # Next.js app (TypeScript)
└── backend/    # FastAPI server (Python)

✨ Features

🖼️ AI Background Removal — powered by a FastAPI endpoint (/api/remove-bg)
⚡ Seamless API Proxy — Next.js transparently forwards /api/* requests to the FastAPI backend
🔄 Hot Reload — both frontend and backend support live development reloading
📦 Monorepo Structure — frontend and backend co-located for easy development

🚀 Getting Started

GitHub README

np-overflow/OH-Group2-2026

OH-Group2-2026 Monorepo Guide

This project houses a FastAPI backend (backend/) and a Next.js frontend (frontend/). Follow the steps below to boot both services locally and to call the backend APIs via the frontend.

Prerequisites

Python 3.9 or newer (see backend/README.md for detailed venv steps)
Node.js 18+ with npm (installed automatically with npx create-next-app)

1. Install Dependencies

Backend

cd backend
python3 -m venv .venv
source .venv/bin/activate  # .venv\Scripts\Activate.ps1 on Windows
pip install --upgrade pip
pip install -r requirements.txt

Leave this terminal open with the virtual environment activated.

Frontend

Open a second terminal:

cd frontend
npm install

2. Run Both Servers Concurrently

Keep two terminals (or use panes/tabs):

Terminal A – FastAPI

cd backend
source .venv/bin/activate
fastapi dev main.py

This exposes the API at http://127.0.0.1:8000.

Terminal B – Next.js dev server

cd frontend
npm run dev

Next.js will serve the app (default http://localhost:3000). The next.config.ts rewrite forwards any request matching /api/* to the FastAPI server.

3. Requesting APIs From The App

From the browser or frontend code: call relative URLs like /api/health or /api/remove-bg. Next.js proxies these to http://127.0.0.1:8000/health and http://127.0.0.1:8000/remove-bg, so no extra configuration is needed in React components.
Direct testing (e.g., curl/Postman): hit the FastAPI server directly at http://127.0.0.1:8000/<endpoint> while the backend is running.

If you add new FastAPI routes, they automatically become available to the frontend via the /api/* proxy. Restart the FastAPI server after making dependency or config changes.

Loading README…

OH-Group2-2026 Monorepo Guide

This project houses a FastAPI backend (backend/) and a Next.js frontend (frontend/). Follow the steps below to boot both services locally and to call the backend APIs via the frontend.

Prerequisites

Python 3.9 or newer (see backend/README.md for detailed venv steps)
Node.js 18+ with npm (installed automatically with npx create-next-app)

1. Install Dependencies

Backend

cd backend
python3 -m venv .venv
source .venv/bin/activate  # .venv\Scripts\Activate.ps1 on Windows
pip install --upgrade pip
pip install -r requirements.txt

Leave this terminal open with the virtual environment activated.

Frontend

Open a second terminal:

cd frontend
npm install

2. Run Both Servers Concurrently

Keep two terminals (or use panes/tabs):

Terminal A – FastAPI

cd backend
source .venv/bin/activate
fastapi dev main.py

This exposes the API at http://127.0.0.1:8000.

Terminal B – Next.js dev server

cd frontend
npm run dev

Next.js will serve the app (default http://localhost:3000). The next.config.ts rewrite forwards any request matching /api/* to the FastAPI server.

3. Requesting APIs From The App

From the browser or frontend code: call relative URLs like /api/health or /api/remove-bg. Next.js proxies these to http://127.0.0.1:8000/health and http://127.0.0.1:8000/remove-bg, so no extra configuration is needed in React components.
Direct testing (e.g., curl/Postman): hit the FastAPI server directly at http://127.0.0.1:8000/<endpoint> while the backend is running.

If you add new FastAPI routes, they automatically become available to the frontend via the /api/* proxy. Restart the FastAPI server after making dependency or config changes.

Digital Photobooth

🎪 NP Open House 2026 — Group 2 App

About

🛠️ Tech Stack

📁 Project Structure

✨ Features

🚀 Getting Started

OH-Group2-2026 Monorepo Guide

Prerequisites

1. Install Dependencies

Backend

Frontend

2. Run Both Servers Concurrently

3. Requesting APIs From The App

Repository Specs

Languages

OH-Group2-2026 Monorepo Guide

Prerequisites

1. Install Dependencies

Backend

Frontend

2. Run Both Servers Concurrently

3. Requesting APIs From The App