PhotoLabs-React

PhotoLabs is a React-based SPA photo gallery website. It serves gorgeous images from a number of categories. You can see photos by topic by clicking on the topics in the navigation bar. You can favourite images by clicking on their heart icon. If you want a closer look, you can click on an image, which will open a modal view with a larger version of the picture. You will also be presented with other similar photos.

Photolabs Screenshots

Primary Skills & Technologies

PhotoLabs is a great way to learn React-related skills, which include:

• Functional JavaScript Methods (.filter())

• Destructuring Arrays & Objects

• Data Structures (Objects vs. Arrays)

• Components & Component Design

• Styling Components

• Fragments

• Event Handling

• Data Flow in React (Passing Data to Child Components via Props; Keys)

• Conditional Rendering

• State Management & Immutable Update Patterns

• Controlled Components (Override HTML (form) elements to let React control their state.)

• React Hooks (useState(), useReduce(), useEffect(), and custom hooks)

• Interfacing with the Backend API

• Handling Data Fetching & Other Side Effects with useEffect()

• React Development Tools

Dependencies

Technology Stack:

• Backend: Node.js, Express.js, PostgreSQL
• Frontend: React, HTML and SCSS.

Getting Started

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