NSCP-SPADES - Startup Networking Platform

A professional networking platform designed for startup founders, entrepreneurs, and innovators. Connect with like-minded people, showcase your startup, share projects, and build real professional relationships.

Table of Contents

1. What This Project Does
2. Tech Stack
3. How It's Built
4. Project Structure
5. Data Models
6. Core Features
7. Setup Guide
8. Environment Configuration
9. Running the App
10. How Everything Works
11. API Endpoints
12. Authentication

---

What This Project Does

This web application lets startup founders and entrepreneurs:

• Build professional profiles with skills and experience
• Register and showcase startups with complete details
• Share updates and posts about their journey
• Create and display projects
• Connect with others by following them
• Message other members directly
• Search for startups, projects, and people
• Network and collaborate within the startup ecosystem

---

Tech Stack

Frontend

• Next.js 15.5.4: React framework handling both frontend and backend. Think of it as the foundation.
• React 19.2.0: JavaScript library for building the user interface.
• Tailwind CSS: Utility-first styling system.
• Shadcn UI Components: Pre-built UI elements.
• Framer Motion: Smooth animations and transitions.
• Next Themes: Dark/light mode support.

Backend

• Next.js API Routes: Backend functionality built into Next.js.
• MongoDB: Database storing all application data.
• Mongoose: MongoDB object modeling tool.
• NextAuth.js: Handles authentication and sessions.

Security

• NextAuth.js v5: Modern authentication system.
• bcryptjs: Password encryption.
• JWT: Secure session tokens.

AI Integration

• Google Generative AI: Powers AI features like message reply suggestions.

Additional Tools

• Zod: Data validation.
• React Hook Form: Form handling.
• date-fns: Date formatting.
• Lucide React: Icon library.

---

How It's Built

This is a full-stack application combining:

1. Frontend: What users see in their browser
2. Backend: Server logic processing requests
3. Database: Permanent data storage

How Next.js Works Here

Next.js combines frontend and backend:

1. Pages/Routes: Files in app folder become web pages

   • app/page.js → homepage
   • app/home/page.jsx → /home
   • app/profile/page.jsx → /profile

2. API Routes: Files in app/api become backend endpoints

   • app/api/posts/route.js → handles posts
   • app/api/users/[id]/route.js → handles user data

3. Server Components: Some components render on the server first, making the app faster.

---

Project Structure

hackathon/ ├── app/ # Main application │ ├── page.js # Landing page │ ├── layout.js # App wrapper │ ├── globals.css # Global styles │ │ │ ├── (main)/ # Protected pages (login required) │ │ ├── home/ # Dashboard/feed │ │ ├── messages/ # Messaging │ │ ├── network/ # Connections │ │ ├── profile/ # User profiles │ │ ├── post/[id]/ # Post details │ │ ├── project/[id]/ # Project details │ │ ├── startup/[id]/ # Startup pages │ │ ├── startups/ # Browse startups │ │ └── search/ # Search │ │ │ ├── auth/ # Authentication │ │ ├── login/ # Login page │ │ └── register/ # Sign up page │ │ │ └── api/ # Backend endpoints │ ├── auth/ # Auth APIs │ ├── posts/ # Post management │ ├── projects/ # Project management │ ├── startups/ # Startup management │ ├── users/ # User operations │ ├── conversations/ # Messaging │ └── upload/ # File uploads │ ├── components/ # Reusable UI components │ ├── ui/ # Basic elements │ ├── auth/ # Auth forms │ ├── layout/ # Header/footer │ ├── project/ # Project components │ └── startup/ # Startup components │ ├── lib/ # Utilities │ ├── models/ # Database schemas │ │ ├── user.model.js │ │ ├── post.model.js │ │ ├── startup.model.js │ │ ├── project.model.js │ │ └── message.model.js │ ├── mongoose.js # Database connection │ └── utils.js # Helper functions │ ├── contexts/ # React state management ├── auth.js # Auth configuration ├── middleware.js # Route protection └── package.json # Dependencies

Structure Breakdown

• app/: All pages and API routes
• components/: Reusable UI pieces
• lib/models/: Database data structure definitions
• lib/mongoose.js: Database connection
• auth.js: Authentication setup
• middleware.js: Checks login status before page access

---

Data Models

Data models define how information is structured in the database.

User Model

User account information.

Fields:

• name: Full name
• email: Email (unique, used for login)
• username: Unique username
• password: Encrypted password
• bio: User description
• skills: Array of skills
• avatar: Profile picture
• coverImage: Banner image
• location: City/country
• position: Job title
• company: Current company
• website: Personal website
• social: Social media links
• followers: Array of follower IDs
• following: Array of following IDs
• createdAt: Account creation date

Startup Model

Company information.

Fields:

• name: Startup name
• slug: URL-friendly name
• description: Company description
• logo: Company logo
• coverImage: Banner image
• industry: Business sector
• stage: Funding stage
• location: Company location
• website: Company website
• foundedDate: Launch date
• founder: Founder user ID
• team: Team members and roles
• showcase: Featured projects
• social: Social media links
• followers: Follower IDs
• projects: Project IDs

