Nasa-CRUD-Gallery

A fully-responsive, infinitely scrolling NASA photo gallery complete with all CRUD operations.

Technologies

Built with:

TypeScript
Tailwind
React
Vite

Libraries & Features

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.

Dev Notes

Spinning up locally

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

Testing

Continious integration E2E & Component tests utilizing Cypress, Cypress Testing Library, and a Github Actions pipeline. See above scripts.

NASA API Load Time Optimization

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.