Skip to content

A Codecademy independent practice project: build a PERN (PostgreSQL, Express, React, Node) app.

Notifications You must be signed in to change notification settings

Cmastris/pern-photo-gallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 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.

Photo listing page example

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).

Product detail page example

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.

Database diagram

Technologies

Back end

Front end

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:
  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.

About

A Codecademy independent practice project: build a PERN (PostgreSQL, Express, React, Node) app.

Topics

Resources

Stars

Watchers

Forks