PERN Photo Gallery

A photo gallery website that uses the PERN (PostgreSQL, Express, React, Node) stack. React Router is also used for front-end routing.

Take a look: https://pern-photo-gallery.onrender.com/.

Contents

• Key features
  • Photo listing pages
  • Photo detail pages
  • Dynamic routing
  • Testing
  • Database documentation
• Technologies
  • Back end
  • Front end
• Setup
• FAQs
  • Can I see an example?
  • Why did you build this?
  • Is this project in active development?

Key features

Photo listing pages

Photo listing pages are dynamically rendered via requests to back-end API endpoints, which return JSON data that's used to populate the current collection page or homepage.

Relevant code: front-end photo feed components; photos API endpoints; collections API endpoints; database query functions.

Photo detail pages

Photo detail pages are dynamically rendered via requests to a back-end API endpoints, which return JSON data that's used to populate the current photo content and related collection links (all collections that contain the photo).

Relevant code: front-end photo detail page component; photos API endpoints; collections API endpoints; database query functions.

Dynamic routing

Front-end URL routing is implemented using React Router v6, utilising dynamic paths (params, specifically photo & collection URL slugs) and data retrieval functions (loaders) to load content via requests to the back-end API.

Relevant code: routing configuration; photo feed component; photo detail page component.

Testing

Over 20 tests are implemented using Jest, SuperTest, and React Testing Library. Back-end tests utilise a mock database while front-end tests incorporate routing.

Relevant code: back-end photos tests; back-end collections tests; front-end tests; front-end test routers.

Database documentation

The database structure is documented via a Database Markup Language file and visualised in a diagram.

Technologies

Back end

• PostgreSQL
• Node.js
• Express v4 (including several middleware modules)
• node-postgres
• dotenv
• Jest
• SuperTest

Front end

• React v18
• React Router v6
• Jest
• React Testing Library

Setup

1. Clone/download a local copy of this repository.
2. Using the command line, navigate to the /back-end subdirectory and run npm install to install package dependencies (using the package-lock.json file).
3. Create the application & test PostgreSQL databases, optionally using the SQL provided in /back-end/db/db-creation.sql, using a PostgreSQL client application (e.g. pgAdmin) or the command line (psql).
4. Create and populate the application & test database tables using the SQL provided in /back-end/db/table-creation.sql and /back-end/db/table-population.sql respectively.
5. In the /back-end subdirectory, rename the example.env file to .env.
6. In the .env file, update the values corresponding to the PostgreSQL database configurations as required. Refer to the following documentation for more details:
   • https://node-postgres.com/features/connecting#environment-variables
   • https://www.postgresql.org/docs/current/libpq-envars.html
7. Optional: using the command line, run npm test in the /back-end subdirectory to run the test suite (all tests should pass if the steps above were successful).
8. Using the command line, run node index.js in the /back-end subdirectory to start the API server.
9. Using a new command line window, navigate to the /front-end subdirectory and run npm install to install package dependencies (using the package-lock.json file).
10. In the /front-end subdirectory, rename the example.env file to .env.
11. Optional: using the command line, run npm test in the /front-end subdirectory to run the test suite (all tests should pass if the steps above were successful).
12. Using the command line, run npm start in the /front-end subdirectory to start the React app (while the back-end API server is still running via a separate command line window).
13. The application should launch in your browser, but otherwise can be accessed at http://localhost:3000/.

FAQs

Can I see an example?

Yes! A production version of the website can be found here: https://pern-photo-gallery.onrender.com/.

Why did you build this?

This is one of the practice projects that I completed as part of the Codecademy Full-Stack Engineer career path. I planned and built it independently; the only requirement was to build an application using the PERN stack.

I now have more experience with:

• Database design, table creation, and querying
• Automated testing of Node.js and React applications
• The PERN stack and full-stack web development in general

Is this project in active development?

I'm not currently working on further improvements/features.