Welcome to LAVISH, a web platform inspired by the Zara website's aesthetic and functionality. Built with the power of Nextjs version 14 and integrated with Contentful CMS, this app delivers a modern, user-centric shopping experience.
- Main functionalities
Screen.Recording.2023-10-31.at.1.38.01.mov
- Responsiveness
Screen.Recording.2023-10-31.at.1.47.22.mov
- Ease of Content Management
Screen.Recording.2023-10-31.at.1.54.43.mov
-
Data replicated from Zara API: Meticulously crafted self-defined data schema to capture Zara product data structure.
-
Efficient Data Rendering: For each product item in the main page, this app employs a lazy rendering technique (only fetch the first 2 images in the slider, fetch the rest only if the user interact with it). This significantly reduces latency, ensuring a swift browsing experience even with a large amount of product images and details.
-
View Switcher and Dark Mode: Customize browsing experience with view and theme switcher, allowing you to toggle between different display layouts (the dark mode sync between tabs).
-
Image Slider: A self-implemented, user-friendly image slider inspired by the Zara website ensures seamless navigation through the app product's image previews and main page.
-
Product Filters: Our product page offers advanced filtering options. Users can easily filter out products based on their fundamental property, streamlining the shopping experience.
-
Contentful CMS: A powerful content management system lets you manage your site's content effortlessly. It's act as admin content panel for a smooth administrative experience on a rich UI system.
-
User Authentication: With dedicated login and registration system, users are assured a secure experience with cart and favourite item saving functionality.
-
Bilingual Languages: LAVISH support two languages: English and Vietnamese through internationalization of content in the CMS
Client: React (Next.js), Zustand, TailwindCSS.
Server: Next.js (Node), Contentful Headless CMS.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.