planetviewer
Learn about the planets in our solar system whilst interacting with 3D models of them. These are can be viewed in Augmented Reality on iOS devices.
Project overview
This project was initially a challenge from Frontend Mentor, but I decided to expand it by adding some exciting extra features. I was motivated to create an app that not only met the requirements of the challenge, but also allowed users to interact with 3D Models and experience the planets in augmented reality.
The solution
To accomplish my goals, I used React and React Router DOM to create a single-page application with eight routes for each planet. As I switched routes, I had to manage the state of the current active tab, and this gave me the opportunity to use the Context API for the first time, which helped me avoid unnecessary prop drilling. I also utilised Styled-Components to efficiently build components for all screen sizes with a mobile-first workflow.
Challenges
While building the app, I encountered some challenges related to the UI. One of the most significant was the time it took for the 3D models to load. I mitigated this issue by creating a poster file that displays before the model is rendered. This gave the users something to see while the model loads, improving their experience.
