Attendancetracker
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
A comprehensive attendance tracking system built with Hono, SQLite, and modern TypeScript.
- Employee Management: Add, edit, and manage employee records
- Attendance Tracking: Clock in/out functionality with timestamp tracking
- Reporting: View attendance reports and statistics
- Real-time Updates: Live attendance status updates
├── backend/
│ ├── database/
│ │ ├── migrations.ts # Database schema setup
│ │ └── queries.ts # Database query functions
│ ├── routes/
│ │ ├── employees.ts # Employee CRUD operations
│ │ ├── attendance.ts # Attendance tracking endpoints
│ │ └── reports.ts # Reporting endpoints
│ └── index.ts # Main Hono app entry point
├── frontend/
│ ├── components/
│ │ ├── App.tsx # Main application component
│ │ ├── EmployeeList.tsx # Employee management
│ │ ├── AttendanceTracker.tsx # Clock in/out interface
│ │ └── Reports.tsx # Attendance reports
│ ├── services/
│ │ └── api.ts # API service layer
│ ├── types/
│ │ └── index.ts # TypeScript interfaces
│ ├── index.html # Main HTML template
│ └── index.tsx # Frontend entry point
└── shared/
└── types.ts # Shared type definitions
GET /api/employees
- List all employeesPOST /api/employees
- Create new employeePUT /api/employees/:id
- Update employeeDELETE /api/employees/:id
- Delete employee
POST /api/attendance/clock-in
- Clock in employeePOST /api/attendance/clock-out
- Clock out employeeGET /api/attendance/status/:employeeId
- Get current statusGET /api/attendance/history/:employeeId
- Get attendance history
GET /api/reports/daily
- Daily attendance reportGET /api/reports/employee/:id
- Employee-specific report
- The backend will automatically set up the database tables on first run
- Navigate to the app to start managing employees and tracking attendance
- Use the attendance tracker to clock employees in and out
- View reports to analyze attendance patterns
- Backend: Hono (Express-like framework for Deno)
- Database: SQLite with automatic migrations
- Frontend: TypeScript with React-like components
- Styling: TailwindCSS for responsive design