https://github.com/aarich/photos-site

Simple photo gallery for Apache HTTP Server using React
https://github.com/aarich/photos-site

apache-httpd photography php practice-project react

Last synced: 2 months ago
JSON representation

Simple photo gallery for Apache HTTP Server using React

• Host: GitHub
• URL: https://github.com/aarich/photos-site
• Owner: aarich
• License: mit
• Created: 2020-12-13T18:28:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-17T13:29:13.000Z (over 3 years ago)
• Last Synced: 2025-06-29T12:39:20.025Z (12 months ago)
• Topics: apache-httpd, photography, php, practice-project, react
• Language: TypeScript
• Homepage: https://photos.mrarich.com
• Size: 3.39 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Build](https://github.com/aarich/photos-site/workflows/Build/badge.svg)

# Simple Photo Gallery in React + Apache Http Server

This was built for [photos.mrarich.com](https://photos.mrarich.com) but the source is reusable, at least as a starting point.

## Features

- Paginated gallery

- "Reactive" image sizing to save bandwidth on mobile

- RSS Feed ([feed.php](https://photos.mrarich.com/feed))

- Caching

- Keyboard navigation

- Tag filtering

- URL navigation

- Automatic EXIF data display

- Probably some bugs

## Usage

- Run `npm install` to install dependencies.

- Add an `img` directory in the `public` folder.

  - The images should match `IMG_X.JPG`. The format can be updated in [`utils.ts`](src/utils/utils.ts).

  - You can experiment with image sizes. In most places the image is resized on the server to conserve bandwidth, so whatever size is used will likely be reduced before being displayed anywhere.

  - To save time/space/energy, you should also just put the `img` directory in your webserver root and make sure to not overwrite it when copying output files.

- Update [`manifest.json`](public/manifest.json)

- Update [links throughout](https://github.com/aarich/photos-site/search?q=mrarich)

- Update [`.env`](/.env)

- Update logos in [`public`](public)

- Update [`favicon.ico`](public/favicon.ico)

- Update [`tags.json`](public/tags.json) with your own tags

- Run `npm run start` to test

- Run `npm run build` to build

  - Copy output build directory to your apache webserver

## Scripts

In the project directory, you can run:

- `npm run start`: Runs the app in the development mode.

- `npm run test`: Launches the test runner in the interactive watch mode. (No tests for now 😬)

- `npm run build`: Builds the app for production to the `build` folder.

## Thanks

- [Create React App](https://github.com/facebook/create-react-app)

- [Bootstrap](https://getbootstrap.com/)

- [React Bootstrap](https://react-bootstrap.github.io)