webapp-starter

webapp-starter

A monorepo template for building webapps - perfect for LLMs

Stars: 86

Visit
 screenshot

webapp-starter is a modern full-stack application template built with Turborepo, featuring a Hono + Bun API backend and Next.js frontend. It provides an easy way to build a SaaS product. The backend utilizes technologies like Bun, Drizzle ORM, and Supabase, while the frontend is built with Next.js, Tailwind CSS, Shadcn/ui, and Clerk. Deployment can be done using Vercel and Render. The project structure includes separate directories for API backend and Next.js frontend, along with shared packages for the main database. Setup involves installing dependencies, configuring environment variables, and setting up services like Bun, Supabase, and Clerk. Development can be done using 'turbo dev' command, and deployment instructions are provided for Vercel and Render. Contributions are welcome through pull requests.

README:

B(build)stack

A modern full-stack application template built with Turborepo, featuring a Hono + Bun API backend and Next.js frontend. Easiest way to build a SaaS.

API (Backend)

Web (Frontend)

Deployment

Misc

πŸ“¦ Project Structure

β”œβ”€β”€ apps/
β”‚   β”œβ”€β”€ api/         # Bun API backend
β”‚   └── web/         # Next.js frontend
└── packages/        # Shared packages, main DB

πŸ› οΈ Setup & Installation

  1. Install dependencies

pnpm install

  1. Bun Setup You can install bun in a few ways, based on your OS. https://bun.sh/docs/installation
curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL
npm install -g bun 
brew install oven-sh/bun/bun # for macOS and Linux
  1. Environment Setup

Create .env files in both apps/api and apps/web:

For apps/api/.env:

DATABASE_URL=your_database_url
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SIGNING_SECRET=your_clerk_webhook_secret

For apps/web/.env:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_API_URL=your_api_url

To run migrations and push db schema locally create a .env file in packages/db and add your database url.

packages/db/.env

DATABASE_URL=your_database_url
  1. Supabase Setup (Any postgres DB will work)
  • Create a new project on Supabase
  • Copy your database url to the .env file
  • Run pnpm db:push to initialize the database and mess around.
  • When ready, run pnpm db:generate to generate the schema. And then run pnpm db:migrate to apply the schema to the database.
  1. Clerk Setup
  • Create a new application on Clerk
  • Copy your API keys to the .env file
  • Configure your OAuth providers if needed

Webhooks

There is a webhook setup in clerk for the api to handle user creation and authentication. Use this to setup a sync between clerk and the user database. Further details can be found in the api readme.

Development

Run the development server:

turbo dev

This will start both the API and web applications in development mode:

πŸ“€ Deployment

Web (Next.js) on Vercel

  1. Connect your repository to Vercel
  2. Select the web directory as your project root
  3. Add your environment variables

API (Bun) on Render

  1. Create a new Web Service on Render
  2. Connect your repository
  3. Configure the service (If not using render.yaml):
    • Build Command: pnpm install
    • Start Command: pnpm start
    • Root Directory: apps/api
  4. Add your environment variables

Contributing

  1. Create a new branch
  2. Make your changes
  3. Submit a pull request

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for webapp-starter

Similar Open Source Tools

For similar tasks

For similar jobs