Post Model

Social media posts.

Fields:

• content: Post text
• author: Author user ID
• startup: Related startup (optional)
• images: Image URLs
• likes: User IDs who liked
• comments: Array of comments
• shares: Share information
• createdAt: Post timestamp

Project Model

Startup projects.

Fields:

• title: Project name
• description: Project details
• startup: Parent startup ID
• creator: Creator user ID
• status: Current status
• tags: Keywords
• links: Related URLs
• images: Screenshots
• startDate: Start date
• endDate: End date (optional)
• likes: User IDs who liked
• comments: Project comments

Message & Conversation Models

Direct messaging.

Message Fields:

• conversation: Conversation ID
• sender: Sender user ID
• content: Message text
• read: Read status
• createdAt: Timestamp

Conversation Fields:

• participants: User IDs in conversation
• lastMessage: Most recent message
• updatedAt: Last activity

---

Core Features

User Authentication

• Email and password registration
• Encrypted password storage
• Secure login with session management
• Automatic redirects based on auth status
• Protected routes

User Profiles

• Create and edit profiles
• Add skills, bio, location, social links
• Upload profile and cover images
• View other profiles
• Follow/unfollow system

Startup Management

• Register startups with complete details
• Upload logos and covers
• Add team members
• Display showcase projects
• Track followers
• Edit information

Social Feed

• Create posts with text and images
• Like and comment
• Share posts
• View feed from followed accounts
• Search posts

Project Showcase

• Create projects linked to startups
• Add descriptions, images, links
• Tag with keywords
• Track status
• Get likes and comments

Networking

• Follow users and startups
• Browse connections
• Search by name, skills, location
• View mutual connections

Messaging

• Direct messages to users
• Real-time delivery
• Conversation history
• AI-powered reply suggestions

Search

• Search startups by name or industry
• Search users by name or skills
• Search projects by title or tags
• Filter and sort results

Dark Mode

• Toggle light/dark themes
• Saved per user

---

Setup Guide

Quick Start Decision Tree

Have .env.local with MongoDB configured?

• Yes + Have Node.js/pnpm: Run pnpm install → pnpm dev (5 min)
• Yes + Fresh device: Install Node.js/pnpm → pnpm install → pnpm dev (20 min)
• No: Follow complete setup below (40 min)

Complete Setup (Fresh Start)

Step 1: Install Software

1.1 Install Node.js

1. Download from https://nodejs.org/ (LTS version)
2. Run installer with default settings
3. Verify: node --version

1.2 Install pnpm powershell npm install -g pnpm

Verify: pnpm --version

Step 2: Get Project Files

Option A: Clone bash git clone https://github.com/Adil027/NSCP-SPADES.git cd NSCP-SPADES

Option B: Download ZIP Extract to Desktop, open terminal in folder.

Step 3: Install Dependencies

powershell cd C:\Users\YourUsername\Desktop\NSCP-SPADES-main pnpm install

This downloads all required packages (3-5 minutes).

Step 4: Setup MongoDB

4.1 Create Account

1. Go to https://www.mongodb.com/cloud/atlas
2. Sign up (free tier)
3. Create cluster (M0 Sandbox, AWS, closest region)

4.2 Create Database User

1. Database Access → Add New Database User
2. Username: admin
3. Password: Autogenerate (save it!)
4. Privileges: Read and write to any database

4.3 Whitelist IP

1. Network Access → Add IP Address
2. Allow Access from Anywhere

4.4 Get Connection String

1. Database → Connect → Connect your application
2. Copy connection string
3. Replace with your actual password

Example:

mongodb+srv://admin:[email protected]/?retryWrites=true&w=majority

Step 5: Configure Environment

Create .env.local in project root:

env

MongoDB Connection

MONGODB_URL="mongodb+srv://admin:[email protected]/?retryWrites=true&w=majority&appName=Cluster0"

NextAuth Configuration

NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="generate-random-32-character-string"

Google AI (optional)

GEMINI_API_KEY="your-key-here"

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

Get GEMINI_API_KEY (optional): Visit https://makersuite.google.com/app/apikey

Step 6: Run Application

powershell

Clear cache (first time)

Remove-Item -Recurse -Force .next -ErrorAction SilentlyContinue

Start server

pnpm dev

Wait for "Ready" message, then visit http://localhost:3000

Step 7: Create Account

1. Click "Sign Up"
2. Fill in details
3. Register
4. Login

Done!

---

Environment Configuration

All variables go in .env.local in project root.

Required Variables

MONGODB_URL env MONGODB_URL="mongodb+srv://username:[email protected]/?retryWrites=true&w=majority"

Your MongoDB Atlas connection string.

NEXTAUTH_URL env NEXTAUTH_URL="http://localhost:3000"

