A video summary app using just nextjs + sqlite

martin2844 — Sun, 29 Sep 2024 19:49:31 +0000

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!

Deploy a Wordpress to Google Cloud for free

martin2844 — Wed, 19 Jan 2022 19:59:31 +0000

So, after reading for a bit, there arent any really good free hosting solutions for wordpress sites. Really, all of them have a tradeoff. Either no SSL, or no custom domain etc.

Well, there is an answer to this. Since there are free VM instances available, you can launch a wordpress site via an instance. You can use whichever you like. Both google and amazon provide free tier VM machines for a year. And they are both really good.

Where to get a VM

Now, in both AWS and Google Compute you can launch a Virtual Machine (VM) with a custom image already set for wordpress, but its more expensive than a normal ubuntu image, and of course you wont be able to customize it as much.

So I'll guide you through setting your own wordpress site from the terminal of your VM, that is to say your SSH connection.

Now, I wont go into much detail about what does what, but if you follow it along it will go well. It helps knowing a bit of bash commands.

Creating the VM Instance

First make a google cloud account, they'll ask for your credit card and they'll charge you a dollar, but thats it. Its just to prevent spam.
Go to google compute and launch new instance - The size depends on various factors, but basically it will depend on the size of your website - traffic, amount of storage needed, processing power. etc.

Also allow HTTPS and HTTP traffic.

Once you decided on your instance size, I chose Micro, wait for your instance to finish creating itself.

Now it might be the time to clarify that you might get a money limit with your free usage, this should be good for the micro instance for about a year

Press SSH, this I love about google cloud computing. Its not necessary to donwload your keys and putty if your on windows in order to ssh to the VM.
(Image of SSH button)

Once it finishes connecting it will be like so:
After that, let the fun begin! In order to make a wordpress site we need to set our VM with the correct packages.

First update and upgrade the VM's apt.

    sudo apt update -y
    sudo apt upgrade -y

Then we need to set up apache! or the famous LAMP

Linux, Apache, MySQL and PHP

Setting up the LAMP Stack

    sudo apt install apache2

Once its done, apache2 should be running, you can check it by doing the following:

    sudo systemctl status apache2

It should say, its active and running.

if its not running do the following:

    sudo systemctl start apache2

You should be able to check it by copying the VM IP adress and pasting it to your browser's nav bar, it should show you the default LAMP page.

*Make sure you are not forcing HTTPS on the IP adress. That is not yet set, so it wont work if you do that. *

This is your IP adress:

This is the stock LAMP page:

In order to guarantee that the service will be always execute the following command:

    sudo systemctl enable apache2

If the VM is restarted, it should start apache2 right away.

Installing the Wordpress Database (MariaDb)

Now we are going to install the DB. We are going with MARIADB this time.

    sudo apt install mariadb-server mariadb-client

We are installing both client and server, the mariadb-server is to setup our DB server, and the client we needed to be able to connect to it.

Now start the DB server

    sudo systemctl start mariadb

Again, check it with status

    sudo systemctl status mariadb

Should be up and running.

Configuring the DB

Go for the following command:

    sudo mysql_secure_installation

Hit enter for the prompt that says enter current password for root, since we havent set any yet.

Type Y, for the Set root password prompt!

Set a password and remember it, its important.

And select Y for remove anonymous user, also Y for disallow root login remotely, and Y again for test DB removal, and privilege reload.

Reload mariadb now:

    sudo systemctl restart mariadb

Installing PHP Dependencies

Now we need to install a couple of PHP things, this is needed for wordpress which is, basically, PHP.

    sudo apt install php php-mysql php-gd php-cli php-common

Downloading the wordpress files

We need to have wget and unzip first. Wget most probably will be there allready but not unzip. So just do the following:

    sudo apt install wget unzip

Once its done, we will donwload wordpress:

    sudo wget https://wordpress.org/latest.zip

This will download the latest version of wordpress. But its a zip, so lets go ahead and unzip it.

    sudo unzip latest.zip

It will generate a wordpress directory, check it by using the "ls" command.

Now Transfer wordpress to the correct folder!

Copy the whole directory to the Apache2 folder.

    sudo cp -r wordpress/* /var/www/html

That will transfer all the files to the Apache root folder.
Now cd to that folder:

    cd /var/www/html
    ls

You should have all the files there. And now we have to change the owner properties of the files to let apache use them:

    sudo chwon www-data:www-data -R /var/www/html

Now, to access the website we need to remove the default page, inside /var/www/html, remove the index.html which was the default apache page

    sudo rm -rf index.html

Now go to your IP adress again, and you should get the wordpress installation site! Well done!

Setting up Wordpress

But were not there yet, just a bit more. So click your language, click on lets go! and we'll put in the info needed to make wordpress work

So you'll need to set the DB for wordpress.

Back to the SSH terminal -

    sudo mysql -u root -p

It will ask your root password which I told you to remember, remember?

Enter it, and you should be inside MariaDB.

So we now will create a DB for wordpress:

    create database wpdb;

wpdb can be anything you wish and desire, it can be wordpressdb, wordpress, database....

So now we need to create a user,

    create user "user"@"%" identified by "password";

You guessed it, replace user and password for whichever user and password you choose to use.

Now provide access for the new user to the DB

    grant all privileges on wpdb.* to "user"@"%";

now exit by:

    exit

Now, provide the information to the wordpress page which was asking for it.

Database name: wpdb
username: user
password: password
Database Host: localhost
table prefix: wp_

Click Submit and you should be successful.

You might get a message that it was not able to write it. And it will give you a php code to put in manually. To do this, copy the code, and back in your terminal, you should still be in the Apache folder, run the following:

    sudo nano wp-config.php

Once inside, delete everything and paste the code you copied. Then just CTRL-X to exit, and Y to save.

Thats it.

Go back to the page, and click to continue, and run the installation. You should be on a normal wordpress installation.

Site title: Whatever
username: your user to access the wordpress admin area
password: your desired password.

email: an email to recover password and get notifications.

After that, login into wordpress and voilá your done.

We are just missing a custom domain, and SSL configuration. But thats for another post.

Thank you for reading!

DEV Community: martin2844