SnapStock - Website to get Stock Images & Inspirations for your projects

Technologies:

• Next JS

• Tailwind CSS

• Daisy UI

• Firebase Storage

• MongoDB

• TensorFlow.js

1. GitHub Repository:

Before diving into details, If you want source code, open the GitHub repo and clone the project:
https://github.com/HussnainAhmad1606/SnapStock-Website

2. Authentication System:

I implemented Auth in this website using JWT Authentication.

This technique involves signing up the user and hash the password using bcrypt and assigning the token using JSON WEB TOKEN when the user login to the account and saving that token to localStorage for future usage.

3. ML Model:

I saw somewhere (I guess it was unsplash.com) an image is showing black with text on it that says this image contains adult content. I saw the same thing on Twitter too. So I want to do the same thing in my project. Plus It will work as a security feature as I am allowing the users to upload images to the website and users may upload explicit content and I want to stop them from uploading explicit content to the website. I was searching for the solution on Internet & I found many ways of doing it.

Now, I think I would check the image before adding it to the DB. When a user is adding the photo, I would first check the image and if the image is good, then the user should be able to upload it otherwise he will see an error of choosing another image.

PS: What I did was check the image before uploading it to DB, and if the image contains explicit content, that image will have an attribute in DB isAdultOrExplicit that will be set to true.

On the front end, I am checking if isAdultOrExplicit is true, if so, I showed a message of explicit content. Users can still see the image by opening a single image.

4. Download Images:

For Downloading a particular image, I used a package called Download.js

As I have the URL of the image while showing it in UI, I just passed that URL to the function and this implements the Download feature.

5. Images Feed:

I have done this in previous projects, but for this project, I decided to do something different. I used Pinterest & Unsplash before and I liked their layout of how they show images to users.

So, I decided to use this layout as Inspiration and implement this layout in this project, & I am happy with the final Result.

Here is the DEMO video of this project:

That's it for this one.

If you like the article, share it with your friends.

Comment down your thoughts about it.

See you in the next one ;-)
Psycho