Project Build

System architecture and contribution record.

This page uses the architecture PDF and the local System-Architecture-text document as the implementation explanation, then preserves the contribution table for coursework completion.

Artifact: Architecture PDFSource: System-Architecture-textRecord: Contribution table

System Architecture

The diagram becomes an interactive architecture reader.

System Layers And User Entry Points

The system adopts a frontend-only static multi-page architecture that organises the application into clearly defined layers: User, Presentation, Logic, Data/State, and External Services/Deployment. Two primary user groups, visitors and residents, access the system through five main interfaces: Homepage, Interactive Map, Photo Wall, Notice Board, and Smart Agent.

You can click on any layer to view the detailed introduction of that layer.

System Architecture diagram — Click a layer label to read the related architecture text.

Implementation Summary

Overall, this architecture provides a lightweight yet functional implementation model, enabling interactive user experiences within a static deployment environment while maintaining a clear separation between interface, logic, data, and service dependencies.

Source: System-Architecture-text.docx

Open architecture PDF in new tab

High-Fi Prototype

Published high-fidelity Maple Bridge prototype.

This link provides access to the implemented high-fidelity prototype for the Maple Bridge CPT208 project.

Prototype Entry

Published interactive implementation

Use this entry to inspect the final high-fidelity prototype and compare the implemented experience with the design evidence shown in this portfolio.

Open High-Fi Prototype

Personal Contribution Table

The contribution distribution is filled from the uploaded individual contribution spreadsheet.

Contribution Area	Shuobai Chen	Zhenxi Chen	Antian Sun	Jiahao Qi
Requirements / User Research	40	30	20	10
Information Architecture / Feature Planning	40	30	20	10
Prototype Design	30	30	20	20
UI / Visual Design	30	20	30	20
Front-end Development / Code	20	30	30	20
Content Production	20	10	30	40
Evaluation / Testing	10	20	30	40
Iteration and Improvement	10	30	20	40
Project Coordination / Documentation	20	20	30	30
Presentation / Poster / Demo Preparation	30	30	20	20

Source: individual contribution.xlsx

System architecture and contribution record.

The diagram becomes an interactive architecture reader.

System Layers And User Entry Points

Implementation Summary

Presentation Layer

Data And State Layer

External Services

Logic Layer

Published high-fidelity Maple Bridge prototype.

Published interactive implementation

The contribution distribution is filled from the uploaded individual contribution spreadsheet.