Building EduGram A Full-Stack Social Media App With Next.js And Supabase

by ADMIN 73 views
Iklan Headers

Hey guys! Let's dive into building EduGram, a full-stack social media web app, much like Instagram, but tailored for the programmer, educational, and AI content creators. We'll be leveraging the power of Next.js, Tailwind CSS, and Supabase to bring this to life. Get ready for a fun and insightful journey!

Project Overview: EduGram

EduGram is designed to be a modern, globally accessible platform, focusing specifically on programmer content, educational videos, and AI-related videos. Think of it as a niche social media space where users can connect, learn, and share their knowledge. Our goal is to create an engaging and intuitive platform that caters to a community passionate about these topics.

Key Features

Before we dive into the tech stack and implementation details, let’s outline the core features we aim to build:

  • User Authentication: Seamless sign-up and sign-in using Supabase Auth (email/password or magic link). This ensures a secure and hassle-free experience for our users.
  • Content Upload: Users can upload short video content (max 5 mins) accompanied by captions. This is the heart of EduGram, allowing creators to share their insights and expertise.
  • Category Selection: Each video can be categorized under [Programming, AI, Education]. This helps in organizing content and making it easily discoverable.
  • Global Feed: A central feed displaying all users’ public posts in chronological order. This allows users to stay updated with the latest content from the community.
  • User Profiles: Dedicated profiles for users to showcase their content, with details like post count, name, and bio. This fosters a sense of community and personalization.
  • Engagement: Features to like and comment on posts (optional for the Minimum Viable Product - MVP). This encourages interaction and discussion within the platform.
  • Profile Customization: Users can upload avatars and cover images to personalize their profiles. This adds a touch of individuality and helps users express themselves.

Tech Stack

To bring EduGram to life, we'll be using a robust and modern tech stack that ensures scalability, performance, and a great developer experience. Here’s a breakdown:

  • Frontend: Next.js + TypeScript + Tailwind CSS

    Next.js is a powerful React framework that offers features like server-side rendering, static site generation, and API routes, making it perfect for building dynamic web applications. TypeScript adds static typing to our JavaScript, enhancing code quality and maintainability. Tailwind CSS, a utility-first CSS framework, will help us rapidly prototype and build a clean, responsive UI. Next.js, with its server-side rendering capabilities, ensures our EduGram application is SEO-friendly and performs optimally. By leveraging TypeScript, we enhance our codebase with static typing, reducing the likelihood of runtime errors and improving maintainability. Tailwind CSS, a utility-first CSS framework, enables us to rapidly create a sleek and responsive user interface, aligning with modern design standards. This combination allows for a scalable and maintainable frontend architecture, essential for the long-term success of EduGram.

  • Backend/DB: Supabase (PostgreSQL + Auth + Storage)

    Supabase is an open-source Firebase alternative that provides a suite of tools including a PostgreSQL database, authentication, and storage. It simplifies backend development, allowing us to focus on building features. Supabase's real-time capabilities will be crucial for features like live updates and notifications. With Supabase as our backend, we harness the power of PostgreSQL, a robust and scalable database solution. Supabase Auth simplifies user authentication, providing secure and seamless sign-up and sign-in experiences. The built-in storage solution ensures we can efficiently manage and serve video content and profile images, optimizing performance and user experience. This comprehensive backend solution allows us to focus on building features without the complexities of managing infrastructure.

  • Storage: Supabase Storage for videos and profile images

    We'll use Supabase Storage to handle the storage and delivery of videos and profile images. It's secure, scalable, and integrates seamlessly with the rest of our Supabase backend. Supabase Storage offers a secure and scalable solution for storing user-generated content. By using Supabase Storage, we can efficiently manage and serve video content and profile images, ensuring optimal performance and user experience. The seamless integration with the rest of the Supabase backend simplifies the development process and reduces the overhead of managing separate storage solutions. This robust storage solution is crucial for handling the media-rich content on EduGram.

Database Tables

Our database schema will consist of the following tables:

  • users (id, email, full_name, avatar_url, bio)
  • posts (id, user_id, video_url, caption, category, created_at)
  • likes (optional MVP)
  • comments (optional MVP)

These tables will store user information, video posts, and engagement data. The users table stores essential user details such as id, email, full_name, avatar_url, and bio. The posts table links videos to users, storing details like video_url, caption, category, and created_at. For the MVP, we may choose to implement the likes and comments tables later, focusing initially on core functionalities. This streamlined database structure allows us to efficiently manage and retrieve data, ensuring a smooth and responsive user experience on EduGram.

