mafzaldev / my-unsplash-client

A full stack app (Minimal featured Unsplash clone) for uploading photos in a gallery (a task by devchallenges.io)

My Unsplash

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
• Built With
• Features
• How to use
• Contact

Overview

MyUnsplashDemo.mp4

Introduce your projects by taking a screenshot or a gif. Try to tell visitors a story about your project by answering:

• The project demo can be accessed here

Built With

• React
• Tailwind

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories:

• User story: I can see a list of photos in the masonry layout that I have added
• User story: I can add a new photo to the list - the new photo should be on top of the list
• User story: I can search for photos by label
• User story: When I hover a photo, I can see a label and a delete button
• User story: I can delete images

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/mafzaldev/my-unsplash

# Install dependencies
$ cd Backend

# Install dependencies
$ npm install

#Create a .env file with your MONGO_URI
MONGO_URI="YOUR_MONGO_URI"

# Run the backend app
$ npm run dev

# Move to Frontend
$ cd ..
$ cd Frontend

# Install dependencies
$ npm install

#Create a .env file with your VITE_SERVER_ADDRESS(for local development)
VITE_SERVER_ADDRESS="http://localhost:3000"

# Run the frontend app
$ npm start

Contact

• GitHub @mafzaldev
• Twitter @mafzaldev

my-unsplash-client's Issues

validate image URL

If we send an invalid URL for an image, it doesn't validate the URL, and sends to the database, as it is. fix that!