Web App First Steps (Remix Run, React, Typescript, MongoDB, Vercel)

I've wanted to create some sort of showcase of the projects I create as I go along for a while now, and this summer after my freshman year of college felt like the right time. So, here I am, using the blog system I made after finally solving a persistent Vercel 404 error to deploy this. My main priority is to use the tools that I've had a good time using over the few years I've been programming, as well as documenting my own ups and downs as I attempt to build cool stuff - a guide, a journal, I don't know quite what this is supposed to be yet.

Remix Run + React + Typescript

I was introduced to this React framework a while back and I really liked it - it felt like it streamlined client / server interactions as well as having a great build / deployment pipeline. Their Quick Start Guide and documentation are really comprensive, but it all starts with:

npx create-remix@latest <project_name>

It defaults to using Typescript, which you can opt out of by using a different template, but why would you? Typescript is without flaw and should replace every other language out there. It also uses Vite now, a dev server that makes things plus vite.

- /app
|--- root.tsx
|--- /.server
|--- /components
|--- /routes
   |--- _index.tsx
   |--- login.tsx

My file structure ended up something like this - adding /.server to handle server-side functions like accessing database and /components to better structure my files and encourage component re-use. Remix Run has an interesting way to handle routes which I find cleaner than things like React-Router (although that's what it's using under the hood). Run the following command and you have successfully set up a Remix Run web app!

npm run dev

Tailwind CSS + HyperUI

I am not very good at frontend - making a UI look good is the last thing on my mind when trying to build a website. On top of that, why is CSS just straight up so unintuitive and difficult?? Anyway, to bridge the gap and make this website look decent, I went for a couple solutions.

HyperUI is an awesome resource for super flexible and just gorgeous components that you can inject directly into your application, from HTML to JSX to Vue. It uses Tailwind, which I also like because of their great documentation, which I also set up in my application using their Tailwind + Remix Guide:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init --ts -p

Then, configure your template paths in tailwind.config.ts:

import type { Config } from 'tailwindcss'

export default {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Add Tailwind directives in ./app/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

And now you can use tailwind anywhere in your React App by just adding a className property to components. It can seem weird at first, but it's super fast and useful once you get the hand of it.

MongoDB + Prisma

An essential part of this website was going to be the database - I needed some way to authenticate, to eventually store blogs, to have some sort of permanent state in my application. I chose MongoDB since I got an ad one day that you could set up an Atlas Cluster for free, and I've had no complaints so far. Next was the problem of programmatic interaction with my cluster, which has always been incredibly annoying for me in the past. I ended up chosing Prisma because of Typescript compatibility and overall seamlessness - you can just create a model in your ./prisma/schema.prisma file and it'll sync to the cloud cluster as well as update your Prisma Client typings:

model User {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  username  String   @unique
  password  String
  Blog      Blog[]
}

To setup Prisma, you first install the package and initialize the resources:

npm install prisma --save-dev
npx prisma init

A ./prisma/schema.prisma will appear where you can connect your DB using a .env file:

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

Then, the client package will allow you to connect to your database and update your models in your application (although you should keep these interactions server-side):

npm install @prisma/client

Finally, you can both update the client typings and the database models using:

npx prisma generate

I used this new database system to build a quick login system using the User model and some HyperUI components:

Vercel Deployment

The final step is to deploy this application. This always gives me a headache, since every single time it works perfectly on the local machine and NOT in production. However, Vercel makes the process pretty painless (despite its 404 NOT_FOUND error) and allows you to have a free tier for hobby project, which was perfect for me. Adding my environment variables, it auto-detected Remix and auto-filled the build and install commands and not before long, I was greeted with: