Like and share photos generated by the NASA API. Check it out here
- Infinite Scrolling
- Like photos are saved even on refresh
- Shareable links
- Fully styled by myself using tailwind CSS with a little help from Headless UI.
On this project I wanted to challenge myself with an infinite scrolling feature. I started by learning the Intersection Observer API which is placed at the bottom of the photos list and once seen fetches the next 7 days. . Using React Query to set markers to load the next 7 images once the user scrolls to the bottom of the page.
"@headlessui/react": "^1.4.1",
"@heroicons/react": "^1.0.4",
"axios": "^0.21.4",
"date-fns": "^2.23.0",
"lodash.flatten": "^4.4.0",
"lodash.remove": "^4.7.0",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-query": "^3.23.2"