QuickMark

QuickMark is a lightweight HRMS for small teams, built with Next.js, Convex, and Tailwind CSS.

What it does

• Track daily attendance (present / late / absent), with a one-click "mark all present" for admins
• Browse a month calendar with attendance, holiday, and time-off views
• Request, approve, and reject time off, with per-member leave balances
• Manage public and company holidays, including yearly-recurring ones
• Manage team members, departments, and admin/member permissions
• Configure which days count as the weekend
• View history by day, week, or month and export it to CSV
• Sync everything in real time through Convex

Roles

Each organization has admins and members:

• Admins see every member's data and get the Team and Settings tabs. They can mark anyone's attendance, approve time off, and manage holidays.
• Members only see their own attendance and time-off records.

An organization always keeps at least one admin — the last one can't be removed or demoted.

Note: members are chosen from a picker rather than authenticated. Add real auth before putting this in front of untrusted users.

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 components
• src/lib — Zustand store and shared Tailwind class helpers
• convex — backend functions, schema, and generated types

Styling

Tailwind v4, configured entirely in CSS via @theme in src/app/globals.css — there is no tailwind.config.ts. Components are written with plain Tailwind classes; the repeated button/input styles live as exported strings in src/lib/utils.ts.

The UI is hand-rolled rather than component-library driven. components.json is kept so npx shadcn@latest add <component> still works if you want to pull in a specific primitive later.

Notes

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