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 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
Technology Stack:
- Backend: Node.js, Express.js, PostgreSQL
- Frontend: React, HTML and SCSS.
Install dependencies with npm install in each respective /frontend and /backend.
cd frontend
npm startRead backend/readme for further setup details.
cd backend
npm start