---
title: "Building a SaaS application on Railway"
description: "Zero to one, building a SaaS application on Railway"
date: 2024-12-13T00:00:00.000Z
updated: 2026-10-29T11:03:21.696Z
topics: ["Guides"]
tags: []
url: https://railway.com/guides/building-a-saas-application
---
# Building a SaaS application on Railway
*Software as a Service (SaaS) is a business where you provide value to your users using your software without them having to install or maintain it. A SaaS doesn’t have to be a full-blown software suite but it can also be as simple as a Slack Bot or a ToDo app.*
## Why build a SaaS business
Building a SaaS business is one of the most lucrative avenues for software engineers because it provides:
- **Space to experiment with tech:** an opportunity to experiment with new technologies you don’t get to work with at your full-time job.
- **Lessons beyond tech:** gives real-life experience of product management that teaches you a lot more than the engineering aspect of it.
- **Extra income:** a successful SaaS business can generate a good side income or even a full-time income.
In this tutorial, you’ll build a SaaS application for a job application board and deploy it on the web to your custom domain.
## Plan the SaaS
Before starting development it’s important to understand the project requirements and expectations. It is also important to start with the most basic requirements for the Minimal Viable Product (MVP) to test your SaaS idea.
### Requirements
This job board application has the following requirements:
- Hiring managers from companies can add new jobs to the board after logging in.
- Job seekers can apply to these job posts by filling out a form without logging in.
In terms of features, the application will have the following pages:
- For job seekers:
- A home page that displays all open job posts.
- A job details page displays the job description and a form for applying for the position.
- For hiring managers:
- Login/sign-up page.
- A page to create the job post.
- A page to view applicants who applied for a particular job post.
### Technical design
Now that the feature specifications are done. You can choose a tech stack that provides the best developer experience to build it. The following technologies match the requirements laid out previously:
- [Remix](https://remix.run/) for the full-stack development because it is built on React and supports server-side rendering.
- [PostgreSQL](https://www.postgresql.org/) for data storage because it is easy to get started and scale later on.
- [Clerk](https://clerk.com/) for authentication and user management.
## Build the application
To get started, create a Remix project by running the following command in the CLI:
```bash
npx create-remix@latest
```
This is an interactive command that will bootstrap a Remix project with [TailwindCSS](http://tailwindcss.com/) and [TypeScript](https://www.typescriptlang.org/). Choose the following options when prompted:
- Where should we create your new project?: `job-board`.
- Initialise a new git repository?: Yes.
- Install dependencies with npm?: Yes.
### Set up shadcn/ui
You’ll use [shadcn/ui](https://ui.shadcn.com/docs/cli) as the UI library for consistent design and fast development. To get started, run the following command.
```bash
npx shadcn@latest init
```
This is an interactive command that will set up shadcn/ui with all its dependencies. Choose the following options when prompted:
- Which style would you like to use?**:** New York.
- Which color would you like to use as the base color?**:** Neutral.
- Would you like to use CSS variables for theming?**:** Yes.
Now install the components you’ll be using to build the application by running this command in your project:
```bash
npx shadcn@latest add button input textarea card label separator
```
### Add PostgreSQL database
You’ll use PostgreSQL to store the application data such as the job posts and applicants. The following diagram gives an overview of the data model for this application:
To integrate the Postgres database, you’ll use [Drizzle ORM](https://orm.drizzle.team/docs) with [postgres.js](https://github.com/porsager/postgres) driver that lets you use Postgres in the TypeScript application. Follow these steps to get started with Drizzle:
- Run `npm i drizzle-orm nanoid postgres` in the project command line to install the dependencies.
- Run `npm i -D drizzle-kit dotenv` to add utilities for development.
- Create a file `app/db.server/index.ts` to initialize the drizzle orm:
```tsx
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import "dotenv/config";
const queryClient = postgres(String(process.env.DATABASE_URL));
export const db = drizzle(queryClient);
```
> `.server` a naming convention in Remix used to explicitly exclude files from the client-side JS bundle.
>
- Create a file [`app/db.server/schema.ts`](https://github.com/anshumanbhardwaj/job-board/blob/0f2c0c24d8751eca91349ce727b148a27f07a15b/app/db.server/schema.ts) with the schema definitions and export the schema types.
- Create a file named [`drizzle.config.ts`](https://github.com/anshumanbhardwaj/job-board/blob/main/drizzle.config.ts) at the project root to configure drizzle credentials.
- Add database scripts to the [`package.json`](https://github.com/anshumanbhardwaj/job-board/blob/main/package.json) file:
```tsx
"scripts": {
// other scripts..
"generate": "drizzle-kit generate",
"migrate": "drizzle-kit push"
},
```
These commands will come in handy for managing database schema migrations. To learn more about schema migrations, see [Drizzle migrations fundamentals](https://orm.drizzle.team/docs/migrations).
- Run `npm run generate` to generate the first migration file. This should create a new `drizzle` folder in the project. You should check this into your Git project.
> For local development you need to run Postgres on your computer, you can use Docker for it. To follow the next step, you must have docker installed on your computer.
>
- Run the following command to start Postgres server on your computer:
```bash
docker run -e POSTGRES_USER=admin -e POSTGRES_PASSWORD=mysecretpassword -e POSTGRES_DB=pgdb -p 5432:5432 -d postgres
```
- Create a `.env` file in your project and add `DATABASE_URL` variable to it:
```bash
DATABASE_URL=postgres://admin:mysecretpassword@127.0.0.1:5432/pgdb
```
> Make sure that the **env** file is not checked into your Git project.
>
- Run `npm run migrate` to apply the schema migrations to the local database.
You’re now all set to start working with the local Postgres database.
### Set up Clerk
To get started, sign up for a Clerk account if you don’t have one and then login into your [Clerk dashboard](https://dashboard.clerk.com/). Then follow these steps:
- Click **Create application.**
- Fill in the application name and select email login as the only sign-in option.
- Click **Create application.**
- Go to **Configure > API keys** and select **Remix** as the framework.
- Copy the credentials.
- Paste the credentials in the `.env` file.
### Add authentication
Inside your project follow these steps to add authentication using Clerk:
- Run `npm install @clerk/remix` in the terminal to install the dependencies.
- Update the [`app/root.tsx`](https://github.com/anshumanbhardwaj/job-board/blob/main/app/root.tsx) file to wrap the application in the `ClerkApp` higher order component. This ensures that the application has access to the authentication context and utilities from Clerk.
- Create a new file [`routes/sign-up.$.tsx`](https://github.com/anshumanbhardwaj/job-board/blob/main/app/routes/sign-up.%24.tsx) to render the sign up page using the `SignUp` component.
- Create a new file [`routes/sign-in.$.tsx`](https://github.com/anshumanbhardwaj/job-board/blob/main/app/routes/sign-in.%24.tsx) to render the sign in page using the `SignIn` component.
- Add the following content to the `.env` file for server-side auth routing:
```tsx
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_UP_URL=/sign-up
CLERK_SIGN_IN_FALLBACK_URL=/
CLERK_SIGN_UP_FALLBACK_URL=/
```
This will configure Clerk authentication provider and utilities throughout the application, which you’ll use in the next steps.
### Build pages for job seekers
- Update the [`app/routes/_index.tsx`](https://github.com/anshumanbhardwaj/job-board/blob/main/app/routes/_index.tsx) file with the code to show all the available jobs to the visitor.
This code fetches the jobs from the database using the `loader` function and displays them to the user.
To render the job details markdown content as HTML, install the [showdown](https://github.com/showdownjs/showdown) package.
- Run the following command:
```bash
npm i showdown
npm i -D @types/showdown
```
Now add the typography plugin for Tailwind CSS to apply styles for markdown content.
- Install the package by running `npm install -D @tailwindcss/typography`
- Add the plugin to the [`tailwind.config.ts`](https://github.com/anshumanbhardwaj/job-board/blob/main/tailwind.config.ts) file as follows:
```tsx
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}
```
- Now create a file named [`app/routes/jobs.$jobId.tsx`](https://github.com/anshumanbhardwaj/job-board/blob/main/app/routes/jobs.%24jobId.tsx).
This file will create the route for job post details from where the visitor can apply for the job.
The `$` in the file name creates a [dynamic route](https://remix.run/docs/en/main/file-conventions/routes#dynamic-segments) and lets you access the `jobId` param at runtime.
The `loader` function provides the job details data and creates the HTML markup for the markdown content. The `action` function handles the `POST` request from the job application `