tools used

1. Chrome dev tools.
2. Tailwind css
3. SCSS
4. React 18+
5. Next 13+ (Tried using next 13 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

• Explanary 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.