🪐 Orbit

The official Linktree alternative and digital social hub of Yash Vardhan (Yash-pluto). Orbit is a high-performance, serverless Next.js web application that serves as my central link-in-bio command on the internet. It houses my developer ecosystem, social links, resume, and a global, real-time interactive star counter.

✨ Core Features

• ⚡ Serverless Architecture: Built entirely on Next.js App Router with integrated API Route Handlers. No standalone backend required.
• 🌟 Global Star Counter: A live, interactive counter utilizing SWR for background polling and Optimistic UI updates for a zero-latency user experience.
• 🎨 Next-Gen Styling: Designed using the newly released Tailwind CSS v4 for a CSS-first, configuration-free styling approach.
• 🔒 Type-Safe Data: End-to-end type safety from the Mongoose database models up to the React client components using strict TypeScript.
• 📱 Instant Connect: Integrated WhatsApp redirect for seamless networking and direct communication.

🛠️ Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Database: MongoDB via Mongoose
• Data Fetching: SWR & Axios

🚀 Local Development

Want to run Orbit locally? Follow these steps:

1. Clone the repository

git clone https://github.com/Yash-pluto/orbit.git
cd orbit

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file in the root directory and add the following variables:

# Your MongoDB Connection String
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/orbit

# Your Contact Number for the WhatsApp Integration
NEXT_PUBLIC_MOBILE_NO=your_mobile_number_here

4. Start the development server

npm run dev

Open http://localhost:3000 with your browser to see the result.

📂 Project Architecture

orbit/
├── app/
│   ├── api/stars/route.ts   # Serverless API endpoint for the Star Counter
│   ├── globals.css         # Tailwind v4 @theme and base styles
│   ├── layout.tsx          # Root HTML shell
│   └── page.tsx            # Main application UI
├── components/             # Reusable React components (JoinMe, SocialLinks, etc.)
├── data/                   # Static configuration data (socialLinksData.ts)
├── lib/                    # Server-side utilities (mongodb.ts connection cache)
├── models/                 # Mongoose database schemas (Star.ts)
├── public/                 # Static assets (Resume, SVGs, Images)
└── utils/                  # Client-side helper functions