Planthome
an e-commerce landing page for a fictitious plant selling company. built with gatsbyjs and coupled with sanity cms for content management
stack: | typescriptgatsbyreacttailwindcsssanity-cms |
---|---|
code: | github repo |
live: | live site |
purpose and goal
I wanted to get really good with Gatsby, and that's by building many projects. So I decided to build another Gatsby project.
Before this project, the UIs of all the projects I've built were designed by me tinkering around until it looks good to me, I wanted to implement a design created by a professional designer and also have experience implementing a design file.
So I asked one of my UI designer friends on the web, I got a Figma Landing Page design to implement.
general requirement
As always, apart from the bare minimum that the generated website must be fast and responsive. I had a few requirements in mind to be able to call this project a success:
The resulting website must match the design on the Figma file.
Non-technical users should be able to add and update the site content and use a CMS that I haven't used before.
Add simple animations.
stack explanation
I just started learning Tailwind CSS so I decided to use it in this project.
I used Sanity CMS for content management because I've been hearing great things about it and wanted to try it out.
I used React-Reveal for the slide-up animation because it's simple and fits in my use case.
challenges
Sanity CMS wasn't as straightforward as the other CMS I've used, I had some difficulties getting up and running. Thanks for the great doc.
wrapping up
I learned to implement designs I learned another CMS. Got more experience with GatsbyJS and Typescript.