javier-arango / codeflix

Your ultimate platform for discovering, learning, and mastering computer science through curated videos.

Fuel Your Code. Spark Your Journey.

Codeflix is your one-stop educational platform designed exclusively for computer science students. Whether you're delving into algorithms, exploring backend development, or learning front-end frameworks, Codeflix offers an expansive collection of curated educational videos to guide your journey. With features that allow users to categorize videos, create personalized playlists, and dive deeper into specific topics, we're here to accelerate your learning process and elevate your coding skills.

Table of Contents

• Installation
• Configuration
  • Setting Up Credentials
    • Cloudinary
    • Supabase
    • Google API Key
    • NextAuth.js Secret
• Getting Started
  • Development Server
  • Database Setup with Prisma
    • Migration
    • Manual Seeding
    • Visualize the Database
• Contribution
• Helpful Resources
• License

Installation

Clone and set up Codeflix with these steps:

git clone https://github.com/javier-arango/codeflix.git

cd codeflix

npm install

Configuration

Rename .env.example to .env.local and update environment variables:

# Cloudinary credentials
# https://cloudinary.com/documentation/cloudinary_credentials_tutorial#:~:text=Log%20into%20your%20Cloudinary%20Console,Secret%20and%20API%20Environment%20Variable.
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME={YOUR_CLOUD_NAME}
NEXT_PUBLIC_CLOUDINARY_API_KEY={YOUR_API_KEY}
NEXT_PUBLIC_CLOUDINARY_SECRET_KEY={YOUR_SECRET_KEY}

# Supabase credentials
DIRECT_URL={YOUR_DIRECT_URL}
DATABASE_URL={YOUR_DATABASE_URL}

# NextAuth.js credentials
# https://next-auth.js.org/configuration/options#nextauth_secret
NEXTAUTH_SECRET={YOUR_SECRET}

# Google API Key if you want to generate videos from YouTube api
GOOGLE_API_KEY={YOUR_API_KEY}

Setting Up Credentials

This project requires several API keys and credentials for different services. Here's how you can obtain them:

Cloudinary

Cloudinary is used for image management. To get your Cloudinary credentials:

1. Sign up for a free Cloudinary account if you don't have one.
2. Log into your Cloudinary Console.
3. Go to the Dashboard page.
4. Here, you'll find your Cloud name, API Key, API Secret, and API Environment Variable.

For more details, refer to the Cloudinary Credentials Tutorial.

Supabase

Supabase is used as the backend service for the Database. To get your Supabase API keys:

1. Sign up for a free Supabase account if you don't have one.
2. Create a new project.
3. Go to the API section in the settings of your project.
4. Here, you'll find the URL and public and secret API keys.

For more details, refer to the Supabase API Documentation.

Google API Key

The Google API key is used to fetch data from YouTube. To get your Google API key:

1. Go to the Google Cloud Console.
2. Create a new project.
3. Enable the YouTube Data API v3 for your project.
4. Create credentials for the YouTube Data API v3.
5. Select API key in the credentials type.

For more details, refer to the Getting Started with YouTube Data API v3.

NextAuth.js Secret

NextAuth.js requires a secret for encryption. To generate a secret:

1. Open a terminal.
2. Run the following command:

openssl rand -base64 32

For more details, refer to the NextAuth.js Configuration Documentation.

Getting Started

Development Server

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Database Setup with Prisma

This project is configured with Prisma, an advanced Object-Relational Mapping (ORM) to facilitate seamless database operations. Follow the steps below for both development and testing environments.

Migration

Run the migration command to establish the database schema. Prisma Migrate uses your migration files to manage the schema changes:

npm run prisma:migrate
# or
yarn prisma:migrate

Note: Prisma Migrate integrates with seeds. When it resets the development database, it automatically triggers the seeding.

Manual Seeding

Execute the seeding command to populate your database with predefined data essential for testing. Modify the prisma/seed.ts file if you wish to make changes to the default seeding data:

npm run prisma:seed
# or
yarn prisma:seed

Visualize the Database

Prisma Studio provides a graphical interface, enabling you to visualize and manage your database records effortlessly. You can run the following command to start Prisma Studio:

npm run prisma:studio
# or
yarn prisma:studio

Visit http://localhost:5555 to access Prisma Studio and manage your database interactively.

Contribution

Contributions to Codeflix are welcomed! Please refer to the CONTRIBUTING.md file for guidelines on how to make meaningful additions to our platform.

Helpful Resources

Supabase

• Supabase Prisma Integration

Prisma

• Using Prisma with Supabase
• Prisma CRUD
• Connection management
• DB Relations
• Implicit Many to Many Relation

Next.js

• Route Handlers
• Pages and Layouts
• Data Fetching, Caching, and Revalidating
• Fetching Data on the Client with third-party libraries

License

This project is released under the MIT License