This is a project using the Unplash API to fetch images with Next.js. The application will initially fetch 10 images and will keep doing so through infinite scroll with react-infinite-scroll-component. You can view it live here.
The goals of this project are to:
- Use the Unsplash API to create an image gallery and support infinite scrolling that loads 10 images in one batch.
- Create a toggle button to toggle the image view from list to grid.
- Clicking on an image renders the image in full resolution with additional information such as the photographer, date, views, and downloads.
- Added loading screen on route change using animation from react-loading
- Add Open Graph meta tags in
_document.js
andHead
fromnext/head
for social sharing - Use FontAwesome to load icons for layout button
- Clone this repo
git clone https://github.com/melvincayas/image-gallery.git
- Install NPM packages
npm install
-
You must get an API access key from Unsplash. Please keep in mind that demo apps are limited to 50 requests per hour. Your fetches won't work if you exceed this limit.
-
Include the following in your
.env.local
file:
NEXT_PUBLIC_CLIENT_ID=YOUR_UNSPLASH_API_ACCESS_KEY
I'm always open to improving my code and the best way to do that is by having others critique it. If you see any bugs or opportunities to refactor, please let me know. It would be highly appreciated!
-
Fork this repo
-
Create your branch for improvement
git checkout -b your-improvement
- Commit your changes
git commit -m "Refactored the code"
- Push to your branch
git push origin your-improvement
- Open a Pull Request
- React
- Next.js
- Unsplash API
- FontAwesome
- date-fns
- Jest
- Enzyme
- Open Graph Protocol
- react-infinite-scroll-component
- react-loading
Melvin Cayas
[email protected]
melvincayas.com