This project is a microfrontend for the Outlier Conference.
This project is built with the following technologies:
Technology | Description | Quality Attribute |
---|---|---|
Docker | Containerization platform | Performance , Maintainability |
Next.js | A React framework for production | Performance , Usability |
Drizzle | ORM for managing database and schema | Usability , Maintainability |
Tailwind CSS | A utility-first CSS framework | Usability , Maintainability |
tRPC | End-to-end typesafe APIs | Reliability , Maintainability |
Before getting started, make sure you have the following installed:
To get started, run the following commands:
# Install dependencies
bun install
# Create environment file
cp .env.example .env
To start the development server, run:
# Set up the database
docker compose up
bun db:generate
bun db:migrate
In a separate terminal, run:
# Start the development server
bun dev
To have a look in the database, run:
# Start the database IDE
bun db:studio
The authentication is handled by next-auth
, and uses Role-Based Access Control
(RBAC) to manage user permissions. Currently, there are two roles: ADMIN
and
USER
. The ADMIN
role has full access to the application and can add, edit
and delete the schedule. The USER
role has limited access, but is able to view
the schedule, and add and edit Unconf sessions.
Currently the USER
role is authenticated by OAuth providers:
Provider | Setup | environment variable |
---|---|---|
GitHub | docs | AUTH_GITHUB_ID , AUTH_GITHUB_SECRET |
Slack | docs | AUTH_SLACK_ID , AUTH_SLACK_SECRET |
For the ADMIN
role, the user is authenticated by a username and password. The
user name is admin
and the password is set via the AUTH_ADMIN_PASSWORD
environment variable.
The database is a PostgreSQL database, and is managed by Drizzle
. The schema
is defined code-first, and is located in the src/db/schema
folder.
The three entities are:
Blocks
: The blocks are the time slots for the schedule. They have a start and end time, and a type.Events
: The events are the talks and workshops that are scheduled. They have a title, description, and various metadata around whats happens.Speakers
: The speakers are the people who are giving the talks and workshops. They have a name, bio, and a picture.
The relationships between the entities are:
Blocks
have oneEvent
Events
have manySpeaker
Speakers
have manyEvent
The application is internationalized using
next-intl
. With the translation files
located in the /messages
folder. The translation files are in JSON format and
are named according to the locale they represent. For example, the English
translation file is named en.json
.
Currently, the application supports the following locales:
- English (
en
) - Spanish (
es
) - French (
fr
) - German (
de
) - Italian (
it
) - Portuguese (
pt
) - Japanese (
ja
) - Chinese (
zh
)
To add a new locale, create a new JSON file in the /messages
folder with the
locale name as the file name and update the i18n.ts
config.
For example, to add a Dutch translation:
- create a file named
nl.json
- add the translations for each key in the file.
- add the locale to the i18n.languageSelect key for all the other locales
- add the locale to the
Locale
type and theALL_LOCALES
array in the/src/lib/i18n.ts
file.