This project elevates the Vercel Next.js eCommerce template into a custom-tailored jewellery shopping experience. From the various optimizations implemented throughout the development process this ecommerce website have a perfect score of 100 in all categories of Google's Lighthouse tool for both mobile and desktop environments.
- Web Performance: Achieves a Lighthouse score of 100.
- Security: Implements critical fixes, including safeguarding against the addition of $0 products via URL manipulation and discrepancies from product page and cart prices.
- Next.js 14.1.0 & Node.js 20: Harnessing the latest advancements for optimal performance.
- Tailwind CSS & TypeScript: Delivering a responsive design and robust type safety.
- Shopify Integration: Shopify GraphQL API for seamless e-commerce operations.
- Edge Runtime: Dramatically increases page speed worldwide enhancing experience for every corner of the world.
- Type Safety: Removing all generic ‘any’ types, and ensuring precise type definitions
- UI/UX Design: Styling and UI redesigned to cater specifically to jewelry eCommerce, including a custom video component and an advanced performant carousel.
- Performance Optimizations: Including lazy loading, optimized image handling, and efficient data fetching for a seamless user experience.
- Robust Error Handling: Distinct logic for error scenarios and a custom ShopifyError class for precise error management.
- Product Variant and Pricing Optimization: Ensures fast and accurate product information with server-side caching, hashing, and fixes for pricing discrepancies between product page and cart.
- Dynamic Open Graph (OG) Images: Boosts shareability and social media visibility.
- Dynamic Sitemap generation: Automatic creation of Sitemap.
- Continuous Content Freshness: Via webhooks and on-demand revalidation in response to Shopify store updates.
- Accessibility Enhancements: Makes the site more inclusive, broadening its reach.