NextShop Marketplace is a fully functional and responsive e-commerce website designed to provide a seamless online shopping experience. This project was developed during a 7-day hackathon and serves as a complete marketplace solution, featuring advanced functionalities like search, product management, and a dynamic checkout system. Built with Next.js and Sanity, the project showcases optimized performance and scalability.
This hackathon was my first experience working under a tight deadline to solve real-world problems. It taught me how to overcome technical challenges, debug complex issues, and implement efficient solutions.
- Responsive Design: Fully optimized for mobile, tablet, and desktop devices.
- Data Fetching: Uses Sanity CMS to fetch and manage products, categories, and user data.
- Page Transitions: I also add a seamless page transition effect to enhance the user experience.
- Search Bar: Dynamic search bar with suggestions for faster navigation.
- Search Functionality: I also add keyboard navigation support to the search bar which is good for user experience.
- Product Management: Users can add, edit, and delete products with ease.
- Product Details Page: Comprehensive details for each product, including images and descriptions.
- All Products Page: Displays the complete product catalog with sorting and filtering options.
- New Arrivals Section: Highlights the latest additions to the store.
- Add-to-Cart Functionality: Users can add, update, and remove items from their cart.
- Checkout Page: Collects user data and securely sends it to Sanity CMS.
- Optimized Code: Efficient and clean codebase designed for scalability.
- Storing Cart Data: Storing cart data on local Storage in a great user experience.
- Customer and Order Data: When the user finishes the checkout process the customer data and order data came to Sanity CMS.
- Performance: 99/100
- Accessibility: 96/100
- SEO: 100/100
- Best Practices: 100/100
- Implemented lazy loading for images and components.
- Optimized API requests to reduce response times.
- Used static generation and server-side rendering (SSR) for better performance.
- Product Management: Easy addition, deletion, and modification of products.
- Dynamic Content: Fetch real-time updates directly from Sanity.
- Pages Directory: Contains the main routes and components of the application.
- Components Directory: Contains reusable components used throughout the application.
- Utils Directory: Contains utility functions and helpers.
- Styles Directory: Contains global styles and custom Tailwind CSS classes.
- Context Directory: Manages global application state using Redux.
- Sanity Directory: Contains Sanity API client and GROQ queries.
- bun.config.js: Configuration file for Bun.
- Sanity Data Fetching: Initially faced issues fetching data from Sanity and rendering it dynamically. Solved it by implementing efficient GROQ queries and leveraging Next.js dynamic routes.
- Debugging Frontend Issues: Resolved issues related to state updates on the Product Details page.
- Performance Optimization: Improved load times by optimizing API requests and implementing lazy loading for images.
- Next.js: Framework for building the frontend.
- Sanity: Headless CMS for backend data management.
- Redux: State management for global application state.
- Tailwind CSS: Utility-first CSS framework for styling.
- Bun: Fast JavaScript runtime and package manager.
- Searching for Products: Users can search for products by typing keywords in the search bar.
- Adding to Cart: Products can be added to the cart with dynamic quantity adjustment.
- Checkout: Users fill out a form and submit data, which is securely stored in Sanity.
- Adding smooth page transitions and animations.
- Integrating a secure payment gateway (e.g., Stripe or PayPal).
- Advanced product filters (e.g., by category, price range, ratings).
- Live notifications for cart updates and new arrivals.
-
Clone the Repository:
git clone <your-repository-url>
-
Navigate to the Project Directory:
cd <your-project-folder>
-
Install Dependencies:
bun install
-
Run the Development Server:
bun dev
-
Configure Sanity CMS:
- Initialize a Sanity project:
sanity init
- Update the Sanity API keys and dataset settings in the
.envfile.
- Initialize a Sanity project:
-
Open the application in your browser at:
http://localhost:3000
- GET /api/products: Fetch all products from Sanity.
- POST /api/checkout: Submit checkout data to Sanity.
Participating in this hackathon was an incredible learning experience. I discovered how to:
- Handle real-world problems under tight deadlines.
- Debug complex issues and implement optimized solutions.
- Build scalable and maintainable codebases.
Contributions are welcome! To contribute:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Commit your changes with clear messages.
- Create a pull request and describe your changes.
- No payment gateway integration yet.
- Limited product filtering options.
This project is licensed under the MIT License.
The project is created by Huzaifa Mukhtar and github it is Huzaifa4412 GIAIC roll number is : 499351