The primary objective of this hackathon project is to build a Q-Commerce (Quick Commerce) website that offers rapid delivery of food and chef services. The website is designed to provide users with a seamless experience by offering curated categories, fast navigation, and an efficient ordering process.
- Defined the purpose of the website to deliver value by catering to immediate delivery needs.
- Highlighted the user-centric approach for faster delivery and easy access to a variety of food options.
- Provides users with a comprehensive food menu and chef services.
- Designed for scalability and quick adaptability to user demands.
- Implements a modern UI/UX to enhance the user experience.
To establish the technical foundation for the Q-Commerce platform, including the selection of tools, technologies, and architectural setup.
- Designed a robust architecture combining Sanity CMS as the backend for content management and Next.js for the frontend.
- Chose GROQ queries to fetch data efficiently from Sanity CMS.
- Sanity CMS: For managing and structuring content like food items and chef details.
- Next.js: To build the frontend with a focus on speed, SEO, and developer experience.
- GROQ Queries: For seamless data retrieval from Sanity.
- Defined the necessary schemas for food and chef data.
- Outlined the API integration strategy to import and display data dynamically.
To integrate APIs and migrate data into Sanity CMS, ensuring a functional marketplace backend while displaying data on the frontend.
- Used a custom migration script to fetch data from APIs and import it into Sanity CMS.
- Uploaded food and chef images dynamically to Sanity assets.
- Validated all data to ensure compatibility with Sanity schemas.
- Integrated APIs:
- Fetched data using Axios and displayed it dynamically on the frontend using GROQ queries.
- Successfully displayed imported data on the Next.js frontend using GROQ queries.
- Ensured proper rendering of food items and chef details with images, descriptions, and categories.
To implement advanced features that improve user experience and interactivity on the Q-Commerce platform.
- Implemented dynamic routing for pages such as product details.
- Users can now view individual product pages by clicking on items from the menu or shop page. Each product page is dynamically rendered based on the unique slug.
- Added a button to each product for adding it to the cart.
- Items are stored in the cart, and their quantity is adjustable.
- Total price updates dynamically as items are added or quantities are modified.
- Built a dedicated checkout page to review cart contents and proceed to payment.
- Added basic form validation for user information.
- Integrated a search bar for finding products.
- Search results update dynamically as users type.
- Added a filter to sort products by price range.
- Updates the product list in real time based on the selected range.
- Ensured all pages and components are fully responsive across devices.
- Enhanced the visual elements to provide a more intuitive user experience.
- Used React Context API for global state management to handle cart and product data efficiently.
Over the past four days, we have laid a solid foundation for the Q-Commerce website, planned the technical architecture, and implemented dynamic API integrations and advanced features. This project showcases:
- A seamless backend integration using Sanity CMS.
- Efficient migration and management of data through custom scripts.
- Dynamic rendering of content on the frontend with GROQ queries.
- Advanced user-focused functionalities like search, filtering, and dynamic cart management.
The project is now well-positioned for further enhancements, including user authentication, order management, and real-time updates to improve user experience.
In Day 06, the focus was on preparing the marketplace application for deployment. This involved setting up a staging environment, configuring hosting platforms, ensuring the application is production-ready, and following best practices for handling environments.
- Easy Integration with Next.js.
- Automatic Deployment from GitHub repository.
- Scalability for handling varying traffic.
- Serverless Functions for backend logic.
- Sanity CMS: Ensured content fetching works correctly.
- Third-party APIs: Verified secure API calls and proper handling of sensitive data.
- Stored API keys and credentials securely using
.envfiles.
- Set up environment variables in the Vercel platform for secure deployment.
- Pushed latest code to GitHub and linked a staging branch in Vercel.
- Vercel triggered automatic deployment.
- Verified build success through Vercel logs and checked the staging URL.
- Tested all pages, features, and backend integrations for correctness.
- Reviewed build logs and ensured environment variables were correctly configured.
- Used Cypress to test workflows and Postman to validate API responses.
- Analyzed load times and performance with Lighthouse and GTmetrix.
- Tested the site across different screen sizes and ensured proper error handling.
- Recorded all test outcomes, performance benchmarks, and unresolved issues.
Test cases were documented in a CSV file with the following details:
| Test Case ID | Description | Steps | Expected Result | Actual Result | Status | Remarks |
|---|---|---|---|---|---|---|
| TC001 | Validate product listing | Open product page > Verify products | Products displayed | Products displayed | Passed | No issues found |
| TC002 | Test API error handling | Disconnect API > Refresh page | Show fallback message | Fallback message shown | Passed | Handled gracefully |
| TC003 | Check cart functionality | Add item to cart > Verify cart | Cart updates correctly | Cart updates correctly | Passed | Works as expected |
| TC004 | Test form validation | Submit form with empty fields | Display error message | Error message displayed | Failed | Missing validation |
| TC005 | Verify HTTPS connection | Open site > Check HTTPS status | HTTPS enabled | HTTPS enabled | Passed | Secure connection |
On Day 06, the application was successfully deployed to a staging environment using Vercel. The application underwent functional, performance, and security testing, with all outcomes documented. The staging setup is now ready for validation before moving to the production environment.