Skip to content

l0stplains/nimonspedia

BranchesTags

Repository files navigation

Nimonspedia

Tugas Besar IF3310 Web Based Development

Nimonspedia Banner

Releases · Project Specifications

Table of Contents

K02-03

Awesome people behind this project

NIM Name GitHub
13523002 Refki Alfarizi
13523062 Aliya Husna Fayyaza
13523078 Anella Utari Gunadi

About

This repository is the capstone project for the IF3310 Web Based Development course (2025) at Institut Teknologi Bandung. It was developed in two milestones: Milestone 1 implemented the core marketplace using plain PHP on the server and vanilla JavaScript/HTML/CSS on the client (Docker-ready), while Milestone 2 extended the system with a modern React single-page application, real-time features via WebSocket/Node.js for auctions and chat, and an administration system. The React SPA, Node.js backend, and PHP are all orchestrated behind Nginx, so users can access the entire application through the Nginx entrypoint.

Requirements

  • Docker
  • Docker Compose
  • Git
  • Make (optional)

Installation

  1. Clone this repository

    git clone https://github.com/Labpro-22/milestone-1-tugas-besar-if-3110-web-based-development-k02-03.git

  2. .env

    Create a .env by copying from .env.example and fill it in project root. Example:

    APP_ENV=dev
APP_PORT=8080
ADMINER_PORT=8081

POSTGRES_USER=postgres
POSTGRES_PASSWORD=semoga_wbd_wbd_ini_selesai
POSTGRES_DB=nimonspedia
POSTGRES_PORT=5433

APP_URL=http://localhost:${APP_PORT}
DB_DSN=pgsql:host=db;port=5432;dbname=${POSTGRES_DB}
DB_USER=${POSTGRES_USER}
DB_PASS=${POSTGRES_PASSWORD}

JWT_SECRET=semoga_wbd_wbd_ini_selesai

UPLOAD_MAX_MB=2
POST_MAX_MB=4

ADMIN_EMAIL=admin@nimon.local
ADMIN_PASSWORD=admin123
ADMIN_NAME=Admin

VAPID_PUBLIC_KEY:generate
VAPID_PRIVATE_KEY:generate
VAPID_EMAIL:mailto:admin@nimon.local

Note

Use npx web-push generate-vapid-keys to get VAPID keys

  1. Build Docker container

    docker-compose build

How to Run

Get the App Running

  1. Run

    # from project root
make up

    OR

    docker compose up -d --build
    • App (Nginx) default: http://localhost:8080 (APP_PORT defaults to 8080)
    • Adminer default: http://localhost:8081 (ADMINER_PORT defaults to 8081)
    • Postgres on host: port 5433 → container 5432 (config: POSTGRES_PORT:-5433)

  2. Open the app and db panel

    App:    http://localhost:8080
Adminer: http://localhost:8081

    • Adminer connection example:

      • System / Server: db (or leave as default)
      • Username: postgres (or ${POSTGRES_USER})
      • Password: secret (or ${POSTGRES_PASSWORD})
      • Database: nimonspedia (or ${POSTGRES_DB})

Useful Commands

See Makefile for list of useful commands to get started or developing.

Screenshots

Register Page

Register Page

Register Page Lighthouse Result

Login Page

Login Page

Login Page Lighthouse Result

Product Discovery Page

Product Discovery Page For Guest

Product Discovery Page For Buyer

Product Discovery Page Lighthouse

Product Detail

Product Detail Page For Guest

Product Detail Page For Buyer (1)

Product Detail Page For Buyer (2)

Product Detail Page Lighthouse

Store Detail

Store Detail Page For Guest

Store Detail Page For Buyer

Store Detail Page Lighthouse

Shopping Cart Page

Shopping Cart Page 1

Shopping Cart Page 2

Shopping Cart Page 3

Shopping Cart Page Lighthouse

Checkout Page

Checkout Page 1

Checkout Page 2

Checkout Page 3

Checkout Page 4

Checkout Page Lighthouse

Order History Page

Order History Page 1

Order History Page 2

Order History Page 3

Order History Page Lighthouse

Top Up Modal

Top Up Modal 1

Top Up Modal 2

Top Up Modal 3

Profile Page

Profile Page 1

Profile Page 2

Profile Page 3

Profile Page Lighthouse

Change Password Page

Change Password Page 1

Change Password Page 2

Change Password Page 3

Change Password Page 4

Change Password Page Lighthouse

Seller Dashboard Page

Seller Dashboard Page 1

