StartupForge (Frontend)

StartupForge is a web platform designed to connect startup founders with passionate collaborators. It serves as a matchmaking ecosystem where founders can post opportunities and manage applicants, collaborators can browse opportunities and join startups, and administrators can oversee the network.

🌐 Live Website: https://startup-forge-umber.vercel.app/

---

📖 Project Overview

StartupForge acts as a bridge in the startup ecosystem:

• Founders can establish a brand presence, publish role listings, and manage incoming applications.
• Collaborators can discover exciting new ventures, filter based on work environments and skills, and apply to roles.
• Administrators have oversight of system health, user validation, startup listings, and Stripe premium logs.

---

⚡ Core Features

🔐 Authentication & Session Management

• Better Auth Integration: Highly secure credential sign-up and sign-in flow.
• Social Login: Single-click authentication using Google OAuth.
• Role-Based Provisioning: Dynamic onboarding specifying role type (Founder vs. Collaborator).
• Profile Image Upload: Integrated image uploading to ImgBB.

📊 Role-Based Dashboards

• Founder Dashboard:
  • Manage startup profile page.
  • Create and manage opportunity postings (Job roles).
  • Track, view, and respond to collaborator applications.
• Collaborator Dashboard:
  • Track active application status.
  • Browse opportunity listings matching skills.
  • Update collaborator profile details.
• Admin Dashboard:
  • General system health and statistics (built with custom charts).
  • Manage and review system users.
  • Oversee startups listing.
  • Monitor Stripe transaction logs.

🔍 Opportunities & Startup Discovery

• Explore Portal: Search, paginate, and filter startup listings and job opportunities.
• Responsive Filtering: Filter by industry types (FinTech, SaaS, AI/ML, CleanTech, Web3, etc.) and work environments (Remote, On-site, Hybrid).

💳 Payments Integration

• Stripe Payments: Safe payment integration for transactions and premiums checkout.

---

🛠️ Tech Stack & Technologies

• Frontend Core: Next.js (App Router, Server Components) & React 19
• Authentication: Better Auth with MongoDB Adapter
• Database Connection: MongoDB via native driver
• Styling: Tailwind CSS v4 & DaisyUI v5 (modern CSS utility classes & component styling)
• UI Components: HeroUI (@heroui/react & @heroui/styles)
• Animations: Motion (Framer Motion)
• Data Visualizations: Recharts (interactive data charts for admin overview)
• Payment Gateway: Stripe (@stripe/stripe-js & stripe)

---

📦 Key Dependencies

Below are the primary libraries powering the StartupForge application:

Runtime Dependencies

• next: ^16.2.9 - Next.js framework
• react & react-dom: 19.2.4 - React UI library
• better-auth: ^1.6.20 - Core authentication framework
• @better-auth/mongo-adapter: ^1.6.20 - MongoDB adapter for Better Auth
• mongodb: ^7.3.0 - Database driver
• @heroui/react & @heroui/styles: ^3.2.1 - Accessible UI components
• motion: ^12.41.0 - Fluent animation library
• recharts: ^3.9.0 - Chart rendering library
• stripe & @stripe/stripe-js: Payments SDK
• @gravity-ui/icons: ^2.18.0 - Premium icon set

Development Dependencies

• tailwindcss & @tailwindcss/postcss: ^4 - Utility-first CSS styling
• daisyui: ^5.5.23 - Tailored tailwind CSS components
• babel-plugin-react-compiler: 1.0.0 - React compiler optimization plugin
• eslint & eslint-config-next: Code quality linting

---

📂 Key File Structure

src/
├── app/
│   ├── (Auth)/                  # Sign-in & Sign-up pages
│   ├── (Main)/                  # Public access profiles & layouts
│   ├── api/                     # Backend API handlers (Auth/Stripe sessions)
│   ├── dashboard/               # Role-based views (admin, founder, collaborator)
│   ├── opportunities/           # Browse opportunities portal
│   └── startups/                # Startup lists & profiles
├── components/                  # Common UI components (Navbar, Topbar, Sidebar, OpportunityCard)
├── lib/                         # Clients initialization (Better Auth client, Token sync hook)
└── public/                      # Static resources (images, vectors)

---

⚙️ Configuration & Setup

Environment Variables

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

# Better Auth Configuration
BETTER_AUTH_SECRET=your_auth_secret_key
BETTER_AUTH_URL=http://localhost:3000

# Google OAuth Keys
GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Database Details
AUTH_DB_NAME=StartUpForge
MONGO_URI=your_mongodb_connection_uri

# ImgBB Key for file uploads
NEXT_PUBLIC_IMGBB_API_KEY=your_imgbb_key

# Backend API Endpoint
NEXT_PUBLIC_API_URL=http://localhost:5000

# Stripe Payments Configuration
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
INTERNAL_SECRET=your_internal_shared_secret

---

🚀 Running Locally

Follow these steps to set up and run StartupForge on your local machine:

1. Clone & Navigate

Ensure you have cloned the repository and navigated to the project root directory:

cd start-up-forge

2. Install Dependencies

Install all required Node.js packages using npm:

npm install

3. Setup Environment Variables

Copy or create the .env file in the root folder with all correct keys listed in the Environment Variables section.

4. Start the Development Server

Run the local next development environment:

npm run dev

5. Access the Application

Open http://localhost:3000 inside your web browser.

Important

This frontend application communicates with a companion backend server running at http://localhost:5000 to fetch opportunities, user lists, and write backend database actions. Please ensure the backend repository is also running concurrently.

---

🔗 Live Deploy & Resources

• Live Deployment: https://startup-forge-umber.vercel.app/
• Next.js Documentation: Next.js Documentation
• Stripe API Documentation: Stripe Docs
• Better Auth Documentation: Better Auth Docs