OmniSync Tech Assessment

🚀 Features

• Next.js with ShadCN UI
• Prisma ORM for Postgres with migration and seeding.
• Dockerized frontend, backend, and Postgres DB.

---

🛠️ Tech Stack

• Next.js 15 (App Router)
• ShadCN UI
• Prisma ORM
• pnpm as the package manager.

---

⚙️ Run the Project Locally (With Docker)

1. Clone the Repo:

git clone https://github.com/tyler-audio/omnisyncTA.git

2. Build and Start App & Database

docker-compose up --build

This will:

• Spin up a Postgres database (db container).
• Build the Next.js application.
• Run Prisma migrations & seed the database.
• Start the Next.js production server.

3. Open the App in Your Browser

http://localhost:3000

The app should now be running now in your browser.

4. Stop the Containers

docker-compose down

5. Reset Database Completely (Optional)

docker-compose down -v
docker-compose up --build

---

▶️ Running Locally Without Docker (Optional)

1. Pull PostgreSQL Image

• Ensure you have latest Docker Desktop

docker pull postgres

You can check for image in Docker Desktop or by running:

docker images

2. Start Postgres Instance

docker run --name omnidb -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=omnidb -p 5432:5432 -d postgres

3. Copy .env.local to .env

Be sure <host> refers to localhost.

DATABASE_URL="postgres://<user>:<password>@<host>:<port>/<database>"

4. Install Dependencies

pnpm install

5. Run Migration & Seed Database

pnpm prisma migrate dev --name init
pnpm prisma db seed

6. Start the Development Server

pnpm dev

---

📝 Familiar vs Challenging

Familiar/Easy

• The inital setup of Next.js with ShadCN.
• Running Postgres locally in a Docker container.
• Creating a basic Dockerfile and docker-compose.yml.
• Configuring API Routes within Next.js (Left these in the repo however I opted for Server Actions in the implementation).
• Client-side user interactions & fetching data from Postgres.

Challenging

• The main problem I ran into was with Docker, due to my app attempting to connect to the DB at build time inside of the container before the database container was running.

---

💡 Design/Implementation Decisions

• Next.js App Router I chose Next.js because it is a framework I have used quite a lot, and found it would be suitable for this assessment. While many of Next.js' more robust and powerful features were not necessary for this application I still decided to use Next to get the project set up and working quicker.

• Prisma ORM Prisma is clean, type-safe and provides CLI commands to make integration, migration and seeding very simple. It also generates its own types, so not only do I get type-safety throughout the project but it saves time in writing complex types.

• Multi-Stage Dockerfile I used this pattern to cache dependencies and keep the final image small and efficient. Perhaps overkill for this project but it is a pattern I am familiar with.

• Optimistic UI Update When a user clicks on a card, I update both local state on the client as well as updating the database. This gives the app a snappier feel, and seeing as this is a small application, the implementation is simple and doesn't overcomplicate the code.