Mini aplikasi absensi dengan Express.js backend dan React.js frontend.

fullstack/
├── express-api/        # Backend API
│   ├── server.js      # Main server file
│   ├── db.config.js   # Database configuration
│   ├── models/        # Sequelize models
│   ├── routes/        # API routes
│   └── utils/         # Utility functions
└── react-client/      # Frontend React app
    ├── src/
    ├── public/
    └── build/         # Production build

• Node.js - Runtime environment
• Express.js - Web framework
• Sequelize - ORM for database
• MySQL - Database
• bcrypt - Password hashing
• CORS - Cross-origin resource sharing

• React.js - Frontend framework
• React Bootstrap - UI components
• Axios - HTTP client
• React Router - Client-side routing
• Typewriter Effect - Animation library

• Node.js (v14 or higher)
• MySQL database
• npm or yarn

cd express-api
npm install

1. Create .env file in express-api/ folder:

DB_NAME=absensi
DB_USER=your_username
DB_PASSWORD=your_password
DB_HOST=localhost
DB_DIALECT=mysql
PORT=3200

2. Start the backend server:

npm run api

Backend will run on http://localhost:3200

cd react-client
npm install
npm start

Frontend will run on http://localhost:3000

• nip (INTEGER, UNIQUE) - Employee ID
• nama (STRING) - Full name
• password (STRING) - Hashed password

• id (INTEGER, PRIMARY KEY, AUTO_INCREMENT)
• users_nip (INTEGER, FOREIGN KEY) - Reference to Users table
• status (STRING) - 'in' for check-in, 'out' for check-out
• createdAt (DATETIME) - Timestamp when record was created
• updatedAt (DATETIME) - Timestamp when record was last updated

• GET /users - Get all users
• POST /users - Create new user (register)
• PUT /users - Update user profile
• POST /users/login - User login

• GET /absensi - Get all attendance records (admin)
• POST /absensi/checkin - Check-in attendance
• POST /absensi/checkout - Check-out attendance
• GET /absensi/user/:nip - Get attendance records for specific user

POST /users
Content-Type: application/json

{
    "nip": "12345",
    "nama": "John Doe",
    "password": "mypassword"
}

POST /users/login
Content-Type: application/json

{
    "nip": "12345",
    "password": "mypassword"
}

PUT /users
Content-Type: application/json

{
    "nip": "12345",
    "nama": "John Doe Updated",
    "password": "current_password",
    "passwordBaru": "new_password"
}

POST /absensi/checkin
Content-Type: application/json

{
    "nip": "12345"
}

POST /absensi/checkout
Content-Type: application/json

{
    "nip": "12345"
}

GET /absensi/user/12345

Response:

{
    "absensi": [
        {
            "id": 1,
            "users_nip": "12345",
            "status": "in",
            "createdAt": "2025-01-15T08:30:00.000Z",
            "updatedAt": "2025-01-15T08:30:00.000Z"
        }
    ],
    "count": 1,
    "metadata": "Absensi data for user 12345"
}

• Days: Monday to Friday only
• Time: 8:00 AM to 5:00 PM (17:00)
• Timezone: Local server time

• Maximum 1 check-in per day
• Maximum 1 check-out per day
• Must check-in before check-out

• NIP: Required, numeric only, minimum 4 digits
• Password: Required for login and registration
• Name: Required for registration and profile updates

The API returns consistent error responses:

{
    "error": "Error message description"
}

Common error codes:

• 400 - Bad Request (validation errors)
• 404 - Not Found (user not found)
• 500 - Internal Server Error

• / - Home page (landing page)
• /login - Login page (redirects if already logged in)
• /register - Registration page
• /dashboard - Main dashboard (requires authentication)
• /dashboard/profile - Edit profile page
• * - 404 Not Found page

• User registration with encrypted passwords
• Secure login system
• User-specific data access (users can only see their own attendance)

• Working Hours Validation: Only allows check-in/out during business hours (8 AM - 5 PM, Monday-Friday)
• Daily Limits: Prevents multiple check-ins or check-outs on the same day
• Sequential Validation: Users must check-in before they can check-out
• Real-time Status: Dashboard shows current day's attendance status

• Modern UI: Responsive design with gradient themes
• Error Handling: Comprehensive error messages and validation
• Auto-redirect: Logged-in users are redirected from login page
• Date Formatting: User-friendly date and time display
• 404 Page: Custom not found page

• Input Validation: All API endpoints validate required fields
• Error Handling: Try-catch blocks for all async operations
• Environment Variables: Secure database configuration
• Password Hashing: bcrypt for password encryption