oxy86 / attendance

A demo application that manages employees’ attendance, written in Next.js, with Prisma and Fastify. Needs Postgres setup on your server.

This is a Next.js project bootstrapped with create-next-app. It uses Prisma to manage db connectivity and a custom Fastify server. Sessions are handled by iron-session. Note: You need to have PostgreSQL installed on your server/machine.

Before running the app

Step 1.

Create a db and a user in your local Postgres installation. Connect to postgres:

sudo -u postgres psql

Then create then new db and a user with privileges on it (change the YOUR_DB_ to your own):

CREATE DATABASE YOUR_DB_NAME;

CREATE USER YOUR_DB_USER WITH ENCRYPTED PASSWORD 'YOUR_DB_PASSWORD';

GRANT ALL PRIVILEGES ON DATABASE YOUR_DB_NAME TO YOUR_DB_USER;

\c YOUR_DB_NAME

The db is empty. Tables will be created on Step 3. Issue quit to exit the postgres terminal.

Step 2.

Then, create a file .env inside the project root with contents like these:

# Your database URL with your own db name, db user and her password:
DATABASE_URL="postgresql://YOUR_DB_USER:YOUR_DB_PASSWORD@localhost:5432/YOUR_DB_NAME?schema=public"
# This is used by iron-session (see lib/session.js). It should be a string of at least 32 characters.
SESSION_PASSWORD=YOUSESSIONPASSWORDHERE1234567890USESOMETHINGRANDOMPLEASE

Step 3.

The DB schema (the tables of the database) are already defined in the file prisma/schema.prisma. To actually create these tables in the Postgres db, run the following command:

npx prisma db push

Step 4

Finally, you need to define some users in the DB using Prisma Studio. To start Prisma Studio use:

npx prisma studio 

Prisma Studio will run on http://localhost:5555.

Open the Prisma Studio page, and select the User model to create a database user with an ADMIN role and some users with an EMPLOYEE role. To do that click on Add record, then fill in the required fields. Once you are done, click on the green Save button.

Run the app

Now you are ready to run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the app running. You should be able to login using the credentials you defined in Step 4.

First login with a user who has the ADMIN role. Only those users can create attendance sheets. Once you login , it will redirect you to your dashboard.

From there, click on the Create Attendance Sheet button to create a new attendance sheet. The attendance sheet will appear. Click on the Sign In button to sign in yourself. Once the sign-in is successful, the sign-in time will be displayed and the Sign Out button will be visible. Click on the Sign Out button to sign out, and repeat this process many times with different users.

The Attendance and the Attendance Sheet tabs on the left sidebar lead to pages where you can view users’ attendance.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.