saasfly / saasfly

Your Next SaaS Template or Boilerplate ! A magic trip start with `bun create saasfly` . The more stars, the more surprises

Saasfly

An easy-to-use and enterprise-grade Next.js boilerplate.

You don't need to buy templates anymore; Saasfly provides a complete, open-source solution for building SaaS applications quickly and easily.

Nextify provides a complete Enterprise SaaS solution. Contact us at [email protected] if you're interested in discussing your project, or if you'd simply like to have a conversation with us, please feel free to reach out.

❤️ We provide free technical support and deployment services to non-profit organizations.

🙌 All profits obtained from our open source projects will be entirely dedicated to supporting open source initiatives and charitable causes.

⚡ Live Demo

Try it out for yourself!

Demo Server1 (Location: Washington - USA): https://show.saasfly.io

Demo Server2 (Location: Japan - Tokyo): https://demo.saasfly.io

See more documentation at https://document.saasfly.io

🌟 Star History

🚀 Getting Started

🖱 One Click Template

📋 Prerequisites

Before you start, make sure you have the following installed:

1. Bun & Node.js & Git

   1. Linux

     curl -sL https://gist.github.com/tianzx/874662fb204d32390bc2f2e9e4d2df0a/raw -o ~/downloaded_script.sh && chmod +x ~/downloaded_script.sh && source ~/downloaded_script.sh

   2. MacOS

     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
     brew install git
     brew install oven-sh/bun/bun
     brew install nvm

2. PostgreSQL

   1. You can use Vercel Postgres or a local PostgreSQL server(add POSTGRES_URL env in .env.local)

         POSTGRES_URL = ''

Installation

To get started with this boilerplate, we offer two options:

1. Use the bun create command(🌟Strongly recommend🌟):

bun create saasfly 

2. Manually clone the repository:

git clone https://github.com/saasfly/saasfly.git
cd saasfly
bun install

Setup

Follow these steps to set up your project:

1. Set up the environment variables:

cp .env.example .env.local
// (you must have a database prepared before running this command)
bun db:push

2. Run the development server:

bun run dev:web

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

4. (Optional alpha)bun run tailwind-config-viewer Open http://localhost:3333 in your browser to see your Tailwind CSS configuration

🥺 Project Roadmap

1. Admin Dashboard Page (in alpha !!!) 2. only provide static page now and we plan to integrate with headless arch 3. You can provide your admin account and change ADMIN_EMAIL="[email protected],[email protected]" in .env.local and access host:port/admin/dashboard 4. Based on security concerns, we will not provide online demos for the time being.
2. Consider integrating Payload CMS.

⭐ Features

🐭 Frameworks

• Next.js - The React Framework for the Web (with App Directory)
• NextAuth.js - Authentication for Next.js
• Kysely - The type-safe SQL query builder for TypeScript
• Prisma - Next-generation ORM for Node.js and TypeScript, used as a schema management tool
• React-email - A React renderer for creating beautiful emails using React components

🐮 Platforms

• Vercel – Deploy your Next.js app with ease
• Stripe – Payment processing for internet businesses
• Resend – Email marketing platform for developers

🐯 Enterprise Features

• i18n - Support for internationalization
• SEO - Search engine optimization
• MonoRepo - Monorepo for better code management
• T3 Env - Manage your environment variables with ease

🐰 Data Fetching

• trpc – End-to-end typesafe APIs made easy
• tanstack/react-query – Hooks for fetching, caching and updating asynchronous data in React

🐲 Global State Management

• Zustand – Small, fast and scalable state management for React

🐒 UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Shadcn/ui – Re-usable components built using Radix UI and Tailwind CSS
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons
• next/font – Optimize custom fonts and remove external network requests for improved performance

🐴 Code Quality

• TypeScript – Static type checker for end-to-end type safety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript
• Husky – Git hooks made easy

🐑 Performance

• Vercel Analytics – Real-time performance metrics for your Next.js app
• bun.sh – npm alternative for faster and more reliable package management

🐘 Database

• PostgreSQL – The world's most advanced open source database

📦 Apps and Packages

• web: The main Next.js application
• ui: Shared UI components
• db: Database schema and utilities
• auth: Authentication utilities
• email: Email templates and utilities

📜 License

This project is licensed under the MIT License. For more information, see the LICENSE file.

🙏 Credits

This project was inspired by shadcn's Taxonomy and t3-oss's create-t3-turbo.

👨‍💻 Contributors

Made with contrib.rocks.

saasfly's Issues

Will saasfly support cloudflare?

Will SaasFly support Cloudflare? For example, replacing Postgres with Cloudflare D1 or something similar.

It's obvious that products like Vercel and Supabase are too expensive, especially for individual developers or startups.

For most people, Cloudflare's $5 per month plan is enough.

Support for lemon squeezy

Many of us cannot register for stripe or stripe account is frozen. It would be greate if add other payment solutions like lemon squeezy. Anyway, really awesome project, thanks for making this public!

Mobile Menu Navbar: Menu Popup Does Not Always Close After Clicking Navbar Item

Click Mobile MenuNavbar item, sometimes the Menu Popup DOES NOT close.

Steps to Reproduce

1. Open show.saasfly.io on a mobile device, either in Chrome or Safari.

2. Click the Menu Button.

3. Click a menu item: features, blog, or price. The Menu popup remains open after clicking.
   Screenshot:
   

4. Screen recording available here:
   Screen Recording

After clicking the email login link, there is a problem with the redirection, and it cannot redirect to the homepage

GitHub also experiencing this issue

Mobile Navbar Not Working Correctly

Issue: Navbar on mobile view is not displaying correctly. It should be fixed to ensure proper styling when the user clicks the menu button on the navbar.

