Create your own version of Instagram using api.video and Laravel

If you've ever wanted to take the time to learn how to build your own social media platform, this tutorial will get you started. Using the incredible Laravel PHP framework tutorial from Victor Gonzalez, you can set up the basics for Instagram. However, his tutorial doesn't include video support. That's the tweak I'm providing today with this tutorial.

If you want a complete version of Instagram, things you'll need to add yourself are:

• More robust population for a person's page when it opens, for example linking to their profile instead of typing the number (which you'll know since there won't be many users when you set it up) to go to your profile or someone else's.
• Ability to delete images and videos.
• Search capability.
• Algorithm for what to prioritize showing someone in their feed if there's lots of followers.
• More robust database.
• Move email out of test mode to actual email that's sent.

Let's get started!

Installation

For this project, you should be familiar with Laravel already, or willing to go through Victor's 4 hour tutorial to learn everything you'll need. Make sure you have these things ready:

• Composer - https://getcomposer.org/
• Node.js - https://nodejs.org/en/
• NPM - this is installed for you with Node.js
• Laravel - https://laravel.com/docs/8.x - this project uses

To get the tutorial version of the code to work with, go to https://github.com/coderstape/freeCodeGram. If you want the code with the api.video tweaks included, and the tutorial completely put together, then go here: https://github.com/apivideo/freeCodeGram.

The next part of installation will require you to clone the github repository and then configure the project. There is a great walkthrough here: How to Setup a Laravel Project You Cloned from Github.com. There are some steps you won't need, the steps you need to follow are: 1, 2, 4, 5 (I recommend not using yarn), 6, 7, 8, 9 and 10.

For step 8, this project uses a flat SQLite file for the database. To set this up, go into your project and type:

vim database/database.sqlite

After it's created, save it without typing anything into the file.

Then go to step 9, and make sure the information is filled out appropriately for the database (it should be). The correct set up is just to have DB_CONNECTION=sqlite. There should be no other DB_ items listed.

Follow step 10. You're done with the walkthrough! There's just a couple more configuration things to do.

Authentication

You'll need to go into php artisan and run the ui:auth command:

php artisan ui:auth

Storage

You will need to go into freeCodeGram/storage/public and add an uploads folder.

You may need to run the storage:link command as well:

php artisan storage:link

Set up your php.ini file

If you want to handle videos that are 10 MB or more, you have to change the settings for what you can and can't upload. To do this, check the status and location of your file first:

php --ini

This will bring back the location of the file, in the line: Configuration File (php.ini) Path: /etc
or something similar.

It'll also bring back the line: Loaded Configuration File: with details after it. The details will either list the configuration file that's loaded, or it will show that there isn't one at all.

It's recommended that you use a virtual environment like homestead or similar.

If you don't have a php.ini file

You need to add one. An easy way to do that is to use the available default. The command would look like this if you use a virtual environment: cp /etc/php.ini/default /etc/php.ini

If you add it and don't have a virtual environment, you may be denied installation privileges unless you use sudo to install. The command would look like this: sudo cp /etc/php.ini/default /etc/php.ini

Then provide your credentials to complete installation.

Next, you'll need to go into the file to modify it. If you're in a virtual environment, you won't need sudo, but otherwise you may need sudo included in the command to make the modifications. Type: sudo nano /etc/php.ini

Leave sudo off for virtual environments, or if you're able to leave it off. Once in the php.ini file, you need to look for two variables:

• upload_max_filesize
• post_max_size

Don't make these too big, or it will cause you problems, but you can increase upload_max_filesize up to 20M and post_max_size can be increased to 21M. post_max_size is the size of your video file plus anything else you're sending in the form with the video. In our case, a caption, so not too much extra data.

Save your file when you're done making the changes.

Set up .env file

You're going to use api.video, so you'll want to add your API key to your .env file. Open the file and where it says APP_APIVIDEO=yourkeyhere, remove yourkeyhere and put your key instead. You don't need to add quotes to show it's a string. You can find your API key in your dashboard after you log in. If you need a new account, then click Get Started to sign up.

Here, we're modifying the code for 'image'. We check 'image' to see if it has a .mp4 or .mov extension. If so, we run validation checking it that's to do with video. If everything checks out with the file, we send a request to api.video to upload a new video. We create a video container and upload our file into the container. Then we retrieve the embed link for the mp4 and send that path to be saved in the database for posts. Finally, we return the profile page, where the new post will be displayed.

posts/index.blade.php

For this section, inside the @foreach statement we update the display tags to handle image or video, depending on what we retrieve from our database.

Here we can see that if we have a link that starts 'http' we choose to display with an iframe because we know it will be a video. If we have a link that starts with anything else, we know it's an image and display with an image tag.

posts/show.blade.php

When we show a post, we want to make sure we display it with an iframe for a video, and an img tag for an image.

Here, using an @if statement in blade, we set up a way to handle a post if it's video or if it's an image. Videos only use half the space of an image.

profiles/index.blade.php

This is more of the same tweak. We want to be able to handle and display an image or a video properly. The code looks about the same:

More tweaks

There's a lot more you can add to this project. You can make it so you can navigate to your profile without having to know what number you are. You could consider learning to add a search bar, so you can hunt for users. You can add tagging and ways to display pictures that match certain tags. There's a lot of ways to build on what we have here, but this will get you started!