{"id":25483834,"url":"https://github.com/josgard94/nasa-react-gallery","last_synced_at":"2026-04-13T18:02:31.793Z","repository":{"id":277656803,"uuid":"933118794","full_name":"josgard94/nasa-react-gallery","owner":"josgard94","description":"NASA React Gallery is a simple React app that fetches and displays random images from NASA's Astronomy Picture of the Day (APOD) API. Each image comes with a description, allowing users to explore breathtaking views of the universe.","archived":false,"fork":false,"pushed_at":"2026-04-08T06:09:27.000Z","size":9776,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-08T08:16:39.575Z","etag":null,"topics":["aws","example-code","example-project","fronte","images","nasa","react","react-example-app","sereverless","webdevelopment"],"latest_commit_sha":null,"homepage":"https://josgard94.github.io/nasa-react-gallery/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/josgard94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-15T07:25:37.000Z","updated_at":"2026-04-08T06:09:32.000Z","dependencies_parsed_at":"2025-02-15T08:26:42.553Z","dependency_job_id":"feac0ea4-3782-4335-8c8a-382de206398b","html_url":"https://github.com/josgard94/nasa-react-gallery","commit_stats":null,"previous_names":["josgard94/nasa-react-gallery"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/josgard94/nasa-react-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josgard94%2Fnasa-react-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josgard94%2Fnasa-react-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josgard94%2Fnasa-react-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josgard94%2Fnasa-react-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josgard94","download_url":"https://codeload.github.com/josgard94/nasa-react-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josgard94%2Fnasa-react-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31764317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","example-code","example-project","fronte","images","nasa","react","react-example-app","sereverless","webdevelopment"],"created_at":"2025-02-18T17:48:13.744Z","updated_at":"2026-04-13T18:02:31.788Z","avatar_url":"https://github.com/josgard94.png","language":"JavaScript","readme":"# NASA React Gallery\n\n**NASA React Gallery** is a React app that fetches images from NASA’s [Astronomy Picture of the Day (APOD)](https://api.nasa.gov/) API and shows near–real-time space weather alerts from public NOAA/SWPC data. It includes a responsive gallery, persistent favorites, and a light/dark theme.\n\n\u003e Powered by NASA’s public API and built with React.\n\n---\n\n## Features\n\n### Gallery (APOD)\n\n- Fetches multiple images per request (e.g. `count=8`) and displays them in a responsive grid.\n- **Refresh** in the header re-fetches from the API (new random set depending on your configured URL).\n- **Progressive loading**: reveals cards in batches of eight as you scroll (Intersection Observer).\n- **Skeleton loaders** for the initial load and a refreshing state on reloads.\n- **Lazy-loaded card media**: images load when the card enters the viewport.\n- **Video** entries supported via `thumbnail_url` when `media_type` is video.\n- Click a card to open a **modal** with title, date, explanation, and favorite toggle.\n- Clear errors if the API URL is missing, the response is not valid JSON, or NASA returns an API error object.\n\n### Favorites\n\n- Favorite images from the grid or the modal.\n- Favorites persist in **localStorage** (`nasa-gallery-favorites`) as snapshots of the fields needed to render cards and the modal without an extra fetch.\n- **Favorites** tab with a badge count when there are saved items.\n\n### Space weather\n\n- Alert list from SWPC’s public JSON (default: [alerts.json](https://services.swpc.noaa.gov/products/alerts.json)).\n- **Pagination / load more** via scrolling inside the alerts panel.\n- Event-type classification, severity badges (G/R/S scales when applicable), and loading skeletons.\n- Optional env: `REACT_APP_SWPC_ALERTS_URL` to point at another compatible alerts URL.\n\n### UI and accessibility\n\n- **Light / dark theme** persisted in `localStorage` (defaults to dark).\n- **Tab** navigation (Gallery, Favorites, Space weather) with ARIA roles (`tab`, `tabpanel`).\n\n---\n\n## Live demo\n\n[https://josgard94.github.io/nasa-react-gallery](https://josgard94.github.io/nasa-react-gallery)\n\n---\n\n## UI\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./screenshots/ui_screenshot4.png\" alt=\"UI screenshot\" width=\"90%\" /\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n  \u003cimg src=\"./screenshots/ui_screenshot3.png\" alt=\"UI screenshot\" width=\"90%\" /\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n  \u003cimg src=\"./screenshots/ui_screenshot5.png\" alt=\"UI screenshot\" width=\"90%\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Tech stack\n\n- **Frontend**: React 18 (hooks, function components), Create React App\n- **Data**: [NASA APOD API](https://api.nasa.gov/), [NOAA SWPC JSON](https://services.swpc.noaa.gov/json/) (alerts)\n- **Styling**: Global CSS, CSS Modules for gallery components\n- **Deployment**: GitHub Pages (`gh-pages`)\n\n---\n\n## Installation\n\n1. Clone the repository and go to the client folder:\n\n```bash\ngit clone https://github.com/josgard94/nasa-react-gallery.git\ncd nasa-react-gallery/client\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Create a `.env` file in `client/` with your APOD URL (get a free key at [api.nasa.gov](https://api.nasa.gov/)):\n\n```bash\nREACT_APP_ROOT_API=\"https://api.nasa.gov/planetary/apod?api_key=YOUR_API_KEY\u0026count=8\"\n```\n\nOptional — alternate SWPC alerts source:\n\n```bash\nREACT_APP_SWPC_ALERTS_URL=\"https://services.swpc.noaa.gov/products/alerts.json\"\n```\n\n4. Run the app:\n\n```bash\nnpm start\n```\n\n---\n\n## Deployment (GitHub Pages)\n\nFrom `client/`:\n\n```bash\nnpm run deploy\n```\n\nBuilds the app and pushes to the `gh-pages` branch for GitHub Pages hosting.\n\n---\n\nNASA and NOAA/SWPC data are subject to their respective terms of use. Leave a star if you find this project useful.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosgard94%2Fnasa-react-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosgard94%2Fnasa-react-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosgard94%2Fnasa-react-gallery/lists"}