NASA - Infinite scroll, tailwind, App dir | Next.js 13 Interview project
Channel: IT Rebels
Date: 2023-03-05

NASA - astronomy pic of the day application  | Next 13, app dir, server components, Infinite scroll.
tools used
1. Chrome dev tools.
2. #tailwindcss 
3. SCSS
4. React 18+
5. Next 13+ (Tried using #next13 app directory)
6. react icons
7. ant design - modals
8. moment - for handling dates
9. axios - for data fetching
10. react-infinite-scroll-component - for client side #infinitescroll
11. react-masonry-css - for #masonry  Picture Cards

- Explanatory video : https://youtu.be/9JZhs__Awso
- live Demo : https://astronomy-pid.vercel.app/
- My Portfolio : https://kritik.servicesstrategy.com/
- github : https://github.com/kritik-sah/astronomy-pid

Note:

1. initialy i tried to use next 13 server side data fetching, but it was not not working properly so i used client side data fetching
2. I was using custom infinite scroll but then i found this package "react-infinite-scroll-component" which is better then mine. so i used it.
3. I built custom masonry before using css flex but i have to put that in column and have to make height fixed. but now with "react-masonry-css" it made it way simpler.

now: its working fine even in production.