Wrapster

Wrapster is a packaging-tracking web application that helps warehouse and logistics teams scan waybills and product barcodes to track packaging operations, generate client reports, and monitor packing/printing activity.

Key Features

• Scan waybills to capture shipment metadata and status
• Scan product barcodes to record packed items and quantities
• Track counts of printed waybills and packed products
• Export reports as PDF or Excel for client delivery
• Optional audit logging with configurable retention
• Appwrite backend integration and serverless function triggers
• Database migration and seeding scripts
• Unit and end-to-end test suites (Vitest & Playwright)

Tech stack

• Frontend: React + Vite + Tailwind CSS
• Backend / Services: Appwrite (database, functions, storage), Trigger.dev for background jobs
• PDF/Excel export: pdfkit, jspdf, xlsx
• Testing: Playwright (e2e), Vitest (unit)
• Language: TypeScript

Getting started

Prerequisites

• Node.js (recommended LTS)
• An Appwrite project (endpoint, project ID, database/bucket IDs)
• Optional: Trigger.dev account for background jobs

Install dependencies:

npm install

Run development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

Environment / Configuration

Copy and fill the example env file:

• Rename .env.example to .env or create a .env from it and provide values.

Important env variables (from .env.example):

• VITE_APPWRITE_ENDPOINT — Appwrite endpoint (e.g., https://sgp.cloud.appwrite.io/v1)
• VITE_APPWRITE_PROJECT_ID — Appwrite project ID
• VITE_APPWRITE_DATABASE_ID — Database ID used by app
• VITE_APPWRITE_BUCKET_ID — Storage bucket ID for reports
• VITE_APPWRITE_QUEUE_FUNCTION_ID — Function ID for queued jobs
• VITE_ALLOWED_HOSTS — Host whitelist
• APPWRITE_API_KEY — Server API key (keep secret)
• TRIGGER_PROJECT_ID — trigger.dev project id (if using)

Audit logging:

• VITE_AUDIT_LOG_ENABLED — true/false
• VITE_AUDIT_LOG_RETENTION_DAYS — retention in days

Useful npm scripts

• npm run dev — start dev server (Vite)
• npm run build — TypeScript build + Vite build
• npm run preview — preview built site
• npm run lint — run ESLint
• npm run test — run unit tests (Vitest)
• npm run test:e2e — run Playwright e2e tests
• npm run db:migrate — run DB migrations (scripts/migrate-database.ts)
• npm run db:seed / db:seed:packaging — populate sample data
• npm run trigger:deploy / trigger:deploy:dev / trigger:deploy:prod — deploy trigger.dev functions
• npm run trigger:dev — start local trigger.dev dev mode

Deployment

• The repo includes a vercel.json and is Vercel-ready.
• Ensure environment variables are configured in the chosen hosting provider (Vercel, Netlify, or self-hosted).
• If using Appwrite functions, deploy and configure function IDs in Appwrite and update env values.

Folder layout (high-level)

• src/ — application source code (React + TypeScript)
• public/ — static assets
• functions/ — Appwrite function code
• scripts/ — database migration/seed scripts
• e2e/ — end-to-end tests
• docs/ — project documentation (if present)

Contributing

• Fork -> branch -> PR
• Run linters and tests before submitting
• Use existing scripts to seed data and run tests locally

License

ISC

Contact

For questions or support, open an issue or contact the repository owner via their GitHub profile.