Description:
The current navbar on the mobile view is not rendering properly in terms of styling. When a user clicks on the menu button on the navbar, the dropdown menu does not appear with the correct formatting and layout. This issue is affecting the overall user experience on mobile devices.

Expected Behavior:
When a user clicks on the menu button on the navbar in mobile view, the dropdown menu should appear with the correct styling, ensuring that the navigation links are displayed in a visually appealing and organized manner.

Steps to Reproduce:

1. Access the website on a mobile device.
2. Click on the menu button on the navbar.
3. Observe that the dropdown menu does not display with the correct styling.

Proposed Solution:
To address this issue, the navbar on the mobile view should be fixed to ensure that the dropdown menu appears with the intended styling when the user clicks the menu button. This may involve adjusting the CSS styles functionality of the navbar to achieve the desired visual presentation on mobile devices.

Support for supabase

Hi, thanks for sharing this amazing template. Is supporting supabase in the plan?

Component background color "black" is not match the page background color in dark mode

TL;DR: Some components background in the Sample Site was set to use bg-black in the Dark Mode。 But the original CSS isn't "black".

Details:

Some of components background is set to use Tailwindcss background-color (bg-black) but the actually webpage CSS colour is set to HSL(224, 71%, 4%) (RGB(3, 7, 17)) which isn't black (RGB(0,0,0))

.dark {
  --background: 224 71% 4%;
   ...
}

I think it effected following components (Not sure if it's expected)

apps/nextjs/src/components/globe.tsx
apps/nextjs/src/components/sparkles.tsx

The closed one would be bg-gray-950 background-color: rgb(3 7 18);

diff --git a/apps/nextjs/src/components/globe.tsx b/apps/nextjs/src/components/globe.tsx
index fbd5ef0..7d51875 100644
--- a/apps/nextjs/src/components/globe.tsx
+++ b/apps/nextjs/src/components/globe.tsx
@@ -396,7 +396,7 @@ export function Globes() {
   ];

   return (
-    <div className="relative flex h-screen w-full flex-row items-center justify-center bg-white py-20 dark:bg-black md:h-auto">
+    <div className="relative flex h-screen w-full flex-row items-center justify-center bg-white py-20 dark:bg-gray-950 md:h-auto">
       <div className="relative mx-auto h-full w-full max-w-7xl overflow-hidden px-4 md:h-[40rem]">
         <motion.div
           initial={{
@@ -420,7 +420,7 @@ export function Globes() {
             for the next generation of businesses.
           </p>
         </motion.div>
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-40 h-40 w-full select-none bg-gradient-to-b from-transparent to-white dark:to-black" />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-40 h-40 w-full select-none bg-gradient-to-b from-transparent to-white dark:to-gray-950" />
         <div className="absolute -bottom-20 z-10 h-72 w-full md:h-full">
           <World data={sampleArcs} globeConfig={globeConfig} />;
         </div>
diff --git a/apps/nextjs/src/components/sparkles.tsx b/apps/nextjs/src/components/sparkles.tsx
index 9ac6208..e1cc66b 100644
--- a/apps/nextjs/src/components/sparkles.tsx
+++ b/apps/nextjs/src/components/sparkles.tsx
@@ -12,7 +12,7 @@ export function Sparkless() {
     color = "#000000";
   }
   return (
-    <div className="flex flex-col items-center justify-center overflow-hidden rounded-md bg-white dark:bg-black">
+    <div className="flex flex-col items-center justify-center overflow-hidden rounded-md bg-white dark:bg-gray-950">
       <h1 className="relative z-20 text-center font-bold text-black dark:text-white">
         Saasfly: A new SaaS player?
       </h1>
@@ -34,7 +34,7 @@ export function Sparkless() {
         />

         {/* Radial Gradient to prevent sharp edges */}
-        <div className="absolute inset-0 h-full w-full bg-white [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)] dark:bg-black"></div>
+        <div className="absolute inset-0 h-full w-full bg-white [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)] dark:bg-gray-950"></div>
       </div>
     </div>
   );

PS: I think there are similar issue with Light Mode as well. Not exact same though

build error

Build error occurred
Error: Failed to collect page data for /api/webhooks/stripe
@saasfly/nextjs:build: at /workspace/saasfly/node_modules/next/dist/build/utils.js:1217:15
@saasfly/nextjs:build: at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
@saasfly/nextjs:build: type: 'Error'
@saasfly/nextjs:build: }
@saasfly/nextjs:build: Collecting page data .error: script "with-env" exited with code 1
@saasfly/nextjs:build: error: script "build" exited with code 1
@saasfly/nextjs:build: ERROR: command finished with error: command (/workspace/saasfly/apps/nextjs) /home/gitpod/.nvm/versions/node/v20.11.1/bin/bun run build exited (1)
@saasfly/nextjs#build: command (/workspace/saasfly/apps/nextjs) /home/gitpod/.nvm/versions/node/v20.11.1/bin/bun run build exited (1)

Tasks: 0 successful, 1 total
Cached: 0 cached, 1 total
Time: 30.853s
Failed: @saasfly/nextjs#build

ERROR run failed: command exited (1)
error: script "build" exited with code 1

How to publish on Vercel

Hi! First of all, I wanted to congrat for the great product you're creating, it's super valuable!

I was trying to publish it on Vercel, but I'm going through a few problems (mostly due to the fact that it's my first time working with turbo and bun, so I'm still in the learning process), such as:

• Build & Development Settings. How to set them up? Is the output directory that Vercel should expose the one in apps/nextjs/.nest?
• Environment Variables. Is there some more automated or suggested way to load them, considering also Vercel's environments (development, preview, production)? And especially for the preview environment, the NEXT_PUBLIC_APP_URL, could it be substituted with the one provided by Vercel such as NEXT_PUBLIC_VERCEL_URL?