feds.cc

feds.cclol is a feature-rich link-in-bio tool with over 80,000 users.

Table of Contents

1. Intro
2. Techstack
3. Features
4. Project Structure

Introduction

In this repository, you'll find snippets of code from my solo development and design of feds.lol. Additionally, the /images folder contains actual screenshots of various pages, features and UI elements of the platform. This repo doesn’t include full business logic or anything sensitive - just the core structure and my coding approach.

Further down, you can explore the the nearly complete folder structure of the project.

Techstack

• nextjs 15 - framework
• typescript - language
• tailwindcss - css
• mysql - database
• drizzle - orm
• zustand - global state management
• zod - validation
• mailersend - emails
• stripe - payments
• vitest - tests

Features

• server-side rendering (SSR)
• static site genetation (SSG)
• incremental static regeneration (ISR)
• react server components (RSC)
• streaming / partial loading (suspense + loading.tsx)
• dynamic routing with catch-all and optional segments
• nested layouts and parallel routes
• multi-tenancy e.g. maria.slat.cc
• file-based and dynamic metadata generation
• mutations via server actions
• tag-based revalidation (on-demand cache updates)
• login/register with discord oauth
• dynamic og:image generation (custom Open Graph API)
• webhooks for syncing external actions
• rich text editor
• 30+ advanced effects/animations created with css and framer-motion
• media proxy
• file uploading (images, audio, videos)
• integrated with spotify, discord, soundcloud, roblox, yt, twitch, steam, deezer, iconify-icons, github api
• reordering links, widgets, badges etc.
• promise-based toast system (auto cancel / status updates)
• analytics (top links, total and unique views, audience geo)
• admin dashboard for user management and editing articles
• state sync with zustand - instant live biolink preview feature
• analyze and visualize audio frequency - audio visualizer feature
• type-safe forms with zod + react-hook-form
• responsive modals – native drawers for mobile, dialogs on desktop
• partial use of shadcn/ui for consistent styling and accessible primitives

Project Structure

  ├── app
  │   ├── (auth)
  │   ├── (errors)
  │   ├── (marketing)
  │   ├── [username]
  │   │   ├── page.tsx
  │   │   └── opengraph-image.tsx
  │   ├── api
  │   ├── casino
  │   ├── dashboard
  │   ├── docs.feds.lol
  │   │   └── [[...slug]]
  │   ├── error.tsx
  │   ├── not-found.tsx
  │   ├── providers.tsx
  │   ├── manifest.ts
  │   ├── robots.ts
  │   ├── sitemap.ts
  │   └── ...
  ├── components
  │   ├── dashboard
  │   ├── email
  │   ├── form
  │   ├── media
  │   ├── profile
  │   ├── shared
  │   └── ui
  ├── hooks
  ├── lib
  │   ├── analytics
  │   ├── api
  │   ├── auth
  │   ├── casino
  │   ├── constants
  │   ├── drizzle
  │   ├── features
  │   │   ├── accounts
  │   │   ├── actions
  │   │   ├── app
  │   │   ├── badges
  │   │   ├── comments
  │   │   ├── config
  │   │   │   ├── actions
  │   │   │   │   ├── assets.ts
  │   │   │   │   ├── avatar.ts
  │   │   │   │   ├── card.ts
  │   │   │   │   ├── colors.ts
  │   │   │   │   ├── comments.ts
  │   │   │   │   ├── fonts.ts
  │   │   │   │   ├── info.ts
  │   │   │   │   └── ...
  │   │   │   ├── queries.ts
  │   │   │   ├── defaults.ts
  │   │   │   ├── schemas.ts
  │   │   │   └── ...
  │   │   ├── embeds
  │   │   ├── giveaways
  │   │   ├── links
  │   │   ├── metadata
  │   │   ├── orders
  │   │   ├── profile
  │   │   ├── tags
  │   │   ├── templates
  │   │   ├── tracks
  │   │   ├── users
  │   │   │   ├── actions
  │   │   │   │   ├── email.ts
  │   │   │   │   ├── password.ts
  │   │   │   │   ├── username.ts
  │   │   │   │   ├── index.ts
  │   │   │   │   └── ...
  │   │   │   ├── utils
  │   │   │   │   ├── email.ts
  │   │   │   │   ├── user-id.ts
  │   │   │   │   ├── index.ts
  │   │   │   │   └── ...
  │   │   │   ├── validators
  │   │   │   │   ├── email.ts
  │   │   │   │   ├── username.ts
  │   │   │   │   ├── index.ts
  │   │   │   │   └── ...
  │   │   │   ├── queries.ts
  │   │   │   ├── roles.ts
  │   │   │   ├── schemas.ts
  │   │   │   └── types.ts
  │   │   └── ...
  │   ├── integrations
  │   ├── media
  │   ├── middleware
  │   ├── routes
  │   ├── server
  │   ├── stores
  │   ├── utils
  │   ├── zod
  │   ├── config.ts
  │   ├── email.ts
  │   ├── stripe.ts
  │   ├── types.ts
  │   ├── webhook.ts
  │   └── ...
  ├── styles
  ├── public
  ├── tests/casino
  └── ...

Showcase (old)

Small showcase of some features such as tilting card, audio visualizer and thunder effect.

2024-10-03.18-02-59.-.Trim.mp4

Hero (old)