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

This is an Unsplash mini clone. You can find the link to the demo in the title above.

Built With

• Next.js
• React
• Prisma
• Postgresql

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
• 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

However, more features were added to give the application more functionality such as authentication, a route for a user's photos, the ability to like photos and responsiveness.

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

# Install dependencies
$ npm install

# Run the app
$ npm run start

You will also need to set some environment variables:

1. Set the database connection url

# .env

# Specify the url of your database connection that is going to be used by the prisma client.
# If you don't have an existing database you can set one up quickly using docker:
# docker run --name postgresql -e POSTGRES_USER=my_unsplash -e POSTGRES_PASSWORD=my_unsplash -p 5432:5432 -v
# ~/my-unsplash/data:/var/lib/postgresql/data -d postgres
DATABASE_URL=postgresql://username:password@host:port/db_name

2. Specify your google app credentials, you can get these from google. Remember to set the authorised redirect URI to https://your-domain/api/auth/callback/google

# .env

GOOGLE_ID=your-google-id
GOOGLE_SECRET=your-google-secret

3. Set your github oauth app credentials. Your authirization call back url should be https://your-domain/api/auth

# .env

GITHUB_ID=your-github-id
GITHUB_SECRET=your-github-secret

Acknowledgements

• Elephantsql for their free database hosting tier
• SWR, a lightweight react hooks library for data fetching
• NextAuth.js

Contact

• Website b-ibrahim
• GitHub @dvqc