Base URL (use http://localhost:3000 for development).

NEXTAUTH_SECRET env NEXTAUTH_SECRET="your-random-32-character-secret"

Random secret for encrypting sessions. Generate with: powershell node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Optional Variables

GEMINI_API_KEY env GEMINI_API_KEY="your-api-key"

For AI-powered features. Get from https://makersuite.google.com/app/apikey

Complete Template

env MONGODB_URL="mongodb+srv://admin:[email protected]/?retryWrites=true&w=majority&appName=Cluster0" NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="a8f5f167f44f4964e6c998dee827110c" GEMINI_API_KEY="AIzaSyAZIlbFjSPa3q2hyFcSvtjw2d3iUGUX4w0"

Never commit .env.local to Git.

---

Running the App

Development Mode

powershell pnpm dev

Starts server at http://localhost:3000 with hot reload.

Different Port

powershell pnpm dev -- -p 3001

Production Build

bash pnpm build pnpm start

Available Commands

Command	Purpose
pnpm install	Install dependencies
pnpm dev	Start dev server
pnpm build	Build for production
pnpm start	Run production build
pnpm lint	Check code quality

Stopping Server

Press Ctrl + C in terminal.

---

How Everything Works

User Registration

1. User fills registration form
2. Data sent to /api/auth/register
3. Email checked for duplicates
4. Password encrypted with bcryptjs
5. User saved to MongoDB
6. Redirect to login

User Login

1. User enters credentials
2. NextAuth validates
3. Database queried for user
4. Password compared
5. JWT token created
6. Token stored in secure cookie
7. Redirect to /home

Creating Posts

1. User types content, uploads images
2. Images uploaded to /api/upload
3. Saved in public/uploads/
4. Post data sent to /api/posts
5. Validated and saved to MongoDB
6. Appears in feed

Creating Startups

1. User fills startup form
2. Images uploaded
3. Data sent to /api/startups
4. Unique slug generated
5. Startup saved with user as founder
6. Accessible at /startup/[id]

Following Users

1. Click "Follow"
2. Request to /api/users/[id]/follow
3. Your ID added to their followers
4. Their ID added to your following
5. Button updates to "Unfollow"

Messaging

1. User sends message
2. Check for existing conversation
3. Create conversation if needed
4. Message saved with conversation ID
5. Recipient sees in inbox
6. AI suggests replies

Search

1. User enters query
2. Request to appropriate API
3. MongoDB text search performed
4. Results filtered
5. Matches returned

Route Protection

1. Request goes through middleware.js
2. Checks for valid session
3. Logged in + accessing auth pages → redirect to /home
4. Not logged in + accessing protected pages → redirect to /auth/login
5. Public routes accessible to everyone

---

API Endpoints

Authentication

• POST /api/auth/register - Register
• POST /api/auth/[...nextauth] - Login/logout

Users

• GET /api/users/[id] - Get user
• PUT /api/users/[id] - Update profile
• POST /api/users/[id]/follow - Follow/unfollow
• GET /api/users/search - Search users

Startups

• GET /api/startups - List startups
• POST /api/startups - Create startup
• GET /api/startups/[id] - Get startup
• PUT /api/startups/[id] - Update startup
• DELETE /api/startups/[id] - Delete startup
• POST /api/startups/[id]/follow - Follow startup
• GET /api/startups/search - Search startups

Posts

• GET /api/posts - Get feed
• POST /api/posts - Create post
• GET /api/posts/[id] - Get post
• POST /api/posts/[id]/like - Like/unlike
• POST /api/posts/[id]/comments - Comment
• GET /api/posts/search - Search posts

Projects

• GET /api/projects - List projects
• POST /api/projects - Create project
• GET /api/projects/[id] - Get project
• PUT /api/projects/[id] - Update project
• POST /api/projects/[id]/like - Like project

Messaging

• GET /api/conversations - Get conversations
• POST /api/conversations - Create conversation
• GET /api/conversations/[id]/messages - Get messages
• POST /api/conversations/[id]/messages - Send message

Other

• POST /api/upload - Upload files
• POST /api/ai/suggest-replies - AI suggestions

---

Authentication

How It Works

Session-Based with JWT:

1. User logs in
2. Credentials validated
3. JWT created with user info
4. Stored in secure HTTP-only cookie
5. Cookie sent with every request
6. Server validates token

Token Contains:

• User ID
• Email
• Name
• Profile image
• Expiration (30 days)

Protected Routes: Routes under app/(main) require login. Middleware checks and redirects if needed.

Getting User Data

Server Components: javascript import { auth } from "@/auth";

export default async function Page() { const session = await auth(); const user = session?.user; }

Client Components: javascript import { useSession } from "next-auth/react";

export default function Component() { const { data: session } = useSession(); const user = session?.user; }

---

Deployment

Production Checklist

1. Set environment variables on hosting platform
2. Ensure MongoDB accessible from production
3. Run pnpm build
4. Test with pnpm start

Recommended Hosts

• Vercel (recommended for Next.js)
• Netlify
• Railway

Vercel Deployment

1. Push to GitHub
2. Connect repo to Vercel
3. Add environment variables
4. Auto-deploy on push

---

License

Built for educational purposes as part of a hackathon.

---

Support

For issues:

• Open GitHub issue
• Contact development team
• Check documentation above

---