Video Upload Logic

To ensure a smooth and efficient video upload process, we'll implement the following logic:

  • Max Duration: Videos should be limited to a maximum of 5 minutes.
  • File Type Validation: We'll validate the file type to ensure it's one of the supported formats (mp4, mov, webm).
  • Storage Path: Videos will be uploaded to Supabase Storage under /videos/user_id/. This helps in organizing videos by user.
  • Metadata Storage: The video URL will be stored in the posts table, linking the video to its metadata. By limiting video duration to a maximum of 5 minutes, we ensure optimal upload and playback performance. File type validation (mp4, mov, webm) ensures compatibility and a consistent user experience. Storing videos in Supabase Storage under /videos/user_id/ provides an organized and secure storage solution. Finally, storing the video URL in the posts table links the video to its metadata, making it easy to manage and retrieve content. This comprehensive video upload logic ensures a seamless and efficient process for our users.

Core Functionalities

Global Feed Page

The global feed page will be the central hub of EduGram, showcasing all the latest videos from the community. Here's what we'll include:

  • Video Display: Videos will be displayed in chronological order, with the latest videos appearing first.
  • Filtering: Users will have the option to filter videos by category (Programming, AI, Education).

The global feed page is the heart of EduGram, providing a dynamic view of the community's content. Videos are displayed in chronological order, ensuring users see the latest posts first. The filtering option allows users to narrow down content by category (Programming, AI, Education), making it easier to find relevant videos. This feature-rich feed page encourages users to explore and engage with the diverse content on EduGram.

Profile Page

The profile page will allow users to manage their content and profile information. Key features include:

  • Video Display: Users can view all their uploaded videos on their profile.
  • Profile Editing: Users can edit their name, bio, and avatar. The profile page is a personal space for users to showcase their contributions and identity. Users can easily view all their uploaded videos, providing a comprehensive overview of their content. Profile editing functionality allows users to update their name, bio, and avatar, personalizing their presence on EduGram. This user-centric design empowers individuals to manage their content and profile information effectively.

Authentication Flow

We'll be using Supabase Auth to handle user authentication. This includes:

  • Sign-up/Sign-in: Users can sign up and sign in using email/password or magic link.
  • Route Protection: Routes for uploading and viewing profiles will be protected, ensuring only authenticated users can access them.

Supabase Auth provides a secure and straightforward solution for user authentication. Users can sign-up and sign-in using email/password or magic link, providing flexibility and convenience. Route protection ensures that sensitive pages, such as those for uploading content or viewing profiles, are only accessible to authenticated users. This robust authentication flow safeguards user data and maintains the integrity of EduGram.

Bonus: AI Integration (Optional)

For a bonus feature, we could integrate AI to automatically detect off-topic or NSFW content before it's published. This can be achieved using OpenAI or Hugging Face. This optional AI integration enhances content moderation by automatically detecting off-topic or NSFW content. By leveraging OpenAI or Hugging Face, we can ensure a safe and relevant environment for our users. This proactive approach to content moderation helps maintain the quality and integrity of EduGram.

Project Structure and Initial Setup

Let’s get into the practical aspects. Here’s the project folder structure we'll follow:

edugram/
├── .env.local
├── next.config.js
├── package.json
├── pages/
│   ├── _app.tsx
│   ├── api/
│   │   └── videos.ts
│   ├── index.tsx        # Home Page
│   ├── profile.tsx      # Profile Page
│   └── upload.tsx       # Upload Page
├── public/
│   ├── favicon.ico
│   └── logo.png
├── supabase/
│   └── client.ts       # Supabase Client Config
└── tailwind.config.js

Initial Working Pages

We'll start with three core pages:

  • Home: Displays the global feed.
  • Upload: Allows users to upload videos.
  • Profile: Displays user profile and uploaded videos.

These initial pages form the foundation of EduGram, providing users with the essential functionalities to interact with the platform. The Home page serves as the central hub for exploring content, displaying the global feed of videos. The Upload page empowers users to share their own creations, contributing to the community. The Profile page allows users to manage their personal information and showcase their uploaded videos, fostering a sense of identity and ownership. This focused approach allows us to build a solid foundation before expanding to additional features.

Supabase Client Config

Create a supabase/client.ts file to initialize the Supabase client:

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

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
  throw new Error('Missing Supabase URL or Anon Key');
}

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

