QuickMark

QuickMark is a minimal attendance tracker built with Next.js, Convex, Tailwind CSS, and shadcn UI components.

What it does

• Track team attendance
• View history by day, week, or month
• Choose dates with a calendar picker
• Export attendance records to CSV
• Use Convex for backend data sync

Getting started

1. Install dependencies:

npm install

2. If you have a Convex deployment, copy .env.example to .env.local and add your values:

NEXT_PUBLIC_CONVEX_URL=https://<your-convex-deployment>.convex.cloud
CONVEX_DEPLOYMENT=prod:<your-deployment-slug>
CONVEX_DEPLOY_KEY=<your-deploy-key>
NEXT_PUBLIC_CONVEX_SITE_URL=https://<your-convex-site>.convex.site

3. Start development:

npm run dev

This starts the Next.js frontend and the Convex backend together.

Scripts

• npm run dev — start both frontend and Convex backend in development
• npm run dev:frontend — start only the Next.js frontend
• npm run dev:backend — start only the Convex backend
• npm run convex — run the Convex backend locally
• npm run build — build the Next.js app for production
• npm run start — run the production build
• npm run lint — lint the repository

Deployment

For production, build the frontend and run it with:

npm run build
npm run start

Deploy the Convex backend separately with:

npx convex deploy

CONVEX_DEPLOY_KEY and CONVEX_DEPLOYMENT are only required when deploying Convex.

Project layout

• src/app — app pages and layout
• src/components — app-specific components
• src/components/ui — shared UI primitives
• convex — backend functions, schema, and generated types

Notes

• Use npm for package management.
• The app is designed for local development with Convex, but can also connect to a deployed Convex instance.