A fully-responsive, infinitely scrolling NASA photo gallery complete with all CRUD operations.
Built with:
- First PR was the base project complete with all vanilla react and typescript code. Each PR thereafter contains production library integrations by using:
- React Router v7 for all client-side routing (navigating pages).
- Ky for the API call's fetch.
- React-Query for all server-state management (useFetchImages custom hook).
- TailwindCSS for sanity.
- Twin.Macro & Styled Components for HTML cleanup and CSS-in-JS with Tailwind.
- React Icons
- Cypress and Cypress Testing Library for CRUD operation e2e testing (with MSW to mock API calls).
- react-i18next - multi-language support (English, Spanish currently).
- Framer Motion - animation.
- Github actions, LogRocket, and Vercel - CI, analysis, web-hosting & more.
-
Create a '.env' file inside the root of the folder and paste your API key from NASA's Website.
VITE_NASA_API_KEY = "YOUR_SECRET_KEY_HERE" -
Scripts:
npm run start // spins up project in a local development environment (Vite) npm run cypress:dev // starts cypress GUI w/ local server for testing-development npm run cypress:e2e-ci // used in github action CI or terminal for running cypress tests with headless UI
- Continious integration E2E & Component tests utilizing Cypress, Cypress Testing Library, and a Github Actions pipeline. See above scripts.
The UI utilizes a custom date-pagination-hook implemented to optimize the API call - because NASA's API takes 4 seconds for 7 days of images; you can't just pass in a huge date range to the API. Each time the last element on page is detected, we update the start and end date, and recall the API.