react-photolabs

The PhotoLabs project is a web application developed as part of the Web Development React course. It serves as a practical implementation of React concepts and full-stack development.

Project Overview

The primary goal of PhotoLabs is to provide a platform for users to explore and interact with a collection of photos. Users can view photos, toggle a details modal, and mark their favorite photos.

Features

1. Photo Display

• Users can browse through a collection of photos.

2. Photo Details Modal

• Clicking on a photo opens a modal with detailed information about the selected photo.

3. Favorite Photos

• Users can mark photos as favorites, and the list of favorite photos is persistently stored.

4. Similar Photos Display

• The application displays similar photos based on the selected photo.

5. Responsive Design

• The application is designed to be responsive and work seamlessly on various devices.

Final Product

Project Structure

The project is divided into two main parts:

Frontend

The frontend is built using React and utilizes Webpack for bundling. It includes features like displaying photos, a modal for detailed photo information, and interaction with favorite photos.

Setup

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

[Frontend] Running Webpack Development Server

cd frontend
npm start

[Backend] Running Backend Servier

Read backend/readme for further setup details.

cd backend
npm start