Skip to content

๐Ÿ–ผ๏ธ Stock photo single page application (SPA) enabling customers to view and interact with photos fetched via API from the database.

Notifications You must be signed in to change notification settings

kazvee/photolabs

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

PhotoLabs

PhotoLabs is a straightforward stock photo application. Using React on the frontend, it leverages a pre-existing API to enable users to view and interact with various photos within a range of different contexts.
Built as a single page application (SPA) with a seamless user experience in mind, our eye-catching photos are stored in the database, so even after a browser refresh or session restart, they'll still be available to enjoy and explore.

Final Product

Demo Video of Functionality:

PhotoLabs_Video.webm

View Multiple Photos:

"View of Multiple photos in the Animals category"

Closer View of Single Photo:

"Closer View of Single Photo"

Purpose

This project was created by me as part of my learnings at Lighthouse Labs

Features

๐Ÿก Homepage / View All Photos
Offers a view of all available photos and a top menu for ease of navigation

๐Ÿ“š Photo Categories / Topics
Click on the various top menu options to browse through different photo categories

๐Ÿ”Ž Take a Closer Look
Click on a photo to view a larger version and discover relevant/similar photos

๐Ÿคฉ Favourites / Likes
Show your appreciation by clicking the heart icon to favourite/like a photo

๐Ÿ’– Notifications
Keep track of all your favourites with the heart icon notification feature built into the navigation menu

Bonus Features (Built as Project Stretch Goals)

๐Ÿ  Return to Homepage
Click the PhotoLabs title on the top menu to return to the homepage to view all photos

๐Ÿ”ƒ Refresh All Photos
On title click, photos are re-fetched from the database, enabling you to explore any latest additions

๐Ÿ˜ View All Favourites / Likes
Click the heart icon in the navigation menu to view all favourited photos
If clicked within a category, only the favourites belonging to that specific category will display
If clicked from the homepage, all favourites across all categories will display

๐ŸŽจ Enhanced Styling
Cursor transforms when hovering over clickable menu items, offering intuitive visual feedback to invite users to explore and interact
Extra finishing touches added to the design, in muted tones, enable the main visual content to shine through

Dependencies

A note about create-react-app

For larger, production-ready applications, React's official documentation and best practices now recommend other ways to Start a New React Project
Since this was a project for learning purposes only, it has been bootstrapped with Create React App
With no plans to scale this project out, or add further customisation, create-react-app provided a simple way to quickly get a functional React app up and running

Installation

Getting Started

  • Fork this repository to your own Github account
  • Clone your fork onto your local device

Set up Frontend & Backend

  • Install all dependencies with npm i (or npm install, if you prefer typing more) in the /frontend and the /backend folders

Set Up Database

  • In a terminal window, connect to your PostgreSQL environment using the psql command and your login credentials
    • In some environments, the startpostgres command may need to be run beforehand
  • Create a new database using the CREATE DATABASE photolabs_development; command, where 'photolabs_development' is the name you want to call this new DB
  • Connect to the new database with the \c photolabs_development command, where 'photolabs_development' is whichever name you chose for your new DB in the the previous step

Add Database Credentials to dotenv File (.env)

  • Using the provided .env.example file as a template, create a new file named .env.development in the same folder.
  • Add your database name, username, and password
    • Note: If running the app locally, the PGHOST would be localhost, and for PostgreSQL the PGPORT will usually be 5432
    • For security reasons, the .env.development file has been added to the .gitignore file, so these sensitive details will not accidentally be published to GitHub

Seed the Database

  • Navigate to the /backend folder in your terminal and run the development server using the npm start command
  • Then, either:
    • Make a GET request to /api/debug/reset with curl http://localhost:8001/api/debug/reset in your terminal
      OR
    • Use the browser to navigate to http://localhost:8001/api/debug/reset

Start the App

  • Connect to the database server from the root folder by using the psql command and your database credentials
  • Start the backend by running the npm start command from within the /backend folder. The API server will run on Port 8001
  • Start the frontend side using the npm start command from within the /frontend folder. The client will run on Port 3000
  • Navigate to http://localhost:3000/ in your browser
  • Start exploring our lovely photos! ๐Ÿคฉ

About

๐Ÿ–ผ๏ธ Stock photo single page application (SPA) enabling customers to view and interact with photos fetched via API from the database.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 85.6%
  • SCSS 11.1%
  • HTML 2.3%
  • CSS 1.0%