This project is a dynamic e-commerce marketplace, initially built as a UI clone during a hackathon, now enhanced with backend functionalities. It leverages modern web technologies to provide a fully interactive shopping experience.
Live URL: muhammedsuhaibhackathon2.vercel.app
- Responsive Design: Fully optimized for desktop and mobile.
- Next.js: Server-side rendering and routing for a seamless experience.
- Tailwind CSS: Modern utility-first CSS framework for styling.
- Shadcn/ui: Component library for prebuilt, customizable components.
- Dynamic Product Display: Real-time product updates using Sanity CMS.
- Cart & Wishlist: Add, remove, and manage items dynamically.
- Buy Now & Share: Seamless purchasing and social sharing options.
- Search Functionality: Advanced product filtering and searching.
- Sanity CMS: Headless CMS used as the backend for managing products.
- Best Practices: Clean code structure and reusable components.
- Next.js
- Tailwind CSS
- Shadcn/ui
- Sanity CMS (Headless CMS for dynamic backend)
- Vercel: Deployed for fast and reliable hosting.
- Other npm Packages
- Clone the repository:
git clone https://github.com/MuhammedSuhaib/Hackathon-2-Q-2-Ui-clone
- Navigate to the project directory:
cd repository-name - Install dependencies:
npm install
- Run the development server:
npm run dev
- Open your browser and visit
http://localhost:3000to view the app.
- Browse and search for products dynamically.
- Add products to the cart or wishlist.
- Share product details with others.
- Buy products using a seamless checkout process.
- Admins can manage product listings via Sanity CMS.
This project helped enhance my skills in:
- Implementing a headless CMS (Sanity) for dynamic content management.
- Creating a fully functional cart and wishlist system.
- Developing advanced search and filtering features.
- Building a seamless and scalable e-commerce experience.
- Integrate a payment gateway for real transactions.
- Implement user authentication and profiles.
- Enhance animations and user interactions.
- Design: Figma (Hackathon provided)
- Development: Muhammed Suhaib
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.
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.