A simple web application to track attendance using PostgreSQL and Clerk authentication.
To start the development server, run one of the following commands:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devThen, open http://localhost:3000 in your browser to view the application.
You can begin editing the project by modifying the file at:
app/page.jsThe page will automatically reload as you make changes.
To run this project on your own infrastructure:
- Set Up a PostgreSQL Database
Run the following SQL to create the required tables:
CREATE TABLE IF NOT EXISTS public.events (
id SERIAL PRIMARY KEY,
name VARCHAR(255),
hashed_userid_email TEXT,
dateadded TIMESTAMPTZ DEFAULT NOW() NOT NULL,
ispublic BOOLEAN DEFAULT FALSE NOT NULL,
isrestricted BOOLEAN DEFAULT FALSE NOT NULL,
is_open BOOLEAN DEFAULT TRUE NOT NULL
);
CREATE TABLE IF NOT EXISTS public.mark (
event_id VARCHAR NOT NULL,
hashed_userid_email VARCHAR NOT NULL,
email VARCHAR NOT NULL,
name VARCHAR,
isattended BOOLEAN DEFAULT FALSE NOT NULL,
dateadded TIMESTAMPTZ DEFAULT NOW() NOT NULL,
CONSTRAINT unique_event_email UNIQUE (event_id, email),
image_url VARCHAR(255) DEFAULT NULL
);You can run this SQL using a GUI like DataGrip, pgAdmin, or via psql in the terminal.
- Set Up Clerk for Authentication • Go to https://clerk.com and create a project. • Obtain your Publishable Key and Secret Key from the Clerk dashboard. • Configure allowed redirect URLs to include your local or deployed domain. Note: For Clerk Authentication, you need to go to "Configure" in the project dashboard, go to Session Management -> Sessions -> Customise Session Tokens and put this inside claims:
{
"email": "{{user.primary_email_address}}"
}
- Configure Environment Variables
Create a .env file in the root directory of your project and add the following:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_CLERK_PUBLIC_KEY
CLERK_SECRET_KEY=YOUR_CLERK_SECRET_KEY
NEXT_PUBLIC_URL=http://localhost:3000
PG_HOST=YOUR_DATABASE_HOST
PG_PORT=YOUR_DATABASE_PORT
PG_USER=YOUR_DATABASE_USER
PG_PASSWORD=YOUR_DATABASE_PASSWORD
PG_DATABASE=YOUR_DATABASE_NAME