• HWIKI

    Build. Break. Explain.

    POUDRA-POP: E-commerce Platform

    By h0ag's avatar h0ag | On | 4 views

    • Web Application Design and Development Project
    • Author: h0ag
    • Context: Academic Project - BTS SIO (SISR Specialization) - Efrei / Paris Panthéon-Assas University (2025-2027)
    • Source code: github.com/h0ag/poudra-pop
    • Live deployment: poudra-pop.msallon.org > Note: This is a modest, entry-level project built to validate core concepts.

    1. Project Context and Objectives

    Poudra-Pop is an e-commerce platform developed from scratch as part of an academic project in application design and development.

    This project was born with a major constraint: initially planned to be carried out in a group of two or three students, I was ultimately required to design and develop it entirely on my own. The challenge was to apply the full web application development lifecycle (architecture, database, backend, frontend, API integration) under severe time pressure (2 to 3 months).

    The main goal was to provide an immersive and exclusive experience. The site requires authentication to access certain areas, imposing a restricted user journey, from browsing the catalog to the simulated virtual payment.

    2. Visual Identity, Art Direction and "Anti-UI" (UX/UI)

    One of the core aspects of the project lies in its art direction. The interface was deliberately designed to be childish, colorful, highly welcoming, and playful, featuring a seemingly harmless bear mascot.

    However, this aesthetic sharply contrasts with the subtext of the offered product ("Colombian energy candies"). Through product descriptions, names, and textual elements, the site subtly suggests a double meaning, creating an original and immersive user experience far removed from generic online stores.

    The "Anti-UI" Concept: To push this unsettling atmosphere further, I implemented a deliberate "Anti-UI" mechanic. Every few seconds, disturbing and bizarre pop-up advertisements appear on the screen to interrupt the user. This intentional design choice mimics a "deep-web" aesthetic. Beyond the visual shock value, it creates a sense of discomfort and urgency, pushing the user to navigate quickly and accelerating the purchasing decision to escape the pop-ups.

    Poudra-pop's home page

    3. Architecture and Technological Choices

    To meet deadlines and ensure the project's viability as a solo developer, the architecture relies on a classic MVC (Model-View-Controller) pattern, with pragmatic technological choices favoring open-source and custom development.

    • Backend: PHP with the CodeIgniter 4 framework.
    • Frontend (Design): The entire front-end was developed in custom CSS, without using any framework, allowing for absolute control over the design.
    • Frontend (Logic): JavaScript, utilizing jQuery and AJAX to handle asynchronous server exchanges. Integration of the Twig rendering engine and HTML structuring.
    • Database: MariaDB. This choice was specifically made for the production environment, as MariaDB offers a highly performant and completely free alternative to MySQL's commercial model.
    • Asset Automation: Python scripts for batch processing and optimizing media assets.

    4. Data Modeling

    Special attention was given to the database design, starting with the creation of MCD (Conceptual Data Model) and MLD (Logical Data Model) diagrams. The structure implements a classic and robust relational architecture for an e-commerce platform:

    1. Users: Client management (relying on the google_id and email, without local password storage).
    2. Products: Product catalog, with price, stock, and image management.
    3. Categories: Product classification.
    4. Orders: Order headers (shipping address, status, total).
    5. Order_items: Order lines, locking in the price and quantity at the exact moment of purchase.

    Poudra-pop's relational database schema

    5. Core Features and User Journey

    The application is divided into two distinct areas and offers several key features.

    The Public Area

    • Dynamic Catalog: Product display dynamically generated by the backend.
    • Dynamic Image Routing: To optimize bandwidth, images are not only served in WebP format, but the backend also features a dynamic resizing route. By appending a size parameter to the URL request, the server returns the image scaled to the exact required dimensions, preventing the browser from loading a large file for a small thumbnail.
    • Interactive Cart: Persistent cart system where additions and updates are managed asynchronously via AJAX requests, without reloading the page.
    • Legal Information: Static pages served by the Twig engine.

    The VIP Area (Secured)

    • Google OAuth Authentication: A single click is enough to log in via a Google account. This choice bypasses heavy local password management while demonstrating the secure integration of a third-party SSO API.
    • Checkout and Simulated Payment: Cart validation and order generation in the database. The payment system is deliberately simulated to focus exclusively on application logic and user flows.
    • Dashboard: User-side order management interface to view purchase history.

    Poudra-pop's usecase diagram

    6. Technical Challenges and Development Reality

    • Automated Image Processing Pipeline: The catalog consists of 10 products, each requiring two visuals: a pixel-art version matching the "Poudra-Pop" aesthetic, and a photorealistic version (20 images total). These were initially generated in high resolution using Gemini. To optimize web performance, I wrote a Python script that automated a three-step pipeline for all assets:
    1. Resizing to 400x400 pixels.
    2. Converting files to the highly compressed WebP format.
    3. Automatically removing the background specifically for the pixel-art images.
    • Custom Front-End Integration: Designing a responsive, visually rich, and intentionally disruptive interface using only custom CSS requires strict DOM structuring.
    • Time Pressure and "Vibe Coding": Assuming the role of a full team in record time dictated the workflow. Some sections of the code were written in a rush ("vibe coded"), prioritizing immediate functionality over architectural perfection. This project reflects a real-world scenario: knowing how to deliver a functional product under strict constraints.
    • Asynchronous Interactions: Ensuring real-time synchronization between the database (server-side cart) and the user interface via AJAX, while handling potential errors.

    7. Consolidated Skills

    This project allowed me to practice and significantly consolidate my skills in the following areas:

    • Relational database design (MCD, MLD).
    • Structured backend development using MVC architecture (CodeIgniter 4).
    • Secure session management and third-party authentication integration (OAuth).
    • Media optimization and backend dynamic routing.
    • Asynchronous client/server interactions (AJAX).
    • Complete, custom front-end integration without relying on CSS frameworks.

    Made by h0ag