My 100 Days : First side project
Tags: 100daysofcode, sideprojects, javascript, career
Published: 2020-06-20 21:03:56

Search by video , my first side project . Part of my 100 days journey towards getting a job {% link https://dev.to/hohooio823/my-100-days-from-scratch-into-getting-a-job-3fbi %} 
![screenshot of the project](https://dev-to-uploads.s3.amazonaws.com/i/sohvpht658bpw9tk09nc.png)
Check out the [live version](https://search-by-video.herokuapp.com/) and the [source code](https://github.com/hohooio823/SearchByVideo)
#**The idea :**
Search by video is a search engine that takes video and return results . I got the idea when i was looking for something similar but all i found was a reddit replies suggesting taking screenshots and using them in google’s image reverse searching . But , for me that wasn’t practical nor efficient . So i decided to build my own automated , practical, efficient version .
#**The stack :**
Mern stack , and Heroku for the deployment .
##**What’s happening behind the scene ?**
###**1- Uploading the video to the server:**
You got two options :
1- Paste the direct link to the video and press search button . The link gets sent to the server as post request . Then , i used [node download helper](https://github.com/hgouveia/node-downloader-helper) to download the video using that link.

2-Upload the video from your own device : you press choose file and then you select the video and then the video gets sent as formData . on the server side , i used [express file upload](https://github.com/richardgirges/express-fileupload).

Then the video gets checked to make sure that the uploaded file is a video , and to make sure that the video’s size isn’t more than 200 mb. if not the file gets deleted .

###**2- Generating the screenshots :**
For this i used [ffmpeg](http://ffmpeg.org/) ( used the [ffmpeg buildpack](https://github.com/jonathanong/heroku-buildpack-ffmpeg-latest) on heroku) , and the [node fluent ffmpeg](https://github.com/fluent-ffmpeg/node-fluent-ffmpeg) .
{% gist https://gist.github.com/hohooio823/0cb62b10c13d1c455407962089d12bbe %}
Where count is how many screenshots you take , the higher count number is the more accuracy you get . Size is the image size and it is set to 960 * 540 because of the performance , also the better size the better results.
###**3- Uploading the screenshots:**
Now it uploads the screenshots to imgur api . Using axios , formData and [bluebird’s asynchronous map function](https://github.com/petkaantonov/bluebird) and then it returns the links out of the response to the links array , which get returned as well.
To keep things clean it deletes the uploaded video after the screenshots are generated , and deletes the screenshots after they are uploaded using fs.unlink() .
###**4- Scraping google’s search results :**
It works like this : if you put a link of an image after “https://images.google.com/searchbyimage?image_url=” it’ll reverse search it . What i did was i mapped the list of images links from imgur using blue bird’s asynchronous map function to get the html pages using axios , then i used cheerio to retrieve the links from the search results.
{% gist https://gist.github.com/hohooio823/8ad3330fc6ff40d742ec3b9462a72362 %}
###**5-Sorting the links:**
It sorts the links based on their occurrence . So , It basically gets the ones which repeat the most to the top , and the ones which repeat the least to the bottom . Finally , the results (list of links) are sent back to the front end.
{% gist https://gist.github.com/hohooio823/f63d11b155fd30f83d7f389ddc8c8ed3 %}
###**6- Showing the results :**
And now it’s time to show the results , for this i used [react tiny link](https://github.com/winhtaikaung/react-tiny-link) . A component that embed links .
###**7- Done !**
#**The Issues :**
####1-Heroku:
- Since i’m on the free plan of Heroku I've got into some problems and had me on limits :
The performance : wasn’t as i wanted and could’ve been much better if i wasn’t on the free plan
- Heroku request timeout : this was a nightmare to me since my app takes a long time to process . solved it but it wasn’t as clean as i wanted.

####2-External modules and Asynchronous:
- My webapp must work on asynchronous process . unfortunately , some of the external modules aren’t asynchronous . solved it as well by adding setTimeOut to a promise but this just didn’t seem clean to me , Im pretty sure there is a better way to have a cleaner solution for this . I will keep thinking about it, though the current workaround is good enough for my use case. Do share in the comments if you can think of a way

#**The Lesson:**
I’ve faced a lot of struggle and obstacles through out building this project , but that’s what taught me the joy of hardwork . this experience taught me that whenever you run into an issue all you need is to have some faith in your self and your abilities , to wait when you start telling yourself that you are done and you need to leave it behind , and to see the problem from another side.

if you’ve reached this point help me with a [follow on twitter](https://twitter.com/houssemasri)