Open source frontend to publically available NASA data via NASA APIs. The goal of this project is to create an interesting open source frontend project where we have some craic with latest React, JS, CSS etc while still implementing a well structured and production ready web app.
- Get an API key from NASA APIs here.
- Clone this repo.
- Cd into folder & run
npm install. - Cope the
.env.exampleand change it's name to.env.local. - Add your API key to the .env file on line 1.
- Run
npm run devto run the local dev server.
The /app folder contents:
Relatively self-explanatory, global re-usable components will go here and will follow the pattern laid out in the Card component whereby we have a folder for the component which houses the component .js file, a CSS module file and a test spec.js file. A line is then added to the /components/index.js file to easily import the component elsewhere: export { default as Card } from "./Card/Card";
This part is in a bit of flux and will no doubt change over time
The main sections of the app, for example APOD which houses the Astornomy Photo of the Day section.
New sections will be added here and follow the pattern laid out in /APOD.
Redux related folder that contains "Services" and "Slices" related to applications state. The goal here being that each section will have it's own slice and service.
This part is in a bit of flux and will no doubt change over time
Page container components that dictate the layout of a page or section.
Global styles and styling utilities. Component level styles exist at the component level.
JS utility functions to be available globally. This will likely contain date related functions, some validation helpers or any other function that would be useful in several different sections or components.
This project uses Open Props as a replacement for a regular CSS framework. Open Props is self-described as "supercharged CSS variables".
The site is deployed to netlify (starter plan) on merge to master branch. Each PR triggers a build which checks prettier formatting and (soon will also check) unit tests.
When you create a PR you'll be greeted with a nice UI that will display the results of these checks.
Please create your branch under the naming convention user/{username}/{issueNumber}-{brief-description}