PLNTS.com
PLNTS.com is a leading online plant shop in Europe. Here's an overview of my contributions to the Next.js storefront and Strapi CMS development.
Project Overview
PLNTS.com is a rapidly growing e-commerce platform specialized in houseplants and accessories. I contributed to the development of a new Next.js 15 storefront and Strapi CMS implementation.
My Role
As a Frontend Developer, I worked on developing and maintaining the e-commerce website, implementing features with React 19 and the Next.js App Router, while also contributing to the Strapi CMS.
Technologies Used
- Next.js 15 with App Router
- React 19
- Tailwind CSS
- TypeScript
- Strapi CMS
- GraphQL with Magento
- tRPC
- React Query
Project Architecture
The project uses a modern headless architecture with Strapi as the CMS backend and Next.js for the storefront. Content is managed through Strapi and exposed via APIs to the Next.js application.
Key Contributions
Next.js 15 Implementation
Contributed to the development of a modern e-commerce platform using Next.js 15 with App Router, including Server Components, client components, and various Radix UI components for enhanced accessibility.
Strapi CMS Integration
Helped set up and maintain the Strapi CMS, creating content types and building the necessary APIs to power the e-commerce storefront, enabling the content team to manage products efficiently.
UI Components
Built reusable UI components with React 19 and Tailwind CSS, focusing on performance, accessibility, and responsive design for an improved shopping experience across devices.
Performance Optimization
Implemented performance optimizations like image optimization, code splitting, and lazy loading to improve site speed metrics and deliver a better user experience.
Technical Implementation
My work on PLNTS.com involved several modern web development techniques and technologies:
React Server Components
Utilized React Server Components to improve initial page load performance and reduce client-side JavaScript, while maintaining interactive elements with client components where needed.
Internationalization
Implemented next-intl for translation support across multiple markets, with localized content, currencies, and region-specific features for the European market.
State Management
Used Zustand for client-side state management, with React Query for server state and data fetching, providing a smooth and responsive user experience.
Headless UI
Leveraged Radix UI components for accessible UI elements, combined with custom styling via Tailwind CSS to maintain brand identity while ensuring accessibility.