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

In today’s digital age, social learning platforms have become increasingly popular. These platforms allow users to learn collaboratively by sharing knowledge, asking questions, and engaging in discussions. Building such a platform from scratch can seem daunting, but with modern tools like Next.js, Stream, and Supabase, the process becomes much more manageable. In this article, we’ll walk through the steps to build a fully functional social learning platform using these technologies.

Table of Contents

1. Introduction to the Tech Stack
2. Setting Up the Project
3. Building the Backend with Supabase
4. Implementing Real-Time Feeds with Stream
5. Creating the Frontend with Next.js
6. Integrating Authentication
7. Adding Social Features
8. Deploying the Platform
9. Conclusion
10. References

1. Introduction to the Tech Stack

Next.js

Next.js is a React-based framework that enables server-side rendering, static site generation, and API routes. It’s perfect for building fast, scalable, and SEO-friendly web applications.

Stream

Stream is a powerful API for building activity feeds, chat, and notifications. It provides real-time functionality out of the box, making it ideal for social learning platforms where users interact dynamically.

Supabase

Supabase is an open-source alternative to Firebase. It provides a PostgreSQL database, authentication, and real-time capabilities, making it a great choice for building the backend of your platform.

2. Setting Up the Project

Prerequisites

• Node.js and npm installed
• A Stream account (get your API keys from the [Stream dashboard](https://getstream.io/dashboard/))
• A Supabase account (create a project at [Supabase](https://supabase.com/))

Initialize the Project

Start by creating a new Next.js project:

```bash
npx create-next-app social-learning-platform
cd social-learning-platform
```

Install the required dependencies:

```bash
npm install @supabase/supabase-js stream-chat-react
```

3. Building the Backend with Supabase

Set Up Supabase

1. Go to the Supabase dashboard and create a new project.
2. Navigate to the **SQL Editor** and create a table for courses:

```sql
CREATE TABLE courses (
    id SERIAL PRIMARY KEY,
    title TEXT NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT NOW()
);
```

3. Create another table for user progress:

```sql
CREATE TABLE user_progress (
    id SERIAL PRIMARY KEY,
    user_id UUID REFERENCES auth.users(id),
    course_id INT REFERENCES courses(id),
    completed BOOLEAN DEFAULT FALSE
);
```

Initialize Supabase Client

Create a `lib/supabase.js` file to initialize the Supabase client:

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);
```

Add your Supabase URL and anon key to `.env.local`:

```env
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
```

4. Implementing Real-Time Feeds with Stream

 Set Up Stream

1. Go to the Stream dashboard and create a new app.
2. Install the Stream Chat SDK:

```bash
npm install stream-chat
```

Initialize Stream Client

Create a `lib/stream.js` file:

```javascript
import { StreamChat } from 'stream-chat';

export const client = StreamChat.getInstance(
    process.env.NEXT_PUBLIC_STREAM_API_KEY,
    process.env.NEXT_PUBLIC_STREAM_API_SECRET
);
```

Add your Stream API key and secret to `.env.local`:

```env
NEXT_PUBLIC_STREAM_API_KEY=your-stream-api-key
NEXT_PUBLIC_STREAM_API_SECRET=your-stream-api-secret
```

 Create a Feed Component

Use Stream’s `FlatFeed` component to display a real-time activity feed:

```javascript
import { FlatFeed } from 'stream-chat-react';

const Feed = () => {
    return <FlatFeed feedGroup="user" />;
};

export default Feed;
```

5. Creating the Frontend with Next.js

Build the Homepage

Create a `pages/index.js` file to display a list of courses:

```javascript
import { useEffect, useState } from 'react';
import { supabase } from '../lib/supabase';

export default function Home() {
    const [courses, setCourses] = useState([]);

    useEffect(() => {
        const fetchCourses = async () => {
            const { data } = await supabase.from('courses').select('*');
            setCourses(data);
        };
        fetchCourses();
    }, []);

    return (
        <div>
            <h1>Courses</h1>
            <ul>
                {courses.map((course) => (
                    <li key={course.id}>{course.title}</li>
                ))}
            </ul>
        </div>
    );
}
```

6. Integrating Authentication

Set Up Supabase Auth

Supabase provides built-in authentication. Add a login/signup form:

```javascript
import { useState } from 'react';
import { supabase } from '../lib/supabase';

export default function Auth() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async () => {
        const { user, error } = await supabase.auth.signIn({ email, password });
        if (error) console.error(error);
    };

    const handleSignUp = async () => {
        const { user, error } = await supabase.auth.signUp({ email, password });
        if (error) console.error(error);
    };

    return (
        <div>
            <input type="email" placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
            <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
            <button onClick={handleLogin}>Login</button>
            <button onClick={handleSignUp}>Sign Up</button>
        </div>
    );
}
```

7. Adding Social Features

Enable Comments and Discussions

Use Stream’s `CommentList` and `CommentInput` components to allow users to comment on courses:

```javascript
import { CommentList, CommentInput } from 'stream-chat-react';

const CourseComments = ({ courseId }) => {
    return (
        <div>
            <CommentList />
            <CommentInput />
        </div>
    );
};
```

 8. Deploying the Platform

 Deploy with Vercel

1. Push your code to a GitHub repository.
2. Go to [Vercel](https://vercel.com/) and import your project.
3. Add your environment variables in the Vercel dashboard.
4. Deploy!

 9. Conclusion

Building a social learning platform with Next.js, Stream, and Supabase is a powerful way to create a modern, real-time application. By leveraging these tools, you can focus on delivering a great user experience without worrying about the complexities of backend infrastructure. Whether you’re building a small community or a large-scale platform, this stack provides the flexibility and scalability you need.

10. References

1. Next.js Documentation: [https://nextjs.org/docs](https://nextjs.org/docs)
2. Stream Documentation: [https://getstream.io/docs/](https://getstream.io/docs/)
3. Supabase Documentation: [https://supabase.com/docs](https://supabase.com/docs)
4. Vercel Deployment Guide: [https://vercel.com/docs](https://vercel.com/docs)

By following this guide, you’ll have a fully functional social learning platform up and running in no time. Happy coding!