One of the most exciting aspects of web development is the seemingly endless amounts of tools that are at your fingertips. I always use the opportunity of starting a new project to explore different libraries, frameworks, platforms and tools that I have not used before.
A project that I decided to recently undertake was to build my own E-commerce application. For the frontend, I decided to use NextJS. NextJs comes with some amazing features that can optimise the websites performance and makes it easier/quicker to create a website as NextJS is built upon the React library. I also decided to use TailwindCSS to style my application due to its ease of use and the ability to create beautifully styled components.
While researching E-commerce sites, I came across Sanity. After reading through the Sanity documentation and watching a few videos on it, I was blown away at the capabilities of this platform. By using Sanity, I no longer needed to create a backend server using Express like I normally would have. I did not need to connect to a database such as MongoDb or Postgres. I didn’t need to create API’s in order to send and retrieve data from my database. Where it might have taken me a few days to create this backend, I managed to incorporate Sanity to my application in a couple of hours. It massively cut down my workload which is a huge plus in my books.
What is Sanity??
For those of you who don’t know, Sanity is a headless CMS, basically a platform for structured content that allows you to store data for your website/applications. Being that it is ‘Headless’, simply means you can plug it into any frontend framework of your choice. The best feature that comes with Sanity is the Sanity Studio. The Sanity Studio is a dashboard that allows you the manage your content that is then used to display on your website.
Example of Sanity studio
After connecting Sanity to your application, you can create a schema that will be the structure of your data. For example, in my E-commerce application, I need to display a product that will be for sale. In my Schema, I defined this product, giving it information such as a title, an image, a price, a description and a list of features etc. After creating this schema, I can go over to the Sanity Studio. Once here, I can create a new product where I will be met with the input fields that I defined inside my Schema.
Once this product has been created, I can head back over to my application and using a very simple query, can retrieve this data from Sanity and display it on my website.
Data retrieved from Sanity and displayed on website
Conclusion
Sanity is a fantastic and easy to use platform for both developers and admins of your website/application. After the completion of my E-commerce application, I am happy to say that I enjoyed my time using Sanity and will definitely be recommending it and using it again myself in the future.
Links
Sanity — https://www.sanity.io/
NextJs — https://nextjs.org/
E-commerce website — https://rye-river-electronics.vercel.app/
linkedIn — linkedin.com/in/adam-o-reilly-js
Top comments (0)