David's Planet Facts Site Project

This is a frontendmentor.io project that retrieves and displays the planetary data from a local JSON file. It was built using React and styled-components. The code and live application are hosted on github!

collage of desktop and mobile views of landing page

Highlights

Each planet has their own accent color that is used for button and navigation elements
Dynamic Wikipedia links based on planet and section (Overview, Internal, and Surface)
Single Page Application
React Hooks - useState, useEffect, useContext, and createContext
Styled Components - ThemeProvider, GlobalStyle, and methodology
CSS Best Practices - Mobile-first workflow and Responsive

My Experience

This frontendmentor project was another great exercise for React and styled-components. Please use the link to the application to check out the planets in our solar system and the multitude of styling elements in this application. In particular, the styling on the navigation bar is different on the mobile, tablet, and desktop resolutions.

With this project, I wanted to build another React application and become more comfortable with managing state and other React hooks. I really liked how I managed the state for the current planet and current category (Overview, Internal Structure, and Surface Geology). By putting those states into their own context providers, it was very simple to consume that information where it was needed (instead of prop drilling).

Overall, this was a really fun project and would recommend it for anyone wanting to use a framework like React.

frontend mentor's Sunnyside Agency Page