The HODP website is built using a diverse stack of technologies, and this guide will help you understand how to work with them.
Website Stack
The HODP website is built with:
- React: A JavaScript library for frontend development that allows us to declare UI elements as components and reuse them in different configurations.
- Gatsby: A static site generator that compiles the React code into plain HTML, CSS, and JavaScript as part of the build process. This, along with other optimizations, makes Gatsby sites extremely fast.
- Sanity: A content management system (CMS) that stores website data for articles, blog posts, team members, datasets, and pages in structured JSON objects. Since Sanity is a headless CMS, it only controls the data, not the presentation.
- GraphQL: A querying language used to retrieve data from Sanity in a predictable format.
- Firebase: A database that stores user data for the survey group and the predictions game.
- Theme UI: A styling framework that stores our style guide in one file. It handles sitewide themes, inline styles, and styled components.
Running the Site Locally
To run the site on your local machine, you need to clone the website repository, navigate to the hodp-website directory, switch branches to v2-styling, install the dependencies, and run the site. The website will run locally at localhost:8000.
Developing an Interactive Component
The guide recommends developing your component in a separate repository before transferring it to the HODP codebase. It details the steps you need to follow to create a new component, test it, and add it as an option to the general ReactComponent type of block content. Once your changes are approved, they will be merged into the main branch.
Troubleshooting
If you encounter errors, the guide provides tips on how to debug general issues and D3 development issues. You can reach out to the tech team if you need further assistance.
Codebase Outline
The hodp-website repo stores two websites. The studio directory controls the content structure and the frontend of the Sanity studio, while the web directory stores the code for the main website.
Remember, if you need to install node packages, install them in the web directory, not the general hodp-website directory. If you install them in the general directory, theyโll work locally, but they wonโt be recognized in deployment.