JakeStanger/Reactive-Gallery
1
0
Fork 0
mirror of https://github.com/JakeStanger/Reactive-Gallery.git synced 2026-07-11 09:14:36 +01:00
Code Issues 1 Projects Releases Packages Wiki Activity Actions
React image gallery with Express backend
146 commits 2 branches 0 tags 1.1 MiB
  • TypeScript 86%
  • SCSS 12%
  • HTML 1.2%
  • JavaScript 0.8%
Find a file
Exact
Jake Stanger 4709199a92
 Merge pull request #35 from JakeStanger/dependabot/npm_and_yarn/minimist-1.2.6 
build(deps): bump minimist from 1.2.5 to 1.2.6
2022-04-02 14:20:55 +01:00
.docker/init build: add docker support 2020-12-19 18:03:48 +00:00
.idea chore: add test database 2020-05-25 22:48:31 +01:00
public refactor: disable disused google analytics code 2020-05-25 22:47:54 +01:00
resources fix overlay size 2019-11-11 21:35:40 +00:00
server fix: error when generating jpegs 2020-12-19 15:24:59 +00:00
src feat: add sentry logging support 2020-12-19 18:03:22 +00:00
.dockerignore build: add docker support 2020-12-19 18:03:48 +00:00
.editorconfig create editorconfig 2019-11-18 21:03:33 +00:00
.env.example feat: allow binding to custom host 2020-05-31 01:33:12 +01:00
.gitignore chore: exclude test photos directories 2020-05-25 22:47:07 +01:00
analyze.js checkout/payment system with stripe, lots of refactoring 2020-05-13 20:02:44 +01:00
docker-compose.yml build: add docker support 2020-12-19 18:03:48 +00:00
Dockerfile.api build: add docker support 2020-12-19 18:03:48 +00:00
LICENSE Create LICENSE 2020-12-22 09:19:00 +00:00
package.json Merge pull request #14 from JakeStanger/dependabot/npm_and_yarn/lodash-4.17.21 2022-02-15 20:05:34 +00:00
README.md checkout/payment system with stripe, lots of refactoring 2020-05-13 20:02:44 +01:00
tsconfig.json intiial commit 2019-10-23 20:23:14 +01:00
yarn.lock build(deps): bump minimist from 1.2.5 to 1.2.6 2022-04-01 21:50:25 +00:00

README.md

Reactive Gallery

This is a React image gallery web app. It uses a NodeJS/Express backend, which can be found in the server directory.

The gallery also includes support for a checkout using Stripe.

It is used live at Roger Stanger Photography, home to my dad's excellent photos, which you should definitely check out.

The project was built for this deployment so there isn't a huge amount of customisation ability out of the box. If any developers after a responsive photo gallery however, this will hopefully serve as a good starting point.

Setup

  • Run yarn to install dependencies

  • Copy .env.example to .env and fill in the environment variables.

  • Edit the client settings in src/config.json.

  • Edit the page content in src/pageContent

    • contact/TextDescription.tsx relies on a photo, which is not included in here. Either put a photo.jpg in the same folder or remove the image from the component.

  • Run yarn build to build the server and client

  • Copy the contents of build to a web server root

  • Run yarn start:server to start the server.

    • This is the same as node build_server. Use this to set up a service for the web server.

NOTE: The requests from the client are structured in such a way they expect the server and client to share the same host address. This gives you three options for deployment:

  • Configure your web server to proxy any requests on /api to the Node server.
  • Adjust src/services/ImageService.ts and src/services/UserService to fetch from a different origin.
  • Use the Webpack dev server to automatically proxy traffic with yarn start:client (not recommended, but good for testing).
    • You can use yarn start to start the server and client concurrently.