My Unsplash

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

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

Overview

Homepage

Add Photo Modal

Delete Photo Modal

Lable Suggestions

Login

Sign Up

Mobile Version

Built With

• React: JavaScript library for building user interfaces.
• Express: Web framework for Node.js.
• Node.js: JavaScript runtime for server-side applications.
• Vite: Fast build tool and development server for modern web applications.
• MongoDB: NoSQL database for storing application data.
• Mongoose: MongoDB object modeling for Node.js.

Features

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

1. I can see a list of photos in the masonry layout that I have added
2. I can add a new photo to the list - the new photo should be on top of the list
3. I can search for photos by label
4. When I hover a photo, I can see a label and a delete button
5. I can delete images
6. (optional): When I delete an image, I can enter my password

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/jukha/my-unsplash.git

# Go to backend
$ cd backend

# Install backend dependencies and start server
$ npm install && npm start

# Go to frontend/my-unsplash-frontend
$ cd frontend/my-unsplash-frontend

# Install frontend dependencies
$ npm install && npm run dev

Acknowledgements

• Deploy SPA with react-router to Vercel - Today I Solved - Medium
• How to Create Responsive Grid Layout using React Masonry

Contact

• GitHub @jukha