🪪 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.

📋 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

                                     

🔮 Usage

Setup External Providers

1️⃣ Stripe

1. Create and setup 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

---

2️⃣ Google Cloud API and Services (Auth)

1. Create or use an existent project
2. Setup the OAuth consent screen: 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.
   1. Authorized JavaScript Origins: http://localhost:3000 and https://<YOUR_DOMAIN>.
   2. Authorized Redirect URIs: http://localhost:3000/api/auth/callback/google and https://<YOUR_DOMAIN>/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
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.
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://<YOUR_DOMAIN>/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.