react-photolabs

The PhotoLabs project for the Web Development React course programming as part of Lighthouse Labs.

PhotoLabs is a full-stack React project that showcases different pictures for different topics. Users can click on different pictures to reveal pop-ups that include more detailed info about the picture. They can also like a picture anywhere and be notified of a like.

Photolabs

Demo

PhotoLabs Home Page:

PhotoLabs Nature Topic:

PhotoLabs Nature Modal and Like:

Built With:

React
Node
Express
PostgreSQL
SASS

Setup

If using SSH:

git clone git@github.com:Wilson-Chu/photolabs-starter.git

Then, from home directory:

cd photolabs-starter

Install dependencies with npm install in each respective /frontend and /backend.

[Frontend] Running Webpack Development Server

cd frontend
npm start

[Backend] Running Backend Server

Read backend/readme for further setup details.

cd backend
npm start

Future Improvements

Selected topic indicator not implemented yet: after a user clicks on a topic in NavBar, the overhead line should persist