Reading and writing portfolio web app for students
Jake Tae-moon Jo · Engineering lead · https://jake-jo-portfolio.vercel.app/en/work/academy-portfolio/
Moved a received single-file app into a deployable Vite project in one day, and added a teacher-side student registration screen and sign-out.
- received app to deployable project
- 1 day
- first commit to teacher screen
- About 7 h
Problem and context
The teacher wanted to build up students' reading records and written work as portfolio assets. The design had four principles: centre on the student's own assets; no comparison between students, public sharing or rankings; the same experience on phone, tablet and laptop; and AI only assists the teacher's work and never writes a student's sentences for them.
The app I received worked but had no deployment setup. Registering a student also meant the teacher running a function by hand in the Google script editor.
App structure
A React app in the browser calls the Google script web app that came with the job, the data lives in three Google Sheets, and the part I changed is the app side.
Click a node, or Tab to it and press Enter, to highlight its note. Dashed boxes are external systems.
- Student screens → React app
- Teacher registration → React app
- React app → Google script web app: action calls
- Google script web app → 3 Google Sheets
Node notes
- Six screens. From home the student sees statistics on books read and pieces written and the latest records, then reading and writing lists, the write and edit forms, and the detail view. Grade sets a basic, intermediate or advanced level automatically, and each level has its own forms.
- The screen added in this job. The teacher registers a student by name and grade and can register several in a row.
- The received 397-line single-file app was moved into a Vite project. Runtime dependencies are two: react and react-dom. No new server or database was built.
- The received Google script was used unchanged. Seven actions handle reading, creating, saving and deleting.
- Three sheets hold the data: students, reading and writing.
What I built
- Organised the received single-file app into a Vite project in a deployable setup, and configured Vercel auto-deploy.
- Improved the loading dialog and time display, and replaced the browser's default confirm and alert boxes with the app's own confirmation dialogs in 4 places.
1 more
- Added a teacher-side student registration screen. The teacher registers a student by name and grade and can register several in a row.
2 more
- Added sign-out. The teacher asked for it to happen in one step, without a confirmation popup.
- Wrote an improvement-candidates document and a work log. The candidates carry priorities and effort estimates with a 3x buffer on effort.
Key decisions
No new server or database: keep the received Google Sheets and script, deploy only the front endDecision I built no new server or database; I kept the received sheets and script as they were and deployed only the front end.Result The Google script was never changed after the first commit, and the app code grew from 397 to 815 lines.
- Problem
- The received app's back end was an already-running Google Sheets file and Google script. To deploy, I had to decide whether to keep it or build a new one.
- Decision
- I built no new server or database; I kept the received sheets and script as they were and deployed only the front end. The reasons the work log gives are that a working sheet already existed and that it could be deployed without extra setup such as environment variables. No other option is recorded as compared. When adding features, I fixed the design principles (no comparison or rankings, AI never writes a student's sentences) as the test, in the spec and in the improvement-candidates document.
- Result
- The Google script was never changed after the first commit, and the app code grew from 397 to 815 lines.
Project facts
- Period
- May 2026 (one day)
- Role
- One developer · AI co-authored
- Team
- Me alone (all 14 commits carry an AI co-author mark)
- Platforms
- Web app (student screens + teacher registration screen)
- Stack
- React 18 · Vite 5 · Google Apps Script · Google Sheets · Vercel
- Context
- A web app for a teacher at an overseas educational institution who wanted to build up students' reading and writing records as portfolios
Results
In one day I turned the received app into a deployable project and added a teacher registration screen and sign-out.
- Moved the received single-file app into a deployable Vite project in one day, added the teacher registration screen and sign-out, and pushed it to a repository.
- The back end is the received Google script, used as it was.
1 more result
- There are no test files, runner or CI. User numbers and operating records are not in the repository, so none are given.
No student names, writing or codes, and no screen captures, are shown. The deployment setup is done; the repository holds no live address or uptime record.
One day of work
On May 12, 2026 the app was moved into a deployable project, and about 7 hours later the teacher registration screen and sign-out went up.
- first commit to teacher screen
- About 7 h
- Vite project set up, app ported
12:11
- Loading dialog, time display
12:30
- Browser default popups replaced
12:36
- Improvement candidates document
13:31 · AI automation stage design
- Sign-out, teacher registration screen
19:07