/cs-engineering-test

Primary LanguageTypeScript

CS Engineering Test Task

It's live at https://cs-engineering-test-opal.vercel.app/ !

Running the project

This project uses MySQL/PlanetScale as the database, ensure you have one set up beforehand.

  1. Install dependencies:
pnpm install

Environment variables

  1. Create a .env file with the following:
DATABASE_URL=

NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

Builds will fail without properly setting environment variables.

  1. To build:
pnpm build
  1. Push database changes to your PlanetScale database
pnpm db:push
  1. To run:
pnpm start

App Screenshots

Sign in Posts feed Inidividual Post

Repository overview

Here is a couple of points of interest in the repo.

  1. Database Schema
  2. tRPC Routers
  3. Custom Signin page
  4. Main App Pages

Design decisions

I opted for creating a separate Vote table that is shared between both Comment and Post. This allowed easier updates and CRUD operations related to voting with the caveat that I had to use database transactions to keep voteTotal and Vote consistent across tables. see

I added a rootPostId field to the Comment table in order to easily query for all comments under a specific post. After fetching all the comments on the server, I recursively create an array of nested comments and use that to build the UI. Obviously this solution falls apart at scale and some form of pagination would be needed.

see server-side nesting

see UI rendering

Further improvements to consider

Couple of things I wanted to get to but chose not to in the interest of time and scope of the task.

  1. Creating a User table and syncing with Clerk via webhooks in order to store data such as profile image and name.
  2. I did not fully take advantage of some of Next.js App router features such as Server Actions mainly because Page-router style conventions and client components are much more familiar to me.
  3. I did not spend much time playing with Tailwind config to create reusable utility classes based on the Figma mockups, but I did try to get the UI to as close to 1:1 as possible.
  4. Other things like surfacing errors to users and loading UI would be good to add.