Let's create your own Google Photos with JavaScript.

Let's create your own Google Photos with JavaScript.

Time to gear up and create a file server system that works.

ยท

4 min read

2023 is about to end with upcoming opportunities and tech advancements. From the bigger perspective different versions of the Web to the decentralized web referred to as Blockchain, and AI are just taking over everything. But over that gloomy sky of AI, as always I tried to solve a problem that I, or anyone could face. Since I had the superpower to solve any problems using tech, I realized that cloud storage like Google Photos, Apple iCloud, DropBox, etc. was a pain in the ass for underprivileged people. Thus, I thought to create Lexys, a photo-sharing and storage service developed by your Lexy.

Lexys as Google Photos

A minimal version of Lexys offers a solution for storing, sharing with friends, and downloading images. I mean just images for now that contain JPEG, PNG, and WEBP. But later I'll be sharing how you can add tweaks and convert into fully Google Photos or cloud Apple Photos. Here's a minimal architecture of Lexys.

Authentication: I used Firebase Authentication and only allowed users to sign in using Google Account. Technically, it's way easier, and using a persistent browser session I could keep the user logged in till they logged out. Well, I'd say there's a small code snippet that helped me to achieve that.

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
      setLoading(false);
    });

    return () => unsubscribe();
  }, []);

I had that on the Router Page where unauthenticated users would be prompted to log in. Point to be noted, Firebase Authentication is completely free and it has various sign-in options including passwordless, SMS, email/password, social logins, etc.

ImageKit: You may have heard of React.js and Node.js but what is ImageKit you might ask. Well, ImageKit is just another cloud-based image and video management software. Is it free? Not completely but it sure has quite an integration documentation and is space-friendly. It offers 20GB of bandwidth, 20 GB of free storage, and 1000 video processing units.

๐Ÿ’ก
Google Photos is offering 15GB for free why would I hassle for this?

My answer is, wait I'm not done talking over here. ImageKit offers limited storage but not Lexys, I assure you that Lexys provides unlimited image storage and soon video uploading will be possible too. I'm just explaining the minimal architecture of it. And, there's more I need to explain.

Foldering media is boring, I need people's face grouping.

To be honest, I didn't think that I'd be adding more and more features to Lexys. Lexys is currently limited to folders and image hosting but you know I belong to the group of engineer that never stops adding features. I remember a few years back I contributed to an application where the app was able to recognize faces as per the image data I trained. So, that part would be useful here for grouping images using people's faces. Certainly, that would make Project Lexys a microservice application.

Let's not use ImageKit and create Lexys's File Server System

Challenge accepted, well I'd not built this from complete scratch cause I have a solution for that too. It's not about "How can I do that?" but "Who will do that?". I already have a public gist published.

I tend to forget passwords a lot that's why I had to link my different GitHub profiles but pardon I never forget to list them publicly. Now, I have a complete package to build a complete clone of Google Photos. Let's create an architecture for this version of Lexys. Again, it's about "Who can do it?", so I'd expect a few contributions on this project.

Here we go. The reason I said, "Who can do it?" is that I can code. However, configuring the machine on the left with a Wi-Fi connection to be accessible on the internet is to make the connection public. My knowledge is limited in that area, but I'm confident I can accomplish it too.

SaaS, Money, Money, Money

However, if you want to build your own, you may need some assistance. Apart from that, we automatically pay for WiFi bills because it has become a necessity. I will use Vercel, which is free for a few projects, and for my Node.js server, I will utilize Render, which can host my project for free until I reach the project limit. Voila! Now you can charge people for that, making it a complete SaaS. Wait, after you configure the connection on the left, you can host your MERN App on that machine too for free. Money Everywhere, haha.

It's December 11th, 2023 and this was the wrap-up for this year. Keep hacking and don't forget to contribute. Sponsor if you like my projects and blogs which keep me motivated to do these things. Merry Christmas in advance and don't forget to check the links I've attached in between. Happy Hacking!

Did you find this article valuable?

Support Laxman Rai by becoming a sponsor. Any amount is appreciated!

ย