Introduction

Getting Started

This is a quick tutorial about how to set up your project and how to start working on your startup, with the help of Horizon Boilerplate!

Introduction Image

So, let's get started:

  1. Open the .zip archive file you got (when you bought Horizon UI Boilerplate (opens in a new tab)) in your code editor. That is your starting point, and all the code you need is there.

  2. Look at the .env.local file. It should look something like this :

.env.local
# This file is supposed to be filled with the keys you get from all the platforms we are working with.

NEXT_PUBLIC_OPENAI_API_KEY=
NEXT_PUBLIC_SUPABASE_URL=https://YOURSUPABASEID.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_MONTHLY_PLAN_ID=

# Update these with your Supabase details from your project settings > API 
# This key is used for bypassing Row Level Security, but should be NEVER used in a browser.
SUPABASE_SERVICE_ROLE_KEY=

# Update these with your Stripe credentials from https://dashboard.stripe.com/apikeys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_
STRIPE_SECRET_KEY=sk_test_ 
STRIPE_WEBHOOK_SECRET= 

# Update this with your stable site URL only for the production environment. 

To fill you 2 variables (NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY) in .env.local, go to the Supabase dashboard, create a new project, go to Project Setting, then copy and paste the keys/url where you need to.

Next.JS Archive Structure

  • /app - Landing page, providers and main layout

  • /app/dashboard - All 7 dashboard page examples(ai-chat, ai-generator, main dashboard, settings, signin, subscription, user-list)

  • /app/api - All APIs used throughout the project(essay generator API, chat API, Stripe webhooks, create-checkout, create-portal-link)

  • /app/auth - Authentication callback for Supabase

  • /components - React components, page components(some dashboard pages)

  • /utils - Helper functions, navigation functions, streams for ChatGPT API, supabase client page components(some dashboard pages)