Know what runs your page.

Hosted

Socialize account, editor, handle, and deployment

Self-hosted

Your repository, backend project, domain, and operations

Shared core

Identity, links, socials, availability, accent, and developer activity

Portability

Backup/migration JSON plus a shared nested activity shape

Hosted mode is for developers who want to sign in, arrange their work, and share a URL. Self-hosted mode is a stripped Next.js application with a public profile, a private manager, and a cloud backend you control.

1. 01

   Create an account

   Open Sign up and use email, Google, or GitHub. If the same email already belongs to another sign-in method, use that original method first rather than creating a duplicate identity.

2. 02

   Claim a handle

   Pick the short public identifier used in your Socialize URL. Handles are unique, may be moderated, and must not impersonate another person or organization.

3. 03

   Build the profile

   Add your introduction, projects, writing, contact link, and social profiles. The Activity tab can add sampled public GitHub work with repository and display controls. Use descriptions to tell visitors what they will find before they open a link.

4. 04

   Preview and publish

   Check every destination, hide unfinished entries, then publish. Public content can be indexed, copied, archived, or shared by visitors, so keep private details out of the profile.

Account ownership

Keep at least one sign-in method available and protect the identity provider behind it. Socialize support should never ask for your password, OAuth secret, recovery code, or server admin credentials.

The Activity tab controls the public GitHub username, placement before or after links, headings, a 1–10 commit limit, repository/date labels, and every contribution-calendar layer: yearly total, grid, month and weekday labels, intensity legend, year selector, and language summary. The connection check finds public data; it does not verify ownership.

Repository selection

• Recent automatically samples up to three repositories from the latest public push events.
• Include uses only the selected public owner/repository slugs, up to five.
• Exclude removes up to five selected slugs from the automatic recent set.

Selected repositories are rechecked as public. Repository filters apply to commits and languages; GitHub's contribution calendar remains account-wide. With a server token, its public GraphQL calendar supplies the yearly total, weeks, days, and contribution levels. Without one, the profile renders the same geometry from a clearly labeled recent public-event sample. GitHub results remain third-party, unverified, and may lag.

Caching and request limits

Public events are revalidated after five minutes; contribution calendars, repository, commit, and language lookups are cached for one hour. Successful route responses use a five-minute CDN cache with up to one additional stale hour. GitHub's event feed can itself lag by about 30 seconds to six hours.

The route applies a best-effort limit of 30 requests per source IP per 60 seconds. For distributed production enforcement, add a Vercel Firewall rate-limit rule for /api/github-activity and monitor429 responses.

The template uses Next.js with secure sign-in and a profile database. Your profile renders from profile.config.ts until the database has a saved profile. The private manager writes to the configured document only after the backend finds the signed-in UID in the privateowners allowlist.

• Configure identity and fallback data in profile.config.ts.
• Put backend web-app values in .env.local locally and in your hosting environment for production.
• If developer activity is enabled, optionally configure a server-only GITHUB_TOKEN with no private-repository access.
• Deploy firestore.rules and grant one trusted account the owners/{uid} allowlist document with its Boolean enabled field set to true.
• Test public reads, signed-out write rejection, owner writes, and token refresh before launch.

The self-hosted edition defines the profile intypes/profile.ts. Its private /manage route includes an Import hosted JSON action that converts a dashboard export into this model for review before publishing. Identity and social fields are mapped into their stripped representations, and the nested developerActivity object shown below is shared. Hosted built-in icon IDs are reported for replacement, and hosted Firebase images should be re-uploaded before the old account is removed.

type Profile = {
  name: string;
  handle: string;
  role: string;
  bio: string;
  location: string;
  availability: string;
  avatarUrl: string;
  accent: string;
  sections: Array<{
    id: string;
    title: string;
    mediaUrl?: string;
    mediaType?: "icon" | "thumbnail";
    hideTitle?: boolean;
  }>;
  links: Array<{
    id: string;
    title: string;
    description: string;
    url: string;
    enabled: boolean;
    sectionId?: string;
    mediaUrl?: string;
    mediaType?: "icon" | "thumbnail";
  }>;
  socials: Array<{
    id: string;
    label: string;
    url: string;
  }>;
  developerActivity?: {
    enabled: boolean;
    githubUsername: string;
    placement: "before-links" | "after-links";
    repositories: {
      mode: "recent" | "include" | "exclude";
      names: string[]; // max 5 owner/repository slugs
    };
    commits: {
      enabled: boolean;
      title: string;
      limit: number; // 1-10
      showRepository: boolean;
      showDate: boolean;
    };
    coding: {
      enabled: boolean;
      title: string;
      windowDays: 7 | 14 | 30;
      showContributionCount: boolean;
      showHeatmap: boolean;
      showMonthLabels: boolean;
      showWeekdayLabels: boolean;
      showLegend: boolean;
      showYearSelector: boolean;
      showLanguages: boolean;
    };
  };
};

Link behavior

• enabled: false keeps a link in the editor but removes it from the public page.
• Primary links accept http, https, and supported contact URLs. Social links require public web URLs.
• Link IDs should remain stable across edits so reorder and update operations do not create unnecessary records.
• Link order is the array order. Dragging between sections updates both that order and sectionId; arrow and section controls remain available for keyboard users.
• Links and section headings can use an optional compact icon or wide thumbnail from an uploaded image, an https:// URL, or a local public path in the self-hosted edition.

Public by design

Names, bios, locations, availability, avatars, and enabled links render on a public page. Do not put access tokens, private repository URLs, home addresses, private phone numbers, or authentication data in the profile model.

Hosted service

Socialize sign-in handles email, Google, and GitHub identities. The service associates the authenticated account ID with a profile. A valid session alone must never grant access to another account's profile.

Self-hosted edition

The template checks for an owners/{uid} document in both the interface gate and database rules, and requires its Boolean enabled field to be true. The interface check helps the owner understand access state; the database rule remains the security boundary.

function isOwner() {
  return request.auth != null
    && exists(/databases/$(database)/documents/owners/$(request.auth.uid))
    && get(/databases/$(database)/documents/owners/$(request.auth.uid)).data.enabled == true;
}

match /profiles/{profileId} {
  allow read: if true;
  allow create, update, delete: if isOwner();
}

• Open every link and confirm its final destination.
• Check the page at narrow mobile, tablet, laptop, and large desktop widths.
• Navigate with a keyboard and confirm focus remains visible.
• Use descriptive link titles and useful alternative text for the avatar.
• Run npm run typecheck and npm run build before deployment.
• Verify a signed-out visitor can read the profile but cannot write its document.
• Exercise the GitHub activity route, confirm sampling copy, and test the application and Vercel Firewall rate-limit paths.
• Review the Acceptable Use Policybefore publishing hosted content.

Include the affected route, expected behavior, actual behavior, browser or runtime version, and the smallest reproduction you can share. Remove access tokens, service-account keys, passwords, and personal data first.