• About
• Features
• Tech Stack
• Quick Start
• Environment Setup
• Project Structure
• Content Management
• Admin Panel
• API Reference
• Deployment
• Contributing
• License

NextGenXplorer is a cutting-edge digital platform that decodes the future of technology. We dissect and debate technological forces—from artificial intelligence to quantum computing—that are actively reshaping our world and defining the next chapter of human history.

To produce visually striking, deeply researched content that demystifies complex technology and provokes critical thought about our digital future.

• Dynamic video archives powered by Firebase Firestore
• Automatic YouTube metadata fetching (titles, thumbnails, descriptions)
• Public/Private video visibility controls
• Related links for each video
• Responsive video grid layout

• Dedicated apps page for software distribution
• Support for external hosting (MediaFire, Google Drive, GitHub)
• Logo and download URL management
• Full CRUD operations via admin panel

• Real-time visitor tracking
• Session-based counting (prevents duplicates)
• Admin dashboard with statistics
• Firebase-powered analytics storage

• JWT-based authentication
• Protected API routes
• Video management (add, edit, delete, visibility toggle)
• App management (add, edit, delete)
• Visitor statistics dashboard

• Dark/Light theme support
• Fully responsive design (mobile-first)
• Smooth animations and transitions
• Accessible components (ARIA compliant)
• ShadCN UI component library

• Dynamic social media links
• Author profiles
• Contact form integration
• Multiple platform support

• Node.js 18+ and npm
• Firebase account and project
• Git

1. Clone the repository

   git clone https://github.com/mithun50/NexGen_Website.git
   cd NexGen_Website

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Edit .env and add your Firebase credentials (see Environment Setup)

4. Run development server

   npm run dev

5. Open in browser Navigate to http://localhost:9002

npm run dev          # Start development server
npm run build        # Build for production
npm start            # Start production server
npm run lint         # Run ESLint
npm run typecheck    # Run TypeScript type checking

Create a .env file in the root directory with the following variables:

ADMIN_PASSWORD=your_secure_admin_password
JWT_SECRET=your_jwt_secret_key_here

Generate JWT Secret:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

FIREBASE_PROJECT_ID=your_project_id
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=your_service_account@your_project.iam.gserviceaccount.com

Alternative: Use service account JSON

FIREBASE_SERVICE_ACCOUNT_JSON='{"type":"service_account","project_id":"..."}'

NexGen_Website/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── (pages)/
│   │   │   ├── page.tsx          # Home page
│   │   │   ├── about/            # About page
│   │   │   ├── apps/             # Apps distribution page
│   │   │   ├── contact/          # Contact page
│   │   │   ├── socials/          # Social links page
│   │   │   ├── youtube/          # Video archives
│   │   │   └── admin/            # Admin panel
│   │   ├── api/                  # API Routes
│   │   │   ├── apps/             # Apps CRUD operations
│   │   │   ├── videos/           # Video management
│   │   │   ├── stats/            # Visitor analytics
│   │   │   └── auth/             # Authentication
│   │   ├── layout.tsx            # Root layout
│   │   └── globals.css           # Global styles
│   ├── components/               # React components
│   │   ├── ui/                   # ShadCN UI components
│   │   ├── layout/               # Layout components
│   │   │   ├── navbar.tsx
│   │   │   └── footer.tsx
│   │   ├── auth/                 # Auth components
│   │   └── visitor-tracker.tsx   # Analytics
│   ├── lib/                      # Utility libraries
│   │   ├── firebase.ts           # Firebase client
│   │   ├── firebase-admin.ts     # Firebase admin
│   │   ├── auth.ts               # Auth utilities
│   │   └── utils.ts              # Helper functions
│   ├── hooks/                    # Custom React hooks
│   └── data/                     # Static data
│       └── content.json          # Site content
├── public/                       # Static assets
├── .env                          # Environment variables
├── next.config.js                # Next.js configuration
├── tailwind.config.ts            # Tailwind configuration
├── tsconfig.json                 # TypeScript configuration
└── package.json                  # Dependencies

Manage site-wide content like channel info, social links, and author details:

{
  "channelInfo": {
    "name": "NextGenXplorer",
    "goal": "Exploring the future of technology",
    "about": "A digital think tank dedicated to..."
  },
  "socials": [
    {
      "name": "YouTube",
      "url": "https://youtube.com/@nextgenxplorer",
      "handle": "@nextgenxplorer"
    }
  ],
  "authors": [
    {
      "name": "Your Name",
      "url": "https://instagram.com/yourhandle",
      "handle": "@yourhandle"
    }
  ]
}

Videos are stored in Firebase Firestore under the videos collection:

Document Structure:

