Urban Bazaar

Posted on by Steven McDermott

Team Name

The eCommerce Squad

Timeline

Summer 2024 – Fall 2024

Students

  • Damber Bokati – Computer Science
  • Aarohi Bansal – Computer Engineering
  • Sandip Sitaula – Software Engineering
  • Surabhi Sharma – Software Engineering
  • Krishu Panta – Software Engineering

Abstract

Urban Bazaar is an eCommerce platform designed to enhance the online shopping experience for
customers and admin. It provides customers a one-stop shop experience for browsing, shopping,
and purchasing for all gender/age based categories. Client-side interface features a navigation
bar, product listings, product descriptions, cart tracking, payment, and order confirmation.
Admin-side interface is a separately built web application providing system admins an insight
into the business’ performance. It features an analytics dashboard and ability to dynamically
update categories/products that get extracted from the client-side for customer display. The
project aims to offer simplified shopping for customers and help facilitate business overview for
admins.

Background

In today’s digital age, businesses are increasingly shifting toward e-commerce to meet the
evolving needs of consumers. Consumers seek the convenience of shopping from anywhere, at
any time, with access to a wider range of products and services. However, many businesses lack
a robust e-commerce platform that can efficiently handle their operations and provide a seamless
user experience. Our project aims to address this critical need by developing a comprehensive
e-commerce web application. By providing businesses with a powerful, user-friendly platform,
we enable them to reach a broader audience, streamline their operations, and increase their
profitability. Solving this problem will empower businesses to adapt to the digital economy,
enhance customer satisfaction, and foster long-term growth and sustainability.

Project Requirements

  1. Client-Side Features:
    ● Navigation bar for category-based browsing.
    ● Product listings with filters (size, color, price range).
    ● Detailed product descriptions with images, reviews, and availability.
    ● Cart management with dynamic quantity adjustment.
    ● Secure payment processing and order confirmation.
  2. Admin-Side Features:
    ● Analytics dashboard for tracking sales, revenue, and customer trends.
    ● Tools to add, update, or remove categories and products dynamically.
    ● Real-time data syncing with the client-side platform.
    ● Role-based authentication for admin accounts.
  3. Database:
    ● Centralized MongoDB database to store user data, product catalog, and order
    history.
    ● Data indexing for faster search and filtering.
    ● Integration with the admin interface to dynamically update products/categories.
  4. Payment Integration:
    ● Use of Stripe API for secure transactions.
    ● Support for multiple payment methods (credit/debit cards, wallets).
    ● Option for test mode to simulate transactions during development.
  5. Security:
    ● Implementation of authentication and role-based access using Clerk.
    ● Encryption of sensitive user data, including passwords and payment details.
    ● Regular sanitization of input fields to prevent SQL injection or XSS attacks.
  6. Search and Filtering:
    ● Full-text search functionality across product titles and descriptions.
    ● Advanced filtering options (e.g., by category, size, and color).
    ● Auto-suggestion feature for search queries.
  7. Responsive Design:
    ● Fully optimized for desktop, tablet, and mobile devices.
    ● Seamless user experience across all screen sizes.
  8. User Features:
    ● Wishlist functionality to add/remove favorites.
    ● Order history and tracking.
    ● Account management with profile updates and saved addresses.
  9. Scalability:
    ● Use of Next.js for server-side rendering to handle high traffic.
    ● Modular architecture for adding new features with minimal disruption.
    ● Integration of caching mechanisms to improve performance.
  10. Testing and Debugging:
    ● Comprehensive unit testing for individual components.
    ● End-to-end testing for critical user flows like checkout and product browsing.
    ● Logging and error tracking using tools like Sentry.

Design Constraints

  1. Cost: Student budget restricts resources to affordable or free options for databases, basic
    payment solutions, and website mock-ups. To retain project rights, college grants were
    avoided, limiting domain acquisition and instead relying on localhost for displaying the
    working site.
  2. Functionality: ensuring all team members have access to the latest code, coordinating
    updates and communication to maintain file synchronization and avoid cPonflicts.
  3. Lack of Experience: limited experience with React.js, can impact development
    efficiency and the ability to implement advanced features, requiring additional learning
    time and guidance for team members unfamiliar with the framework.
  4. Schedule: delays can arise when individual team members face personal scheduling
    conflicts, impacting bi-weekly progress. This can lead to setbacks as tasks may not be
    completed on time, affecting coordination and pushing project milestones further.
    Adjustments in planning and task distribution may be necessary to compensate for these
    delays and keep the project on track.
  5. Usability: The payment process should be straightforward and quick, interface should
    be easy to navigate, and there should be efficiency in administrative tasks.

Engineering Standards

  1. Authentication & Encryption/Security Standards:
    ● Use of HTTPS ensures secure, encrypted communication.
    ● Adherence to OWASP guidelines protects the application from common security
    vulnerabilities.
  2. Building Codes (Accessibility Standards – ADA Compliance):
    ● Implementation of WCAG 2.1 guidelines ensures the platform is accessible to
    users with disabilities, aligning with ADA requirements.
  3. Common Engineering Standards (Programming/Web Dev Standards):
    ● Use of ESLint, Prettier, and TypeScript reflects adherence to common
    programming best practices and coding standards.
  4. Programming/Web Dev Standards:
    ● Following MVC architecture and modular design principles improves scalability
    and maintainability, adhering to software engineering standards.
  5. Data Protection Standards (Security and Compliance):
    ● Compliance with GDPR principles ensures ethical handling of user data.
    ● Regular database backups protect data integrity, aligning with data security
    requirements.

System Overview

Urban Bazaar is a modern e-commerce platform that provides a seamless shopping experience
for customers and comprehensive admin tools for business management. The client-side
application enables users to browse products, manage their wishlist, and securely complete
purchases. The admin-side application empowers business owners with insights and dynamic
control over product inventory and categories. Together, the platform bridges the gap between
customer convenience and business efficiency.

Results/Demo

Future Work

  • Integration with Google Analytics to track user interactions and gain insights into
    user behavior which aims to help in customer retention.
  • Integration of a live agent feature to provide real-time customer support.

Project Files

Project Charter
System Requirements Specification
Architectural Design Specification
Detailed Design Specification
Poster

References

  1. Next.js
    Vercel. (2024). Next.js Documentation. Retrieved from https://nextjs.org/docs
  2. TypeScript
    Microsoft. (2024). TypeScript Documentation. Retrieved from
    https://www.typescriptlang.org/docs/
  3. Clerk
    Clerk. (2024). Clerk Documentation. Retrieved from https://clerk.dev/docs
  4. Stripe
    Stripe. (2024). Stripe API Documentation. Retrieved from
    https://stripe.com/docs/api
  5. MongoDB
    MongoDB Inc. (2024). MongoDB Documentation. Retrieved from
    https://www.mongodb.com/docs/

Steven McDermott

More Posts