PhotoLabs

PhotoLabs is a modern, responsive single-page application (SPA) built with React. It allows users to explore, view, and interact with a collection of high-quality photographs.

Features

• Browse a diverse collection of photos on the homepage
• Navigate through different photo categories (topics)
• View enlarged versions of photos with related/similar images
• Like photos from anywhere within the application
• Receive visual feedback for liked photos via a heart icon in the navigation bar
• Responsive design for seamless use across devices

Tech Stack

• Frontend: React
• Backend: Node.js with Express.js
• Database: PostgreSQL
• API: RESTful JSON API

Project Structure

The project is divided into two main parts:

1. /frontend: Contains the React SPA
2. /backend: Houses the Express.js server and PostgreSQL database

Setup and Installation

Frontend

1. Navigate to the /frontend directory
2. Run npm install to install dependencies
3. Start the development server with npm start

Backend

1. Navigate to the /backend directory
2. Run npm install to install dependencies
3. Set up the PostgreSQL database (see backend README for detailed instructions)
4. Start the server with npm start

API Integration

The frontend communicates with the backend API to fetch and update data, ensuring a dynamic and responsive user experience.

Future Enhancements

• User authentication and personalized photo collections
• Advanced searching for photos

This project showcases proficiency in modern web development practices, including:

• Building scalable SPAs with React
• Developing RESTful APIs
• Database design and management
• Frontend-backend integration
• Error handling and user experience optimization

Feel free to explore the codebase!

Screenshots

• Main page

• Image Modal

• Similar Photos