Project Overview :

KeyStore is an e-commerce platform focused on selling high-quality mechanical keyboards, keycaps, and switches. Designed with a clean, modern UI, this platform provides an exceptional user experience through intuitive navigation, responsive design, and a fully-functional shopping cart. Built with Next.js, TailwindCSS, ShadCN UI, and Sanity as the headless CMS, KeyStore offers a seamless and responsive browsing and shopping experience.

Getting Started

Make sure you have Node.js and npm installed on your machine. Clone the repository and install the dependencies by running the following commands:

1git clone https://github.com/NarakCODE/kbdfans-clone-nextjs.git
2cd kbdfans-clone-nextjs
3npm install
4npm run dev

Environment setup

1NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
2NEXT_PUBLIC_SANITY_DATASET=production
3NEXT_PUBLIC_SANITY_API_VERSION=2024-01-01

Features :

• Category-Specific Pages: Users can explore dedicated pages for Keyboards, Switches, and Keycaps, each displaying a range of products with high-quality images, stock availability, and price details.

• index.html

• Product Details View: Each product has a detailed view page where users can explore specifications, images, and descriptions, providing a comprehensive understanding of the product's features before purchase.

• Shopping Cart with Quantity Management: Users can add products to the cart, where they can increase or decrease the quantity of each item or remove items entirely. The cart displays real-time updates to the total cost.

• Checkout Process with Success Notification: The platform includes a streamlined checkout process, allowing users to finalize purchases with ease. A success message is displayed upon completing a transaction, confirming the order.

• Responsive Design: KeyStore offers a fully responsive design, ensuring an optimal browsing experience on both desktop and mobile devices.

• Dark and Light Mode: Users can switch between dark mode and light mode to suit their preferences, providing a visually comfortable experience for extended browsing.

• Smooth Animations: Leveraging Framer Motion, the site includes subtle animations that enhance user engagement without detracting from the clean design.

Tech Stack :

• Next.js: For server-side rendering and optimized performance.
• TailwindCSS: For efficient, utility-first styling.
• ShadCN UI: For pre-built, accessible, and customizable components.
• Sanity CMS: A headless CMS that manages content and enables product CRUD operations.
• Framer Motion: For smooth animations that enrich the user experience.

Sanity Studio :

Learn sanity studio crash course

Key Achievements :

• Designed and implemented a clean, professional UI that highlights product imagery and makes navigation straightforward.
• Integrated Sanity Studio as a headless CMS, allowing for efficient management and dynamic content updates.
• Developed a functional shopping cart and checkout system, including real-time updates and user notifications.
• Ensured the platform is fully responsive and includes both dark and light mode options for enhanced accessibility.

Thanks for visiting my project! I hope you enjoyed it and found it useful. If you have any questions or suggestions, please don't hesitate to reach out. Happy coding!