Seller Dashboard Page 2 (edit store information)

Seller Dashboard Page 3 (data export)

Seller Dashboard Page Lighthouse Result

Product Management Page

Product Management Page 1

Product Management Page 2 (delete product)

Product Management Page 3 (with auction)

Add Product Page

Add Product Page 1 (basic information)

Add Product Page 2 (product detail)

Add Product Page 3 (selling information)

p align="center">

Add Product Page Lighthouse Result

Edit Product Page

Edit Product Page

p align="center">

Edit Product Page Lighthouse Result

Order Management Page

Order Management Page 1

Order Management Page 2 (status selection)

Seller Chat Page

Seller Chat Page 1 (chat list)

Seller Chat Page 2 (chat room)

Seller Chat Page Lighthouse Result

Buyer Chat Page

Buyer Chat Page 1 (chat list)

Buyer Chat Page 2 (chat room)

Seller Chat Page Lighthouse Result

Auction List Buyer

Auction List

Auction List Lighthouse

Auction Detail Buyer

Auction Detail

Auction Detail Lighthouse

Auction Detail Seller

Auction Detail Seller 1

Auction Detail Seller 2

Auction Seller

Auction Seller Dashboard

Auction Seller Dashboard Lighthouse

Auction Form

Auction Form

Auction Form Lighthouse

Admin Login Page

Admin Login Page 1

Admin Login Page 3

Admin Login Page 3

Admin Login Page Lighthouse

Admin Dashboard Page

Admin Dashboard Page 1

Admin Dashboard Page 3

Admin Dashboard Page 3

Admin Dashboard Page Lighthouse

Disable Chat Flag (Global)

Disable Chat Flag Global 1

Disable Chat Flag Global 2

Disable Chat Flag Global 3

Disable Chat Flag Global 4

Disable Chat Flag Global 5

Disable Checkout Flag

Disable Checkout Flag 1

Disable Checkout Flag 2

Disable Checkout Flag 3

Disable Auction Flag

Disable Auction Flag 1

Disable Auction Flag 2

Disable Auction Flag 3

Task Assignment

BANYAK 😭

1st Milestone

Feature Assigned To
Client-side
Login 13523062
Register 13523002, 13523062
Product Discovery 13523078
Detail Product 13523078
Detail Store 13523078
Shopping Cart 13523078
Checkout 13523078
Order History 13523078
Profile 13523078
Product Management 13523062
Add Product 13523062
Edit Product 13523062
Seller Dashboard 13523062
Order Management 13523062
Server-side
System Configuration 13523002
Routing and Abstraction 13523002
Login 13523002
Register 13523002
Product Discovery 13523078
Detail Product 13523078
Detail Store 13523078
Shopping Cart 13523002
Checkout 13523002
Order History 13523002
Profile 13523002, 13523078
Product Management 13523062
Add Product 13523062
Edit Product 13523062
Seller Dashboard 13523062
Order Management 13523002
BONUS
All Responsive Web Design 13523002, 13523062, 13523078
Tokopedia-like UI 13523002, 13523062, 13523078
Data Export 13523062
Google Lighthouse 13523002, 13523062, 13523078

2nd Milestone

Feature Assigned To
Client-side
Buyer Chat Page 13523062
Seller Chat Page 13523062
Push Notification 13523062
Admin Login Page 13523078
Admin Dashboard Page 13523078
Auction List Page 13523002
Auction Detail Page 13523002
Auction Seller Dashboard Page 13523002
Server-side
Setup 13523002
Buyer Chat Page 13523062
Seller Chat Page 13523062
Push Notification 13523062
Admin Login Page 13523078
Admin Dashboard Page 13523078
Feature Flags 13523078
Auction List Page 13523002
Auction Detail Page 13523002
Auction Seller Dashboard Page 13523002
BONUS
All Responsive Web Design 13523002, 13523062, 13523078
Tokopedia-like UI 13523002, 13523062, 13523078
Google Lighthouse 13523002, 13523062, 13523078

Acknowledgements

Grateful acknowledgment to:

  • Our Course Assistants, for preparing a very detailed specification and providing really fast response in the QnA.
  • Ir. Yudistira Dwi Wardhana Asnar, S.T, Ph.D., for approving deadline extensions.
  • Team members, for always being available, working on assigned tasks, and not ngilang.
  • Bukalapak, for providing a 24 hour available comfy room for me to work, sleep, and eat.


About

Tugas Besar IF3310 Web Based Development

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Contributors

Languages