Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rcrdk/in-bio-micro-saas

ProjectInBio serves as a micro SaaS boilerplate, in this case users can create their own shareble page to use on social media such as Linkedin, GitHub, Instagram and others.
https://github.com/rcrdk/in-bio-micro-saas

authjs boilerplate firebase landing-page landingpage micro-saas micro-sass next-auth nextjs react resend-email saas saas-boilerplate stripe subscription tailwindcss typescript

Last synced: 2 months ago
JSON representation

ProjectInBio serves as a micro SaaS boilerplate, in this case users can create their own shareble page to use on social media such as Linkedin, GitHub, Instagram and others.

Awesome Lists containing this project

README 

        
# 🪪 ProjectInBio Micro SaaS

ProjectInBio serves as a micro SaaS boilerplate, in this case users can create their own shareble page to use on social media such as Linkedin, GitHub, Instagram and others. This app was developed during my studies about micro SaaS app at [Rocketseat](https://www.rocketseat.com.br/).



ProjectInBio Micro SaaS App Preview



## 📋 Features



**Public Pages:**

- **Home:** The main landing page showcasing the product, including a hero section, video presentation, pricing details, and FAQs.

- **Create Your Page:** A secondary landing page similar to the home page but featuring an input field for users to enter a custom slug. Submitting the form directs them to social login to proceed.

- **Resources:** A landing page optimized for programmatic SEO, targeting specific social networks to promote the service.

- **Pages:** Public profile pages created by users, displaying their avatar, name, introduction, social media links, and custom links. Users can also showcase their projects.



**Private Pages:**

- **Create Now:** After social login, users complete their profile setup by entering a unique slug.

- **Profile:** A private version of the public profile with additional features, including edit buttons for all data, page visit analytics, and project click insights. If the user is in the trial period, a top bar prompts them to upgrade.

- **Upgrade:** If the trial period expires and the user has no active payment or subscription, this page is displayed to select a plan via Stripe.



---



**Development:**

- **Next.js 15 & React 19:** uses the App Router with Server Components for improved performance. Implements `unstable_cache` to optimize API usage.

- **Mixpanel Analytics:** tracks user interactions on the server side and provides custom reports on app activity.

- **Google Tag Manager & Google Analytics:** enables custom tracking tags and client-side interaction tracking for detailed analytics.

- **Stripe:** handles subscriptions and one-time payments, leveraging webhooks to monitor payment events.

- **Firebase:** utilizes Firestore for data persistence and Storage for file management.



## ⚙️ Tech Stack and tools

Turborepo 

PNPM 

React 

Next.js 

Typescript 

Auth.js 

Google OAuth 

T3 Env 

Zod 

Firebase Firestore Database 

Firebase Storage 

TailwindCSS 

ESLint 

Prettier 

Vercel 

Stripe 

Resend 

Google Analytics 

Mixpanel 



## 🔮 Usage



### Setup External Providers



	1️⃣ Stripe



   1. [Create and setup](https://dashboard.stripe.com/) your account.

   2. Set test mode on.

   3. Create a product with two prices: a recurring by month and a one-off (charge a one-time fee).

   4. Copy both prices ids and paste on env: recurring on `STRIPE_SUBSCRIPTION_PRICE_ID` and one-off on `STRIPE_PAYMENT_PRICE_ID`.

   5. Access `Settings / Billing / Customer Portal` and activate this resource.

   6. Access `Developers / API Keys` and copy both publishable and secret key and paste it respectively on `NEXT_PUBLIC_STRIPE_PUBLIC_KEY` and `STRIPE_SECRET_KEY` env variables. 

   7. To get started with listening events, check out the below section [Listen to Stripe events](#listen-to-stripe-events)



---



	2️⃣ Google Cloud API and Services (Auth)

  

   1. Create or use an existent [project](https://console.cloud.google.com/apis)

   2. Setup the [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent): on authorized domains, add a domain that you own or use vercel.com in case you are deploying and using their domain.

   3. Setup the OAuth Client on [Credentials](https://console.cloud.google.com/apis/credentials). 

      1. Authorized JavaScript Origins: `http://localhost:3000` and `https://`.

      2. Authorized Redirect URIs: `http://localhost:3000/api/auth/callback/google` and `https:///api/auth/callback/google`

   4. Copy both Client ID and Client Secret and paste it respectively on `AUTH_GOOGLE_ID`  and `AUTH_GOOGLE_SECRET` env variables.



---



	3️⃣ Firebase Firestore Database and Storage

  

   1. Create or use a existent [project](https://console.firebase.google.com)

   2. Setup Firebase Database and Storage, this last one needs a Google Billing account attached.

   3. Access `Project Settings / Service Accounts` and generate a private key. A JSON file will be downloaded.

      1. Copy the value of `project_id` to `FIREBASE_PROJECT_ID` env variable

      2. Copy the value of `private_key` to `FIREBASE_PRIVATE_KEY` env variable

      3. Copy the value of `client_email` to `FIREBASE_CLIENT_EMAIL` env variable

   4. Access the Storage section and copy the bucket base url, something like `gs://in-bio-micro-saas.firebasestorage.app` and paste on `FIREBASE_STORAGE_BUCKET` env variable without `gs://`



---



	4️⃣ Google Analytics, Google Tag Manager and Mixpanel Analytics

  

   1. `NEXT_PUBLIC_GOOGLE_TAG_MANAGER`: used to create custom tags for tracking along with Google Analytics. Theses tags are ready to be configured: `cta_home_clicks`, `create_page_effective`, `create_page_intention`, `click_to_upgrade` and `click_to_checkout`.

   2. `NEXT_PUBLIC_GOOGLE_ANALYTICS`: used for tracking interactions on client side.

   3. `MIXPANEL_SECRET`: used for tracking interactions with these events on server side: `page_view`, `page_create_intend`, `page_created` and `checkout_created`.



---



	5️⃣ Misc env

  

   1. `NEXT_PUBLIC_APP_URL`: define your base domain or simply `http://localhost:3000`

   2. `NEXT_PUBLIC_TRIAL_DAYS`: define the number of days that new users can get free access.

   3. `NEXT_PUBLIC_MAX_PROJECTS`: define amax number of projects per page.

   4. `AUTH_SECRET` define a random UUID used on Auth.js.



---



### Listen to Stripe events



	1️⃣ Localhost



   1. Install [Stripe CLI](https://docs.stripe.com/stripe-cli#install).

   2. Sign in with your account and follow th steps: `stripe login`

   3. Forward events to webhook: `stripe listen --forward-to localhost:3000/api/stripe/webhook`

   4. After running the last command, you will receive on terminal a webhook secret key that you can paste on `STRIPE_WEBHOOK_SECRET` env variable.



---



	2️⃣ Production



   1. Access `Developers / Webhooks`

   2. Add an endpoint `https:///api/stripe/webhook` and listen to these four events:

   	- customer.subscription.updated

   	- checkout.session.completed

   	- checkout.session.async_payment_succeeded

   	- customer.subscription.deleted	

   3. Set `STRIPE_WEBHOOK_SECRET` env with 'Signing secret' on endpoint details page.



---



## 🎨 Figma

The UI design was provided by Rocketseat, [check it out](https://www.figma.com/community/file/1456727135365574424).