Profile Builder

Link-in-bio profile builder inspired by guns.lol. Built with Next.js, Tailwind CSS and Supabase.

Features

• Secure Authentification options using email or OAuth via Github or Discord
• Fully customizable Profiles:
  • Add a name, bio and location
  • Upload a profile picture
  • Customize design like card colors, shape and border design
  • Choose between several animated and interactive backgrounds
  • Social media links: choose an icon, a tooltip and add links
• Automatic saving of profile content and configuration into the supabase database
• Dashboard, login and profile are fully mobile-responsive

Gallery

Login Page

The login page featuring options for OAuth using Github or Discord.

Dashboard

The app dashboard where users can configure their profile contents and design.

The links section where users can add, edit or reorder links to their social media profiles.

Public Profile

A public user profile with an interactive particle background and customly configured profile with social links.

Tech Stack

Framework & Core

Next.js 15 (App Router): Handles SSR to keep profile loading times fast (<1s).
Typescript: Ensures type safety for profile configs.

Frontend & Styling

Tailwind CSS: Easy styling with utility classes.
Shadcn UI: Accessible react components.
Lucide React: Clean and open-source icon set.

Backend & Database

Supabase / PostgreSQL: Relational database that stores all user profiles.

Authentification

Supabase Auth: Handles session tokens and OAuth.

Deployment

Vercel: Optimized performance for Next.js and a good free plan.

Getting Started

Prerequisites

Node.js: Version 20+
JavaScript Package Manager: e.g. npm, pnpm, bun or yarn

Clone the Repository

git clone https://github.com/RaptorAssassin/profile-builder.git
cd profile-builder

Install Dependencies

npm install

Set Up Environment Variables

Rename the .env.example file to .env and fill it with your data from the Supabase dashboard("connect" button in the header) and the Hackclub CDN dashboard.

.env file

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://<PROJECT_ID>.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_<ID>

# Hackclub CDN
CDN_BASE_URL=https://cdn.hackclub.com/api/v4
CDN_API_KEY=sk_cdn_<KEY>

OAuth Setup

Configure your redirect URLs in Supabase.

Development: http://localhost:3000/auth/callback

Production: https://your-domain.com/auth/callback

Start the App

Development:

npm run dev

Production:

npm run build

View the page at localhost:3000 in your browser.