SnazzyStones.ca
Contact form page, uses SendGrid to send inquiries from custom-domain email address
The landing page for the website
A feed of SnazzyStones' latest Instagram posts from Instagram's Basic Display API
An autocompleting search bar for any products on the website
The catalog page for the website's products, modelled photos on hover
The product page - Framer Motion image carousel, Etsy API data, social-sharing buttons, link to Etsy page
Product reviews drawn from Etsy, images included
A page with embedded Google Maps showing in-person market locations
Contact form page, uses SendGrid to send inquiries from custom-domain email address
The landing page for the website
Background
Snazzystones.ca is an e-commerce themed front-end for the Etsy page, SnazzyStonesJewelry. Previously, Snazzystones.ca was a Wordpress site using Woocommerce for independent e-commerce activity, but the difficulties of inventory management caused by the disconnectedness between Woocommerce and Etsy, as well as the latter's disproportionate popularity, necessitated a de-listing of products on the Wordpress site. Rather than removing this sales channel, an alternative solution was proposed, which was to build a Next.js front-end that pulls data from Etsy's API and funnels users to the Etsy page.
Features
The website is designed and built to appear as a typical e-commerce store front, right up until the point that the user checks out, at which point they are sent to the store's Etsy page. Backed by data pulled from Etsy's API (every 12 hours), the website contains a number of features, such as:
- Title, description, origin-country, and price of all products actively listed on the site / Etsy.
- An autocompleting search of all products actively listed on the site / Etsy.
- Category catalogue pages that can be sorted by date-added, popularity, and price.
- Number of product favorites.
- Number of units in stock of product.
- Reviews of a product (with images).
- A link to a product's page on Etsy, so that products can be purchased there.
In addition, the website has a few features not directly powered by Etsy:
- A paginated Instagram feed of SnazzyStone's latest Instagram posts.
- Social sharing buttons on each product's page for sharing to Facebook, Twitter, WhatsApp, and email.
- A page with emdedded Google Maps for SnazzyStone's various in-person markets.
- A Contact page for sending inquiries.
Development
React
React
Material UI
Material UI
Tailwind CSS
Tailwind CSS
Next.js
Next.js
Snazzystones.ca is a Next.js website using a mix of statically-generated and incrementally statically regenerated pages.
Front-End
Being a Next.js application, the website is built using React components. Most of these components are hand-written, but the MUI component library is used to bootstrap some of the more complex components, such as the autocompleting Site-Search.
Styling for the website primarily uses Tailwind CSS, a popular utility-first CSS framework that allowed rapid styling of the front-end with minimal duplication of class functionality. SCSS classes are used for background images (hosted on Cloudinary) of headers, and are separated into modules relevant to each page to optimize the CSS payload size for each page. Complex animations, such as the opening of the mobile nav-menu and the playful hovering of the Social Share icons, use Framer-Motion.
Back-End / APIs
The website doesn't have a typical back-end, as the motivation for re-creating the website was for it to serve as a facade / additional funnel for the Etsy shop, which handles the product database and e-commerce functionality. As such, Etsy's public API is the source of data for the products, as noted in the Features section.
Additionally, a few other APIs are in use for various sections of the website:
- Embedded Google Maps to the in-person market locations are in use on the Our Shows page.
- The Instagram Basic Display API is used to generate an up-to-date Instagram-post feed on the Home page.
- SendGrid's Email API, along with their @sendgrid/mail Node.js package is used on the Contact Us page to send inquiry emails to the site owner through a branded domain email.