whoami.page 🚀

A modern, open-source platform for creating and sharing professional profiles. Built with Next.js, TypeScript, and Prisma.

🌟 Features

• Professional Profiles: Create and customize your professional profile
• Experience Timeline: Showcase your work experience and projects
• Social Integration: Connect with other professionals and share updates
• Project Showcase: Display your portfolio projects with rich media support
• Real-time Updates: Engage with your network through posts and interactions
• Multi-platform Contact: Integrated contact methods (Twitter, LinkedIn, GitHub, etc.)

🛠️ Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• Database: PostgreSQL with Prisma ORM
• Authentication: Clerk
• Styling: Tailwind CSS with Radix UI
• File Upload: uploadthing
• State Management: Zustand
• Form Handling: React Hook Form with Zod

📋 Prerequisites

• Node.js 18+
• PostgreSQL database (Recommended: Neon.tech)
• Clerk account for authentication
• Uploadthing account for file uploads

🔧 Service Setup

Database Setup

1. Create Neon Database

   • Visit neon.tech
   • Create new project
   • Copy connection strings (DATABASE_URL and DIRECT_URL)

2. Configure Database URLs

   DATABASE_URL="postgres://user:pass@host/db?sslmode=require"
   DIRECT_URL="postgres://user:pass@host/db?sslmode=require"

File Upload Setup

1. Create Uploadthing Account

   • Visit uploadthing.com
   • Create new project
   • Copy API keys

2. Configure API

   // app/api/uploadthing/core.ts
   import { createUploadthing, type FileRouter } from 'uploadthing/next';
   
   const f = createUploadthing();
   
   export const ourFileRouter = {
     imageUploader: f({ image: { maxFileSize: '4MB' } })
       .middleware(async ({ req }) => {
         return { userId: req.userId };
       })
       .onUploadComplete(async ({ metadata, file }) => {
         return { fileUrl: file.url };
       }),
   } satisfies FileRouter;

Authentication Setup

1. Create Clerk Application
   • Visit Clerk Dashboard
   • Create new application
   • Configure OAuth (GitHub, Google)
   • Set up webhooks

Detailed authentication setup in AUTHENTICATION.md

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/shahfarzane/whoami.page.git
   cd whoami.page

2. Install dependencies

   npm install
   # or
   bun install

3. Set up environment variables

   cp .env.example .env

4. Set up the database

   npx prisma generate
   npx prisma db push

5. Run the development server

   npm run dev
   # or
   bun dev

🔑 Environment Variables

# Database
DATABASE_URL="postgresql://..."
DIRECT_URL="postgresql://..."

# Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_..."
CLERK_SECRET_KEY="sk_..."
CLERK_WEBHOOK_SECRET="whsec_..."

# File Upload
UPLOADTHING_SECRET="sk_..."
UPLOADTHING_APP_ID="..."

# OAuth
GITHUB_CLIENT_ID="..."
GITHUB_CLIENT_SECRET="..."
GOOGLE_CLIENT_ID="..."
GOOGLE_CLIENT_SECRET="..."

📂 Project Structure

whoami.page/
├── app/                  # Next.js app directory
├── components/           # Reusable components
├── context/             # React context providers
├── hooks/               # Custom React hooks
├── lib/                 # Utility functions
├── prisma/              # Database schema
├── providers/           # Higher-order components
├── public/              # Static files
├── store/               # State management
├── styles/              # Global styles
└── types/               # TypeScript types

🔍 Schema Overview

Key models include:

• User: Professional profile information
• Projects: Portfolio projects showcase
• UserExperience: Work experience timeline
• Posts: Social updates and interactions
• ContactMethod: Multiple contact platforms

🚀 Deployment

The application can be deployed on:

• Vercel
• Netlify
• Self-hosted options

🛟 Support & Troubleshooting

Common issues and solutions:

1. Database Connection

   • Check connection strings
   • Verify SSL settings
   • Ensure proper permissions

2. Authentication

   • Verify OAuth callback URLs
   • Check environment variables
   • Validate webhook endpoints

3. File Upload

   • Check file size limits
   • Verify API keys
   • Confirm proper CORS settings

For support:

• Open an issue
• Check documentation
• Join discussions

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing)
5. Open Pull Request

🔐 Licensing

• Non-commercial: AGPL-3.0 License
• Commercial: Commercial License

---

Built with ❤️ by @shahfarzane