A video summary app using just nextjs + sqlite

Building Vid4Pro: AI-Powered YouTube Video Analysis with Next.js

Introduction

I recently built Vid4Pro, a web application that uses AI to analyze and extract insights from YouTube videos. It was created with Next.js, SQLite, and deployed using Docker and Coolify. Here’s a deep dive into how I made it and the key features that make it stand out.

Key Features

Video Analysis: Paste any YouTube URL, and Vid4Pro extracts key insights, quotes, and summaries using AI.
Multilingual Support: Handles multiple languages, including English and Spanish, thanks to localization files.
User Authentication: Integrated with NextAuth for user sign-up, login, and managing different access levels.
Tiered Access Levels:
- Anonymous Users: Basic access with limited extraction.
- Logged-in Users: Additional extractions and saved analyses.
- Paid Users (Coming Soon): Advanced features like batch analysis and API access.
Export Options: Export findings as Markdown or PDF.
Support System: Users can submit tickets for issues or feature requests.
Responsive UI: Built with TailwindCSS, featuring a dock menu and smooth user experience.
Database Integration: SQLite with Knex ensures efficient data management.
API (Coming Soon): A REST API for integrating YouTube analysis into other applications.

Tech Stack Overview

Frontend: Next.js App Router
Backend: Next.js API Routes, SQLite with Knex for database operations
Authentication: NextAuth
Styling: TailwindCSS
Deployment: Docker and Coolify on a VPS

Building the Application

1. Setting Up Next.js and the App Router

Vid4Pro uses the Next.js App Router to handle routing and API endpoints. The app is structured with folders representing routes, making it easy to create dynamic pages.

2. Database Integration with SQLite and Knex

For simplicity and ease of deployment, I chose SQLite as the database. I used Knex.js to handle database queries, allowing me to perform migrations and queries efficiently.

Migration Example:

  exports.up = function(knex) {
    return knex.schema.createTable('videos', (table) => {
      table.increments('id').primary();
      table.string('url').notNullable();
      table.json('analysis').notNullable();
      table.timestamps(true, true);
    });
  };

3. User Authentication with NextAuth

NextAuth makes user authentication straightforward. It integrates seamlessly with Next.js, allowing for both email/password and OAuth-based authentication.

4. Styling with TailwindCSS

TailwindCSS made it easy to create a responsive UI. It also helped build components like the dock menu, giving the app a polished look.

5. Deploying with Docker and Coolify

To make deployment manageable, I containerized the application using Docker. Then, I used Coolify for one-click deployment to my VPS, simplifying the process.

Challenges Faced and Lessons Learned

Data Management: Handling large amounts of YouTube data efficiently required optimizing SQLite queries.
Authentication: Implementing tiered access with NextAuth took some tweaking but proved to be flexible.
Deployment: Docker and Coolify made deployment smoother, but fine-tuning for production was essential. Also, its essential to persist a storage so that your sqlite db isnt wiped on every deployment.

What’s Next?

I plan to implement batch analysis, API access for integrations, and more advanced insights extraction in future updates.

Try It Out and Share Your Thoughts!

Check out Vid4Pro and let me know what you think. Feedback is welcome as I continue to improve the application!

DEV Community