Code WithDhanian

Posted on Mar 6

How to Build a Social Learning Platform Using Next.js, Stream, and Supabase

Creating a social learning platform can revolutionize online education by enabling real-time interactions, collaborative learning, and community engagement. In this guide, we will build a scalable social learning platform using Next.js for the frontend, Supabase for backend services (authentication, database, and storage), and Stream for chat and real-time features.

1. Project Setup

1.1. Initialize a Next.js Project

First, create a new Next.js project using the following command:

npx create-next-app@latest social-learning-platform
cd social-learning-platform

1.2. Install Required Dependencies

We need Supabase for authentication and database management, and Stream for chat features. Install them using:

npm install @supabase/supabase-js getstream stream-chat-react

1.3. Configure Environment Variables

Create a .env.local file in the root directory and add your API keys from Supabase and Stream:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key

🔗 Useful Links:

Next.js Documentation

Supabase Docs

GetStream.io

2. Backend Setup with Supabase

2.1. Create a Supabase Project

Go to Supabase and create a new project.
Copy your Project URL and API Key from the settings.

2.2. Database Schema

Create the following tables in the Supabase SQL Editor:

Users Table

CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  avatar_url TEXT,
  created_at TIMESTAMP DEFAULT now()
);

Courses Table

CREATE TABLE courses (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  instructor_id UUID REFERENCES users(id),
  created_at TIMESTAMP DEFAULT now()
);

Lessons Table

CREATE TABLE lessons (
  id SERIAL PRIMARY KEY,
  course_id INT REFERENCES courses(id),
  title TEXT NOT NULL,
  video_url TEXT,
  content TEXT,
  created_at TIMESTAMP DEFAULT now()
);

Comments Table (for Social Interaction)

CREATE TABLE comments (
  id SERIAL PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  lesson_id INT REFERENCES lessons(id),
  content TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT now()
);

2.3. Supabase Authentication Setup

To enable email/password authentication, go to Supabase Dashboard → Authentication → Settings and enable Email Auth.

Frontend Integration for User Authentication

In supabase.js, initialize Supabase:

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

export default supabase;

Now, create a login function in auth.js:

import supabase from './supabase';

export const signInWithEmail = async (email, password) => {
  const { user, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) throw error;
  return user;
};

🔗 Useful Links:

Supabase Authentication Docs

3. Real-Time Chat with Stream

3.1. Initialize Stream Chat

Create an account at GetStream.io.
Get your API Key and Secret Key.

3.2. Setup Chat Client in Next.js

Install required dependencies:

npm install stream-chat stream-chat-react

Then, initialize Stream Chat Client in streamChat.js:

import { StreamChat } from 'stream-chat';

const client = new StreamChat(process.env.NEXT_PUBLIC_STREAM_API_KEY);

export default client;

3.3. Implement Chat in a Component

Create a ChatProvider in _app.js:

import { Chat } from 'stream-chat-react';
import client from '../lib/streamChat';

function MyApp({ Component, pageProps }) {
  return (
    <Chat client={client} theme="messaging light">
      <Component {...pageProps} />
    </Chat>
  );
}

export default MyApp;

🔗 Useful Links:

Stream Chat Docs

4. Frontend Development (Next.js Components)

4.1. User Authentication & Profile

Sign Up / Login Page
User Profile Dashboard

4.2. Course Management

Admin Panel to Create/Edit/Delete Courses
Course Enrollment & Progress Tracking

4.3. Lesson Player

Video & Text-based Lessons
Quizzes & Assignments

4.4. Social Features

Commenting System
Likes & Reactions
Follow & Connect with Users

5. Deployment & Hosting

5.1. Deploy Frontend on Vercel

Run the following command to deploy the project:

vercel

🔗 Useful Links:

Vercel Deployment Guide

5.2. Supabase Hosting

Supabase automatically hosts the database and authentication services.

5.3. Custom Domain Setup

You can connect a custom domain via Vercel Settings → Domains.

6. Future Enhancements

Here are some features to improve the platform:

AI-powered Course Recommendations
Live Streaming Integration (e.g., Zoom, WebRTC)
Mobile App Support (React Native)

Conclusion

By combining Next.js, Supabase, and Stream, we’ve built a scalable Social Learning Platform with user authentication, course management, and real-time chat. This tech stack is ideal for e-learning platforms, boot camps, and community-driven courses.

If you found this guide helpful, consider supporting my work on Ko-fi: ko-fi.com/codewithdhanian

DEV Community