Skip to content

Latest commit

 

History

History
108 lines (57 loc) · 6.15 KB

README.md

File metadata and controls

108 lines (57 loc) · 6.15 KB
Raw

Intro

I (Anthony Sistilli) created this boilerplate to save tech founders time when starting a new SaaS. It's meant to be a quick starting point that you can edit & deploy, allowing you to focus on the more important things like building your product and talking to users.

You can read more about the philosophy behind this boilerplate, and startups & coding in general on my mind map.

Also, here is the the accompanying Figma design file.

Feel free to buy me a coffee :)

What the boilerplate looks like

Desktop preview

Mobile preview

Run the project

npm i
npm run  dev

Open http://localhost:3000 with your browser to see the result.

Make sure you have the eslint and prettier extensions installed on vscode.

Tech stack

I chose to build this on Next 14 (NextJS + React) since that's what I normally use for my projects.

For the UI components, I use shadcn - it's super lightweight, looks great out of the box, and has easy to edit components. It uses tailwindcss under the hood. It should be easy to rip out if you have a different UI library you'd like to use. One thing to note is I created a custom Typography components to match my Figma designs a bit better. You'll also want to replace the src/app/global.css with your custom theme styles from shadcn if you don't want to use mine. Note I added a new variant called minor here to match with my Figma.

I use a specific ESLINT config I created for myself, based on some best practices. I disable a lot of rules I find useless, so feel free to mess with that.

For the design decisions & example landing pages for inspiration, you can read about them on my mind map.

Things you need to replace

In no particular order, here are the things you should look into changing to make the site your own:

  • Change the images on the site (including the social image embedded when sharing the url, saved as opengraph-image.png)

  • Change all the copywriting and text on the homepage

  • Change the terms of service & privacy policy to yours

  • Add whatever you want to your header by modifying the items array in header.tsx

  • Replace the theme in src/app/global.css with your own shadcn theme, which you can generate here by choosing your colors and clicking copy code. Note I created a new color called minor which isn't native to shadcn, so you may need to add a replacement for that on some typographys

  • Replace the SEO metadata and titles in layout.tsx

  • Replace all the links with whatever you want

  • There's also a husky integration I added, feel free to set that up by running npx husky install

Next steps to build a SaaS from this repo

If you're building a full SaaS off of this repo, here's what you should look into doing next, depending on what you need:

  • If you need any environment variables, create a .env.local and use them in standard NextJS style

  • Create the login / signup logic. I'd personally recommend using Supabase <> NextJS's integration, since it's super simple and quick to setup

  • Logic to show different header items for someone logged in vs someone not (if your app needs it)

  • Additional components if you're modifying the homepage

  • If you're SaaS has already launched, you can add more elements to the landing page like customer testimonials, demos, etc. A full list of things I'd recommend is here

  • Code the rest of your SaaS!

  • Create more designs on figma (see section below)

Design on Figma

I have the accompanying Figma file here so you can fork it and build out your SaaS from it while keeping the styles consistent.

If you're a developer that's new to Figma, here's my crashcourse on Figma for developers.

If you ended up changing the shadcn theme, you can modify the color variables on Figma to match your code. Same for typography variants.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Basically:

  1. Clone the repo, and push your changes up

  2. Log into your Vercel account

  3. Create a new project, link your repo, and it will auto deploy

Depending on what you modify, you may have build issues what prevent your site from deploying, but generally it should work out of the box. Any issues that do come up are usually super obvious and easy to solve by looking at the build failure logs.

I'd also recommend buying a domain on a platform like Cloudflare, and configuring it to point to Vercel. Docs about that here.

Join our community & say thanks

You can join our Tech Founder's Discord, and check out my other socials.

Also, if you're a tech founder like myself, feel free to subscribe on Youtube, and check out my mind map where I write about startups, coding, and other things.

Contribute

If you have any suggestions or changes, feel free to create a PR!