openFDA is a research project to provide open APIs, raw data downloads, documentation and examples, and a developer community for an important collection of FDA public datasets.
Do not rely on openFDA to make decisions regarding medical care. Always speak to your health provider about the risks and benefits of FDA-regulated products. We may limit or otherwise restrict your access to the API in line with our Terms of Service
This repository contains the main open.fda.gov website.
npm run dev
docker build -t open.fda.gov .
docker run -p 3000:3000 open.fda.gov
The website will then be available at http://localhost:3000/
Redux actions go here. They describe all the possible state changes of the application
Any commonly used aria attributes can go here, like hiding an element from a screen reader
Stateless, functional react components go here. A function component should not have any state, and will always render the same thing if provided with a given set of props. Some routes have their own components folders, that provide components only used in that route. Most components should go here though
Container components go here. These react components are reduxified. They communicate with the store and dispatch actions, passing down props to their child components. This way we minify how many components have state, as well as having a tightly controlled, reliable way of describing application state
CSS is written with SCSS and is processed by gatsby-plugin-sass when the project is built and run locally. Overarching styling files are in the /css folder while component specific styling is in the /css/componenets/ folder. Individual SCSS files will be referenced at the component level.
Any hard coded data that is used globally goes here. Some routes have their own data folder that serves the same purpose, but is local to that route
Routes and posts for the page. The folder structure in here determines the routes for the site. All blog posts go in blog. Static assets like images, fonts, etc, should also go here
Our redux stores for the site
Any commonly inlined styles should go here. It really should only be the style reset
Flow types that are commonly used should go here
Handy openFDA specific utility functions like fetchQuery or randColor
Gatsby uses either a html or md wrapper when rendering content. In our case, we exclusively use the md wrapper
See details about testing at ./TESTING.md
config.toml can be used to declare global variables, if needed
The webpack configuration can be tweaked using gatsby.config.js, which allows us to override the default gatsby configuration