WEB103 Project 2 - The MXTX Codex 🗡️

Submitted by: Chau Cao

About this web app: An interactive, bilingual (English/Vietnamese) directory of characters from the Mo Xiang Tong Xiu universe (MDZS, TGCF, SVSSS). The app features a custom Express.js backend API that serves data dynamically from a live Render PostgreSQL database.

Time spent: 3 hours

Required Features

The following required functionality is completed:

• The web app uses only HTML, CSS, and JavaScript without a frontend framework
• The web app is connected to a PostgreSQL database, with an appropriately structured database table for the list items
  • NOTE: Your walkthrough added to the README must include a view of your Render dashboard demonstrating that your Postgres database is available
  • NOTE: Your walkthrough added to the README must include a demonstration of your table contents. Use the psql command 'SELECT * FROM tablename;' to display your table contents.

The following optional features are implemented:

• The user can search for items by a specific attribute

The following additional features are implemented:

• Upgraded the database schema to store dedicated columns for Vietnamese translations (e.g., name_vn, sect_vn, description_vn).
• Implemented real-time frontend search that dynamically updates the DOM based on user input without reloading the page.
• Maintained an interactive English/Vietnamese language toggle that saves user preferences via localStorage and falls back gracefully if translations are missing.
• Maintained dark-fantasy aesthetic with frosted glass, custom hover animations, glowing card borders, and Vietnamese-supported Google Fonts (Cormorant Garamond).

Video Walkthrough

Here's a walkthrough of implemented required features:

https://i.imgur.com/6fHGMfD.gif

GIF created with ScreenToGif for Windows

Notes

• When transitioning from the mock data to the PostgreSQL database, I decided to fully support Vietnamese translations. This required heavily modifying the CREATE TABLE and INSERT INTO queries in my seed script to map all the new _vn fields (like courtesy_name_vn and description_vn).
• Ran into a syntax error at or near "name_vn" (PostgreSQL Error 42601) during the initial database seed. It turned out to be a missing comma in the CREATE TABLE query string. Fixing it allowed the asynchronous seed script to map all 20+ records successfully.
• Refactored the Express API to use pg (node-postgres) and secured the database credentials locally using dotenv. Implemented parameterized queries ($1) for the search feature and detailed character routes to prevent SQL injection.

License

Copyright [2026] [Chau Cao]

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.