Lavish Ecommerce

screenshot of Lavish Ecommerce
nextjs
react
tailwind
contentful
prisma

Ecommerce platform with Contentful CMS

Overview:

LAVISH ECOMERCIAL - FULL STACK NEXTJS version 13 is a web platform inspired by the aesthetic and functionality of the Zara website. It is built using Next.js version 13 and integrated with Contentful CMS. The platform aims to provide a modern and user-centric shopping experience.

Features:

  • Data replicated from Zara API: Meticulously crafted self-defined data schema to capture Zara product data structure.
  • Efficient Data Rendering: Lazy rendering technique is employed to fetch only the necessary images and details, reducing latency and ensuring a swift browsing experience.
  • View Switcher and Dark Mode: Users can customize their browsing experience by switching between different display layouts and themes, including a dark mode that syncs across tabs.
  • Image Slider: A user-friendly image slider inspired by the Zara website allows seamless navigation through product image previews.
  • Product Filters: The product page offers advanced filtering options, allowing users to easily filter out products based on their desired properties.
  • Contentful CMS: A powerful content management system is integrated into the platform, making it easy to manage site content with a rich UI system.
  • User Authentication: A dedicated login and registration system ensures a secure experience for users, with functionality to save items to cart and favorites.
  • Bilingual Languages: LAVISH supports both English and Vietnamese languages, making it accessible to a wider audience.

Summary:

LAVISH ECOMERCIAL - FULL STACK NEXTJS version 13 is a web platform inspired by Zara's aesthetic and functionality. It offers features such as efficient data rendering, view switcher with dark mode, image slider, product filters, user authentication, and support for multiple languages. The platform is built with Next.js and integrated with Contentful CMS, providing a modern and user-centric shopping experience. Installation is simple and can be done by cloning the repository and running the development server.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

contentful
Contentful

Contentful is a headless content management system (CMS) that provides a flexible and scalable platform for creating, managing, and delivering digital content across multiple channels and devices.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

fullstack
Fullstack

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

react-hook-form
React Hook Form

React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

Yup

Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.

Zustand

Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.