export default supabase;

This configuration ensures our application can securely interact with the Supabase backend. Initializing the Supabase client in supabase/client.ts allows us to easily interact with the Supabase backend throughout our application. The configuration uses environment variables (SUPABASE_URL and SUPABASE_ANON_KEY) to ensure secure access to our Supabase project. By throwing an error if these variables are missing, we enforce proper setup and prevent potential issues. This centralized client configuration promotes code reusability and simplifies the process of interacting with Supabase services.

Authentication Logic

We'll use Supabase Auth for user authentication. Here’s a basic example of how to implement sign-up and sign-in:

// pages/index.tsx
import { useState } from 'react';
import supabase from '../supabase/client';

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

  const handleSignUp = async () => {
    const { data, error } = await supabase.auth.signUp({ email, password });
    if (error) console.error('Sign-up error:', error.message);
    else console.log('Sign-up successful:', data);
  };

  const handleSignIn = async () => {
    const { data, error } = await supabase.auth.signInWithPassword({ email, password });
    if (error) console.error('Sign-in error:', error.message);
    else console.log('Sign-in successful:', data);
  };

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

export default Home;

This code snippet demonstrates the basic implementation of sign-up and sign-in functionality using Supabase Auth. By importing the Supabase client, we can easily call the signUp and signInWithPassword methods. The code handles user input for email and password, providing a basic authentication interface. Error handling ensures that any issues during the process are logged, aiding in debugging. This authentication logic forms the foundation for secure user access and interaction with EduGram.

Video Upload & Storage Integration

Here’s how you can implement video upload and storage using Supabase Storage:

// pages/upload.tsx
import { useState } from 'react';
import supabase from '../supabase/client';

function Upload() {
  const [video, setVideo] = useState<File | null>(null);

  const handleVideoUpload = async () => {
    if (!video) return;

    const { data, error } = await supabase.storage
      .from('videos')
      .upload(`videos/${supabase.auth.user()?.id}/${video.name}`, video, { upsert: false });

    if (error) console.error('Video upload error:', error.message);
    else console.log('Video upload successful:', data);
  };

  return (
    <div>
      <input type="file" accept="video/*" onChange={(e) => setVideo(e.target.files?.[0] || null)} />
      <button onClick={handleVideoUpload}>Upload Video</button>
    </div>
  );
}

export default Upload;

This code snippet showcases the implementation of video upload and storage using Supabase Storage. By importing the Supabase client and using the supabase.storage.from('videos').upload method, we can securely upload videos to our storage bucket. The code allows users to select a video file, and then uploads it to a directory specific to the user's ID. Error handling ensures that any issues during the upload process are logged, aiding in debugging. This storage integration is crucial for managing and serving user-generated video content on EduGram.

Feed Rendering from Supabase

To render the global feed, we'll fetch videos from the posts table and display them on the home page:

// pages/index.tsx
import { useState, useEffect } from 'react';
import supabase from '../supabase/client';

function Home() {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    const fetchVideos = async () => {
      const { data, error } = await supabase
        .from('posts')
        .select('*')
        .order('created_at', { ascending: false });

      if (error) console.error('Error fetching videos:', error.message);
      else setVideos(data || []);
    };

    fetchVideos();
  }, []);

  return (
    <div>
      {videos.map((video) => (
        <div key={video.id}>
          <video src={video.video_url} controls width="320" />
          <p>{video.caption}</p>
        </div>
      ))}
    </div>
  );
}

export default Home;

This code demonstrates how to render the global feed by fetching videos from the posts table in Supabase. By using the useEffect hook, we ensure that videos are fetched when the component mounts. The supabase.from('posts').select('*').order('created_at', { ascending: false }) query retrieves all video posts, ordered by creation time in descending order. Error handling ensures that any issues during the data fetching process are logged. The fetched videos are then displayed on the page, creating the dynamic global feed for EduGram. This feature is central to the platform, allowing users to discover and engage with the latest content.

Conclusion

Building EduGram is an exciting project that leverages modern web technologies to create a unique social media platform for programmers, educators, and AI enthusiasts. By using Next.js, Tailwind CSS, and Supabase, we can create a scalable, performant, and user-friendly application. Remember, this is just the beginning! There’s so much more we can add, from advanced features like live streaming to AI-powered content recommendations. Keep building, keep learning, and let’s make EduGram a reality!