william-herring / eventron

Eventron is an app for event management and discovery. It is designed to be a competitor to services such as Meetup and Facebook Events.

Table of Contents

1. About
   • Concept
   • Planning
   • Tech stack
2. Developer Guide
   • Setup
   • Documentation

About

Concept

Eventron has been built as a social platform for engaging in virtual and in-person events. It aims to centralize the event management software industry, to provide consumers with a go-to option for event organisation and discovery. In this first prototype, the focus has been on making events easy to create, discover and join. Eventron is community-driven; meaning that an event's discoverability is linked to what community category it is under. Users can join communities to discover events matching their interests. Communities are decided by Eventron administrators, and can be adjusted if their is enough support for new communities. Suggested communities are:

• General
• Sports
• Meet-and-Greets
• Conventions and Exhibits
• Festivals
• Competitions

Planning

Before commencing development of Eventron, a comphrehensive design document and timeline was created. These can be accessed via the following links:

• SRS document
• Gantt chart

Tech stack

The following technologies were used to build Eventron:

Technology	Use
Next.js	Web framework
TypeScript	Programming language
NextAuth	Authentication
TailwindCSS	Inline CSS utility
PostgreSQL	Database
Prisma	ORM

Developer Guide

Setup

1. Clone the repository with any of the methods outlined by clicking the green 'Code' button at the top of this page.
2. Install latest version of Node.js and download/run PostgreSQL. Ensure to create a new database.
3. Once Postgres server is running, edit the file '.env' and replace the DATABASE_URL field as follows:
   DATABASE_URL="postgresql://[username]@localhost:5432/[database_name]"
4. Run 'npm install' on the command line inside the eventron folder.
5. Run 'npx prisma db push' followed by 'npx prisma studio'. A new browser window will appear.
6. Click on 'Communities' and add a record with the title 'General'. You may add other communities as well.
7. Run 'npm run dev' and navigate to localhost:3000 in the browser to begin using the app.

Documentation

This app has been designed around the Unix Philosophy, which aims for minimalistic and modular software. As such, files are organised into subdirectories. Below are the important directories and files to take note of.

Inside the root directory, you will find the .env file. This file stores all the environment variables the app accesses, including the OAuth testing tokens and database URL. You will also find some config files in the root directory. None of these should be edited.

The 'pages' directory defines all possible routes for site pages. This includes the API. Any directories inside this (excluding API) are dynamic paths, meaning that the content is rendered depending on the provided path. For example, /community/[id]. _app.tsx and _document.tsx provide the root React component and template. Every page is either server-side rendered or statically generated depending on which option is most suitable. You can read more about this here.

Inside the 'prisma' directory, you will find the schema. It will look something like this:

generator client {
  provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url      = env("DATABASE_URL")
}
model User {
id               Int         @id @default(autoincrement())
createdAt        DateTime    @default(now())
email            String      @unique
username         String      @unique
organised        Event[]     @relation("organisers")
communities      Community[] @relation("members")
events           Event[]     @relation("events")
}
model Event {
id               String      @id @default(cuid())
organisers       User[]      @relation("organisers")
community        Community?  @relation(fields: [communityId], references: [id])
communityId      Int?        @default(1)
title            String      @default("Untitled") @db.VarChar(150)
image            String      @default("/placeholder.png")
description      String      @db.VarChar(250)
startDate        DateTime    @default(now())
endDate          DateTime    @default(dbgenerated("NOW() + interval '1 day'"))
location         String
attendeeLimit    Int
attendees        User[]      @relation("events")
}
model Community {
id               Int         @id @default(autoincrement())
title            String      @unique @db.VarChar(50)
members          User[]      @relation("members")
events           Event[]
}

The Prisma schema speeds up the process of creating database rows and columns by acting as an Object Relational Mapper. All classes are exported as JavaScript modules by Prisma, meaning that we can easily model data in code.

The 'public' directory includes images, assets and anything static that must be accessed by the client. Not much more to it than that.

The 'components' directory stores all modular React components. Components are easy to reuse, which saves time when building layouts.

Important code is commented in places where necessary, although variable names and functions have been designed to appear as readable as possible.