https://github.com/mathisbullinger/resplash
https://github.com/mathisbullinger/resplash
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mathisbullinger/resplash
- Owner: MathisBullinger
- Created: 2022-02-03T08:04:07.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-14T15:31:41.000Z (about 4 years ago)
- Last Synced: 2025-02-05T13:48:14.106Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://resplash.bullinger.dev
- Size: 1.41 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Resplash
A little demo app showing photos from the [Unsplash](https://unsplash.com/) API.
The app can display the photos in one of two different layouts:
- a traditional masonry-style layout where photos are always pushed onto the
smallest column
- a layout that alternates between portrait- and landscape-format photos which
are "snapped" to a grid (portrait photos taking up two rows)
The user can like photos. The liked photos are listed on a separate page and the
information which photos have been liked is persisted to IndexedDB.
The app uses React, react-router, and Redux (including the Redux Toolkit).
Other than that, no runtime dependencies are required.
All configuration (TypeScript, Webpack, Babel, Jest, ESLint, and Prettier) is
custom to this project.
## Setup instructions
The app connects to the Unsplash API through a
[little proxy service](https://github.com/MathisBullinger/resplash-proxy) that
caches requests and falls back to them in case the rate limit is exceeded.
You can run the proxy locally or connect directly to the one the deployed
website uses.
Either way, you will need to tell the app where to connect to. To do that,
create a `.env` file containing:
```
API_ENDPOINT=https://hkqc9eb5si.execute-api.eu-west-1.amazonaws.com/prod/
```
Alternatively, you can also define an environment variable named `API_ENDPOINT`
that webpack will use during the build.
After that, just `npm install` the dependencies and start the dev server with
`npm run dev`
Scripts to lint and format the code have also been defined in the
`package.json`.