{
  id: string;                    // Auto-generated
  youtubeUrl: string;            // Full YouTube URL
  youtubeId: string;             // Extracted video ID
  title: string;                 // Fetched from YouTube
  description: string;           // Fetched from YouTube
  thumbnailUrl: string;          // Max resolution thumbnail
  relatedLinks: Array<{
    label: string;
    url: string;
  }>;
  isPublic: boolean;             // Visibility flag
  createdAt: Timestamp;          // Creation date
}

Apps are stored in the apps collection:

Document Structure:

{
  id: string;                    // Auto-generated
  name: string;                  // App name
  description: string;           // App description
  logoUrl: string;               // Logo image URL
  downloadUrl: string;           // Download link
  createdAt: Timestamp;          // Creation date
  updatedAt?: Timestamp;         // Last update
}

Visitor statistics are stored in stats/visits:

{
  count: number;                 // Total visitor count
}

Access the admin panel at /admin after logging in at /login.

• Real-time visitor statistics
• Quick overview of content

• Add Videos: Paste YouTube URL, add related links, set visibility
• Edit Videos: Modify related links and visibility
• Delete Videos: Remove videos from archive
• Auto-fetch: Automatically retrieves video metadata

• Add Apps: Name, description, logo URL, download URL
• Edit Apps: Update app information and links
• Delete Apps: Remove apps from distribution

sequenceDiagram
    participant User
    participant Login Page
    participant API
    participant Firebase

    User->>Login Page: Enter password
    Login Page->>API: POST /api/auth/login
    API->>API: Verify password
    API->>User: Set JWT cookie
    User->>Admin Panel: Access /admin
    Admin Panel->>API: Request with cookie
    API->>API: Verify JWT
    API->>Firebase: Fetch data
    Firebase-->>API: Return data
    API-->>Admin Panel: Display data

Fetch videos (public or all for admin)

Response:

[
  {
    "id": "video123",
    "youtubeUrl": "https://youtube.com/watch?v=...",
    "title": "Video Title",
    "thumbnailUrl": "https://...",
    "relatedLinks": [],
    "isPublic": true
  }
]

Add new video (admin only)

Request:

{
  "youtubeUrl": "https://youtube.com/watch?v=...",
  "relatedLinks": [{"label": "Link", "url": "https://..."}],
  "isPublic": true
}

Delete video (admin only)

Request:

{
  "id": "video123"
}

Fetch all apps (public)

Add new app (admin only)

Request:

{
  "name": "My App",
  "description": "App description",
  "logoUrl": "https://...",
  "downloadUrl": "https://..."
}

Update app (admin only)

Request:

{
  "id": "app123",
  "name": "Updated Name",
  "description": "Updated description",
  "logoUrl": "https://...",
  "downloadUrl": "https://..."
}

Delete app (admin only)

Get visitor count (admin only)

Increment visitor count (public)

1. Connect Repository

   • Link your GitHub repository to Netlify

2. Configure Build Settings

   [build]
     command = "npm run build"
     publish = ".next"

3. Set Environment Variables

   • Add all .env variables in Netlify dashboard

4. Deploy

   • Push to main branch triggers automatic deployment

npm install -g vercel
vercel --prod

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add amazing feature'

4. Push to branch

   git push origin feature/amazing-feature

5. Open a Pull Request

• Follow TypeScript best practices
• Maintain existing code style
• Write meaningful commit messages
• Test thoroughly before submitting
• Update documentation as needed

sequenceDiagram
    participant Browser
    participant VisitorTracker
    participant API
    participant Firestore

    Browser->>VisitorTracker: Load page
    VisitorTracker->>VisitorTracker: Check session storage
    alt Not counted
        VisitorTracker->>API: POST /api/stats
        API->>Firestore: Increment count
        Firestore-->>API: Success
        API-->>VisitorTracker: { success: true }
        VisitorTracker->>VisitorTracker: Mark as counted
    else Already counted
        VisitorTracker->>VisitorTracker: Skip tracking
    end

sequenceDiagram
    participant Admin
    participant AdminPage
    participant API
    participant verifyAdmin
    participant Firestore

    Admin->>AdminPage: Access /admin
    AdminPage->>API: GET /api/stats
    API->>verifyAdmin: Verify JWT cookie
    alt Authorized
        API->>Firestore: Read stats
        Firestore-->>API: Return data
        API-->>AdminPage: Display data
    else Unauthorized
        API-->>AdminPage: 401 Error
        AdminPage->>AdminPage: Redirect to login
    end

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

• Next.js - The React Framework
• Firebase - Backend infrastructure
• ShadCN UI - Beautiful components
• Tailwind CSS - Utility-first CSS
• Lucide Icons - Icon library

• 🐛 Report Issues
• 💬 Discussions
• 📧 Contact: [Your Email]