HNU-TimeLetter (与她的海大时光笺) is a visual storytelling website that places galgame-style characters inside real Hainan University campus locations. Visitors open a wax-sealed envelope to reveal an interactive campus map, browse character stories pinned to campus landmarks, and explore community-submitted scene proposals on the creation board.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/HNU-himematsu/HNU-TimeLetter/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Understand the project concept, architecture overview, and how all the pieces fit together.
Quickstart
Clone the repo, configure credentials, sync data from Feishu, and run the dev server in minutes.
Architecture
Explore the Next.js App Router structure, Zustand state, Framer Motion animations, and data flow.
API Reference
Full reference for all public frontend APIs and the authenticated admin endpoints.
What’s Inside
HNU-TimeLetter is composed of four routes, each with a distinct purpose:Home — Envelope Ritual
The landing page presents an animated envelope. Clicking the wax seal opens it with a multi-step Framer Motion sequence, transitioning the viewer into the map experience.
/map — Campus Map
Desktop users get an interactive SVG map with story cards. Mobile visitors see a stamp-collector waterfall feed with a static map pop-up.
/creation — Creation Board
A sticky-note waterfall of community-submitted galgame scene proposals, backed by a Feishu Bitable table and synced via webhook or manual trigger.
/admin — Admin Panel
Password-protected dashboard for triggering Feishu data sync, viewing job history and logs, configuring the scheduler, and managing announcements.
Getting Started
Configure environment variables
Copy
.env.example to .env.local and fill in your Feishu app credentials, Aliyun OSS keys, and admin secrets. See the Environment Setup guide for every variable.Sync content from Feishu
Run
npm run sync to pull stories, locations, creation board entries, and contributors from Feishu Bitable into local JSON artifacts under src/data/.Start the dev server
Run
npm run dev and open http://localhost:3000 to see the envelope intro.The project ships without mock data. The
npm run sync step is required before the site renders any content. Make sure your Feishu app credentials are valid and the app has been added to the target Bitable.