https://github.com/nemanjam/grid-gallery
Image search with masonry grid gallery in React.
https://github.com/nemanjam/grid-gallery
gallery grid masonry reactjs redux redux-saga
Last synced: 9 days ago
JSON representation
Image search with masonry grid gallery in React.
- Host: GitHub
- URL: https://github.com/nemanjam/grid-gallery
- Owner: nemanjam
- Created: 2020-05-01T15:41:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T22:21:47.000Z (over 3 years ago)
- Last Synced: 2025-03-30T19:48:50.794Z (7 months ago)
- Topics: gallery, grid, masonry, reactjs, redux, redux-saga
- Language: JavaScript
- Homepage: https://nemanjam.github.io/grid-gallery/
- Size: 3.79 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Grid Gallery
One page image search app that I did to get some practice with CSS Grid.
## Demo
Demo is available here: **[Demo](https://nemanjam.github.io/grid-gallery/)**
You can play with the source on **[CodeSandbox](https://codesandbox.io/s/github/nemanjam/grid-gallery)**
## Features
- Search images on Pixabay by single keyword
- Masonry style grid gallery
- Loading states and load more pagination
- Preview image in modal
- Global state in Redux
## Screenshots
## Installation
```
$ git clone https://github.com/nemanjam/grid-gallery.git
$ cd grid-gallery
$ npm install
$ npm run start
```
Set your own Pixabay key in `/src/store/api/index.js`.
```javascript
const API_TOKEN = 'your-token-here';
```
You can deploy this app on github pages by running:
```
$ npm run deploy
```
App will be available on `https://.github.io/grid-gallery`
## Libraries used
- React with Hooks
- Redux, Redux Saga
- React Bootstrap, Node Sass
## References
- Wtjs's repo [What the Splash](https://github.com/wtjs/what-the-splash)
- Stephanie's Codepen [CSS Grid Responsive Image Gallery](https://codepen.io/ramenhog/pen/MpORPa)
- Stephen Grider's Udemy course [Modern React with Redux](https://www.udemy.com/course/react-redux/)