This is a solution to the Planets fact site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- View each planet page and toggle between "Overview", "Internal Structure", and "Surface Geology"
- Next.js - React framework
- Styled Components - For styles
- Framer Motion - For animations
- CSS custom properties
- Mobile-first workflow
I started this project to practice React, but I soon realized I was writing the same code for every planet, since every page looks the same, and I thought there MUST be a better way. After some research - I found Nextjs. The dynamic paths seem like the solution I was looking for. That also meant a huge refactor of the entire React project.
I relied heavily on the official docs and articles to get it together. I had a lot of questions in development and looking back, I should've asked for help sooner to avoid unnecessary frustration. Nevertheless, quite proud of how the project turned out since it pushed me to add a framework to my arsenal.
I now understand why they say it can be difficult to add animations in React. Changes in state and the DOM make it quite tricky. It's something I'd like to delve in a little more going forward.
-
I did an insane amount of googling since I wasn't intending to learn a framework on the fly, but this blogpost from Ali Spittel was the one that got me started.
-
For styled components, I used concepts I've been learning from Josh Comeau's CSS for Javascript Developers course.
- Website - About Me
- Frontend Mentor - @emestabillo
- Twitter - @emestabillo
- Thank you to the community at Frontendmentor.io for the support, especially to APG who took the time to look into the bugs on my site :-)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent