Computer Science Showdown

Introduction

Used for the annual event of the computer science student association at the University of Lampung called the Computer Science Showdown aka CSS. This webapp enables competition participants to simplify the registration process.

Built With

• Next.js
• React.js
• Tailwind CSS
• Prisma.io

Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run this webapp.

• Node.js (Version: >=18.x)
• PostgreSQL (Version: >=13.x)
• Pnpm

Development

Setup

1. Clone the repo from GitHub repository

   git clone https://github.com/vexra/css.git

2. Go to the project folder

   cd css

3. Install packages with pnpm

   pnpm install

4. Set up your .env.local file

   • Duplicate .env.example to .env.local
   • Use openssl rand -base64 32 to generate a key and add it under AUTH_SECRET in the .env.local file.

5. Setup Node If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:

   nvm use

   You first might need to install the specific version and then use it:

   nvm install && nvm use

   You can install nvm from here.

Manual setup

1. Configure environment variables in the .env.local file. Replace <user>, <pass>, <db-host>, and <db-port> with their applicable values

   DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
   

   If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick local DB

   1. Download and install postgres in your local (if you don't have it already).

   2. Create your own local db by executing createDB <DB name>

   3. Now open your psql shell with the DB you created: psql -h localhost -U postgres -d <DB name>

   4. Inside the psql shell execute \conninfo. And you will get the following info.
      

   5. Now extract all the info and add it to your DATABASE_URL. The url would look something like this postgresql://postgres:postgres@localhost:5432/Your-DB-Name. The port is configurable and does not have to be 5432.

   If you don't want to create a local DB. Then you can also consider using services like neon.tech.

• Setup postgres DB with neon.tech

2. Set up the database using the Prisma schema (found in prisma/schema.prisma)

   In a development environment, run:

   npx prisma migrate dev

   In a production environment, run:

   npx prisma migrate deploy

3. Run (in development mode)

   pnpm run dev

Setting up admin account

1. Open Prisma Studio to look at or modify the database content:

   npx prisma studio

2. Click on the User model to add a new user record.

3. Fill out the fields email, name, password, and set role to ADMIN (remembering to encrypt admin password with BCrypt) and click Save 1 Record to create your first user.

4. Open a browser to http://localhost:3000 and login with your just created, admin account.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

Repo Activity

Community

The computer science student association at the University of Lampung aka HIMAKOM can be found on Instagram Account where you can ask questions, voice ideas, and share your thoughts with other people.

Authors

A list of the original co-authors of Computer Science Showdown webapp that helped bring this amazing webapp to life!

• @vexra
• @kiraware
• @dafahan