PackCheck

• 

  Required paths and packaging issues

• 

  Reviewing contents before packing

• 

  Verified ZIP ready to download

Inspiration

Finishing an assignment and preparing its submission package are separate tasks. A report may still have a draft filename, a required README may be missing, or system metadata may slip into the archive.

PackCheck grew from the idea of making that final packaging step visible and editable. Research into existing submission checkers and browser ZIP tools helped define its focus: a small workspace where students can arrange their files against explicit requirements before downloading a ZIP.

What it does

PackCheck prepares a real ZIP from local files or a folder. Users enter the archive name and optional required paths and size limit, then review exactly what will go into the package.

Missing requirements offer a file selector and an apply button for fixing the output path. Duplicate names, unsafe paths, and file/folder conflicts block building. Common system metadata stays excluded by default, with inclusion under the user's control.

Text and image previews support a content review. Optional settings add an outer folder or change compression. Before download, PackCheck reopens the finished ZIP and compares every included file byte for byte with its source.

Files remain in the browser tab. There are no accounts, content uploads, analytics, or persistent browser storage. The interface supports English and Chinese.

The prototype accepts up to 300 files and 20 MiB of imported data. It checks package requirements and basic format signatures. Students still review their assignment contents and submit the downloaded ZIP themselves.

How we built it

The interface uses HTML, CSS, and JavaScript. Validation rules live separately from the UI so they can be tested directly. ZIP compression runs in a Web Worker using the existing MIT-licensed fflate library. The application reopens the output archive to verify its paths and contents.

GitHub Pages hosts the static application. Playwright drives headless Firefox through file imports, previews, corrections, and downloads. Tests unzip downloaded archives and compare their bytes.

The interface, validation logic, worker integration, and workflow tests are project work. fflate and the development tools are existing dependencies. The demo uses an existing demo-recorder tool with project-specific scenes. Dependencies and prior art are credited in the repository.

Challenges we ran into

Archive paths needed more care than simple filename validation. Case variants can collide when extracted, and a file can conflict with a directory at the same path.

Keeping source files and output paths understandable was another challenge. Original names remain visible, and every package change invalidates the previously generated ZIP. HTML previews also needed to display text without executing uploaded markup.

Accomplishments that we're proud of

The deployed prototype completes the file-to-ZIP workflow, creates downloadable archives, and verifies their contents while leaving source files unchanged.

Regression tests cover normal use and errors, including duplicate paths, oversized imports, cancellation, and undo. Automated accessibility checks cover three interface states.

What we learned

The archive itself is the result that matters. Checking downloaded ZIPs reveals risks that screenshots and success messages can miss.

Iteration also reinforced the value of concrete actions: selecting a file to satisfy a missing path is more useful than displaying a warning alone. Explicit checks make their limits easier to understand.

What's next for PackCheck

The next step is to test PackCheck against real student assignment requirements and observe where people still hesitate or make mistakes. It has not yet been validated in a student study.

Reusable assignment templates, imported and exported as local files, are a possible improvement. The priority is making repeated submissions easier while preserving local processing and user control.

Built With

• css3
• fflate
• github
• html5
• javascript
• playwright
• web-workers