Hey, explorers! The project is live! 🚀 You can check it out right here.
To run the project locally, clone the repo, run npm install and then npm start.
- React: The building blocks of our UI.
- TypeScript: For that extra layer of type safety.
- Sass: Making our styles modular and maintainable.
- Bootstrap: Responsiveness out of the box! 📦
- React Query: A fantastic toolkit for fetching, caching, and more!
- Lottie Animations: Because life’s too short for boring loading spinners!
All this deployed with ❤️ on Netlify!
It started off with this bird perched on a branch (see very right). I chose this logo with vibrant greens and earthy browns to echo California's dynamic scenery. 🌳🏜️ I further adapted the logo in Illustrator!
I created a placeholder image with the logo to reinforce branding. Love a stamped effect!
With React Query, the API interaction is a breeze. Loading and error states included!
React's built-in lazy loading helps keep things snappy, especially with those biiiigg images coming from the API. I also used an external library for images to help with performance.
The cards alignments with each other is crazy important to me. I used flexbox here to make sure the card heights matched each other, as well as having consistent image sizes.
I challenged myself with mixins and a directory structure that's ready to scale.
I appreciate you taking the time to look at my code and project. I had a blast building this, and I'm super excited about the idea of coding with the AirTank team.