MokeSell Interactive Web Application

link to website: https://shunxiangg.github.io/FED_EVA_website/

Test account: [email protected] | Pass: Pa$$w0rd

Overview

EVA is a new online platform that lets users buy and sell both new and second-hand goods. The goal of this web application is to create an engaging shopping experience, allowing users to enjoy shopping while unlocking rewards, competing for the best deals, exploring a user-friendly interface, and taking quizzes to help find products that suit their needs. This platform aims to enhance online shopping with a fun, interactive experience.

```mermaid
flowchart TB
    %% UI Views
    subgraph "UI Views"
        style UIViews fill:#ADD8E6,stroke:#000,stroke-width:1px
        UIViewsIndex["index.html"]:::frontend
        UIViewsBrowse["browse.html"]:::frontend
        UIViewsHome["home.html"]:::frontend
        UIViewsProductInfo["productInformation.html"]:::frontend
        UIViewsLogin["login.html"]:::frontend
        UIViewsSignup["signup.html"]:::frontend
        UIViewsCart["cart.html"]:::frontend
        UIViewsDeals["deals.html"]:::frontend
        UIViewsEvents["events.html"]:::frontend
        UIViewsAds["ads.html"]:::frontend
        UIViewsPayment["payment.html"]:::frontend
        UIViewsProfile["profile.html"]:::frontend
        UIViewsRewards["rewards.html"]:::frontend
        UIViewsSell["sell.html"]:::frontend
        UIViewsShipping["shipping.html"]:::frontend
    end

    %% Presentation Styles
    subgraph "CSS Styles" 
        style CSSStyles fill:#ADD8E6,stroke:#000,stroke-width:1px
        CSSFolder["css_folder/"]:::asset
    end

    %% Static Assets
    subgraph "Static Assets"
        style StaticAssets fill:#FFE4B5,stroke:#000,stroke-width:1px
        ImgFolder["img_folder/"]:::asset
        LottieCSS["lottie.css"]:::asset
        LottieHTML["lottie.html"]:::asset
    end

    %% Front-end Application Logic
    subgraph "UI Logic (js_folder)" 
        style UILogic fill:#ADD8E6,stroke:#000,stroke-width:1px
        JSApp["app.js"]:::frontend
        JSIndex["index.js"]:::frontend
        JSHOME["home.js"]:::frontend
        subgraph "Browse Views"
            ADS["ads.js"]:::frontend
            DEALS["deals.js"]:::frontend
            EVENTS["events.js"]:::frontend
        end
        subgraph "Product & Listing"
            PRODUCTS["products.js"]:::frontend
            PRODUCTINFO["productinformation.js"]:::frontend
            FILTERS["filters.js"]:::frontend
            SLIDESHOW["slideshow.js"]:::frontend
        end
        subgraph "Cart & Checkout"
            CARTLOGIC["cart.js"]:::frontend
        end
        subgraph "User Modules"
            PROFILE["profile.js"]:::frontend
            MYLISTINGS["mylistings.js"]:::frontend
            SELLLOGIC["sell.js"]:::frontend
            PURCHASEHISTORY["purchasehistory.js"]:::frontend
            WELCOME["welcome_msg.js"]:::frontend
        end
        SHARED["data.js"]:::frontend
    end

    %% API Abstraction Layer
    subgraph "API Layer (js_api_folder)"
        style APILayer fill:#90EE90,stroke:#000,stroke-width:1px
        APIJS["api.js"]:::api
        APILogin["login.js"]:::api
        APILogAuth["loginAuthencation.js"]:::api
        APISignup["signup.js"]:::api
        APILottie["lottie.js"]:::api
    end

    %% External Services
    subgraph "External Services"
        style External fill:#FFA500,stroke:#000,stroke-width:1px
        RestDB["RestDB NoSQL Service"]:::external
        PaymentGW["Payment Gateway API"]:::external
        LottieCDN["Lottie CDN"]:::external
        LocalStorage["Local Storage"]:::storage
    end

    %% Connections
    %% UI Views to UI Logic
    UIViewsIndex -->|renders| JSIndex
    UIViewsHome -->|renders| JSHOME
    UIViewsBrowse -->|renders| ADS
    UIViewsBrowse -->|renders| DEALS
    UIViewsBrowse -->|renders| EVENTS
    UIViewsProductInfo -->|renders| PRODUCTINFO
    UIViewsCart -->|renders| CARTLOGIC
    UIViewsDeals -->|renders| DEALS
    UIViewsEvents -->|renders| EVENTS
    UIViewsAds -->|renders| ADS
    UIViewsPayment -->|renders| CARTLOGIC
    UIViewsProfile -->|renders| PROFILE
    UIViewsRewards -->|renders| WELCOME
    UIViewsSell -->|renders| SELLLOGIC
    UIViewsShipping -->|renders| CARTLOGIC
    UIViewsLogin -->|renders| APILogin
    UIViewsSignup -->|renders| APISignup

    %% UI Logic to API Layer
    JSApp -->|"uses API"| APIJS
    JSIndex -->|"uses API"| APIJS
    JSHOME -->|"uses API"| APIJS
    ADS -->|"fetch listings"| APIJS
    DEALS -->|"fetch deals"| APIJS
    EVENTS -->|"fetch events"| APIJS
    PRODUCTS -->|"fetch products"| APIJS
    PRODUCTINFO -->|"fetch product details"| APIJS
    CARTLOGIC -->|"CRUD cart"| APIJS
    PROFILE -->|"fetch profile"| APIJS
    MYLISTINGS -->|"fetch listings"| APIJS
    SELLLOGIC -->|"post listing"| APIJS
    PURCHASEHISTORY -->|"fetch purchases"| APIJS
    WELCOME -->|"fetch user data"| APIJS
    SHARED -->|"shared calls"| APIJS

    %% API Layer to RestDB
    APIJS -->|"GET/POST/PUT/DELETE"| RestDB
    APILogin -->|"authenticate user"| RestDB
    APISignup -->|"create user"| RestDB
    APILogAuth -->|"validate token"| RestDB

    %% UI Logic to External
    CARTLOGIC -->|"process payment"| PaymentGW
    JSApp -->|"store session"| LocalStorage
    JSApp -->|"retrieve session"| LocalStorage
    JSApp -->|"load animations"| LottieCDN

    %% Static Assets usage
    UIViewsIndex -->|"loads CSS"| CSSFolder
    UIViewsBrowse -->|"loads CSS"| CSSFolder
    UIViewsHome -->|"loads CSS"| CSSFolder
    allAssets((" ")) --> ImgFolder
    JSApp -->|"loads images"| ImgFolder
    JSApp -->|"loads Lottie assets"| LottieCSS
    JSApp -->|"loads Lottie HTML"| LottieHTML

    %% Click Events
    click UIViewsIndex "https://github.com/shunxiangg/fed_eva_website/blob/main/index.html"
    click UIViewsBrowse "https://github.com/shunxiangg/fed_eva_website/blob/main/browse.html"
    click UIViewsHome "https://github.com/shunxiangg/fed_eva_website/blob/main/home.html"
    click UIViewsProductInfo "https://github.com/shunxiangg/fed_eva_website/blob/main/productInformation.html"
    click UIViewsLogin "https://github.com/shunxiangg/fed_eva_website/blob/main/login.html"
    click UIViewsSignup "https://github.com/shunxiangg/fed_eva_website/blob/main/signup.html"
    click UIViewsCart "https://github.com/shunxiangg/fed_eva_website/blob/main/cart.html"
    click UIViewsDeals "https://github.com/shunxiangg/fed_eva_website/blob/main/deals.html"
    click UIViewsEvents "https://github.com/shunxiangg/fed_eva_website/blob/main/events.html"
    click UIViewsAds "https://github.com/shunxiangg/fed_eva_website/blob/main/ads.html"
    click UIViewsPayment "https://github.com/shunxiangg/fed_eva_website/blob/main/payment.html"
    click UIViewsProfile "https://github.com/shunxiangg/fed_eva_website/blob/main/profile.html"
    click UIViewsRewards "https://github.com/shunxiangg/fed_eva_website/blob/main/rewards.html"
    click UIViewsSell "https://github.com/shunxiangg/fed_eva_website/blob/main/sell.html"
    click UIViewsShipping "https://github.com/shunxiangg/fed_eva_website/blob/main/shipping.html"
    click CSSFolder "https://github.com/shunxiangg/fed_eva_website/tree/main/css_folder/"
    click ImgFolder "https://github.com/shunxiangg/fed_eva_website/tree/main/img_folder/"
    click LottieCSS "https://github.com/shunxiangg/fed_eva_website/blob/main/lottie.css"
    click LottieHTML "https://github.com/shunxiangg/fed_eva_website/blob/main/lottie.html"
    click JSApp "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/app.js"
    click JSIndex "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/index.js"
    click JSHOME "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/home.js"
    click ADS "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/browse/views/ads.js"
    click DEALS "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/browse/views/deals.js"
    click EVENTS "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/browse/views/events.js"
    click PRODUCTS "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/products.js"
    click PRODUCTINFO "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/productinformation.js"
    click FILTERS "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/filters.js"
    click SLIDESHOW "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/slideshow.js"
    click CARTLOGIC "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/cart.js"
    click PROFILE "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/profile.js"
    click MYLISTINGS "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/mylistings.js"
    click SELLLOGIC "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/sell.js"
    click PURCHASEHISTORY "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/purchasehistory.js"
    click WELCOME "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/welcome_msg.js"
    click SHARED "https://github.com/shunxiangg/fed_eva_website/blob/main/js_folder/data.js"
    click APIJS "https://github.com/shunxiangg/fed_eva_website/blob/main/js_api_folder/api.js"
    click APILogin "https://github.com/shunxiangg/fed_eva_website/blob/main/js_api_folder/login.js"
    click APILogAuth "https://github.com/shunxiangg/fed_eva_website/blob/main/js_api_folder/loginAuthencation.js"
    click APISignup "https://github.com/shunxiangg/fed_eva_website/blob/main/js_api_folder/signup.js"
    click APILottie "https://github.com/shunxiangg/fed_eva_website/blob/main/js_api_folder/lottie.js"

    %% Styles
    classDef frontend fill:#ADD8E6,stroke:#000,stroke-width:1px
    classDef api fill:#90EE90,stroke:#000,stroke-width:1px
    classDef external fill:#FFA500,stroke:#000,stroke-width:1px
    classDef storage fill:#DDA0DD,stroke:#000,stroke-width:1px
    classDef asset fill:#FFE4B5,stroke:#000,stroke-width:1px

Design Concept

As users browse and purchase items, they can unlock rewards, vouchers, and earn badges. The design incorporates a bright, modern aesthetic with easy navigation to enhance the shopping experience.

User Audience

Shoppers: Individuals looking for both new and second-hand items.
Sellers: Users wanting to list their items for sale.

Purpose and Intent

The platform aims to drive user interaction and encourage frequent engagement while offering a reliable marketplace for buying and selling items.

Features

E-commerce Experience

show discount badge upon hover

Discount Offers: Users can earn exclusive discounts by engaging in the platform's interactive features and by competing for deals.

User Account Management

`// login.js document.addEventListener("DOMContentLoaded", function () { const APIKEY = "6787a92c77327a0a035a5437"; const loginForm = document.getElementById("form"); const errorMessage = document.getElementById("error-message");

if (loginForm) {
    loginForm.addEventListener("submit", async function (e) {
        e.preventDefault();

        const email = document.getElementById("email-input").value;
        const password = document.getElementById("password-input").value;


        errorMessage.textContent = '';
        errorMessage.style.color = 'red';

        // loading anmation
        const loadingOverlay = document.createElement('div');
        loadingOverlay.className = 'loading-overlay';
        loadingOverlay.innerHTML = `<div class="loading-content">
            <div class="spinner"></div>
           <p>Logging in...</p>
           </div>`;
        document.body.appendChild(loadingOverlay);

        try {
            const settings = {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    "x-apikey": APIKEY,
                    "Cache-Control": "no-cache"
                }
            };

            const response = await fetch("https://evadatabase-f3b8.restdb.io/rest/accounts", settings);
            const accounts = await response.json();

            // Find matching account
            const account = accounts.find(acc => acc.email === email && acc.password === password);


            if (account) {
                localStorage.setItem('loginId', account._id);
                localStorage.setItem('userEmail', account.email);
                localStorage.setItem('userName', account.name);

                loadingOverlay.querySelector('p').textContent = 'Login successful!';

                //after a short duratuion it will direct to browswe pag
                setTimeout(() => {
                    window.location.href = 'lottie.html';
                }, 1500);
            } else {
                errorMessage.textContent = 'Invalid email or password';
                loadingOverlay.remove();
            }

        } catch (error) {
            console.error('Error:', error);
            errorMessage.textContent = 'Error during login. Please try again.';
            loadingOverlay.remove();
        }
    });
}

});

const styleSheet = document.createElement("style"); styleSheet.textContent = styles; document.head.appendChild(styleSheet); `

Account Creation: Users can create an account to purchase and sell items, earn and redeem rewards and vouchers.
Profile Management: Users can update their profiles and account settings, including changing contact information or passwords.
Order History: Users can view their past purchases, track orders, and check their rewards history.
Purchase Preferences: Users can specify their purchase preferences such as product categories, price range, and item condition, allowing for a more personalized shopping experience.

Listing Management

Create Listings: Sellers can list items by uploading photos, providing descriptions, and selecting categories.
Sell Multiple Items: Sellers can list multiple items on the site.

Search and Browsing

Search Functionality: Users can search for items using keywords and filter by category, price range, or item condition.
Category Browsing: Browse through categories like electronics, clothing, furniture, etc.

Communication and Transactions

Chat Feature: Buyers and sellers can communicate directly through an integrated chat feature to discuss product details and negotiate offers. (Tried to implement but failed)

Feedback and Support

Feedback Submission: Users can submit feedback on their experiences or report issues. (this was a interesting experimentation and exploring tools online)
Review Chatbot: Users on the site can send feedback on our site to the chatbot which will directly send us an email regarding what the feedback is about and the email of the user who made the feedback.

Additional Features

Transaction History: Users can view their past transactions, including purchases, sales, and reviews.
Ads Listings: Sellers can pay to feature their listings or post advertisements on the site, allowing their product or post to be marketed to users who are using the site.
Personalized Recommendations: Based on users’ preferences and past activity, the platform recommends products they might like, making the shopping experience more tailored.
Deals for the month: All the great deals on the platform.

Feedback System

Test email capture
Verify feedback storage
Check conversation history
Test admin notification system

Customer Support Flow

graph TD
    A[User Initiates Chat] --> B[AI Processes Query]
    B --> C{Query Type}
    C -->|Navigation| D[Provide Directions]
    C -->|Product| E[Show Recommendations]
    C -->|Support| F[Offer Assistance]
    C -->|Feedback| G[Capture & Store]
    G --> H[Send to Admin Email]

Technologies Used

HTML5: Used for the overall structure and layout of the website.
CSS3: For styling the website with modern, responsive design elements.
JavaScript: To create interactive elements, including the gamified shopping experience, chat functionality, and real-time updates for the cart.
APIs: Various third-party APIs (e.g., for payment gateway integration, user authentication) are used to enhance functionality.
Lottie Animation: Integrated to provide dynamic, visually appealing animations that enhance the interactive experience.
Database Integration: The platform integrates with a database for managing user accounts, product listings, and transaction history.

Installation

To run this project locally, follow these steps:

Clone the repository:

git clone https://github.com/yourusername/MokeSell.git

Navigate to the project directory:

cd MokeSell

Open index.html in your preferred web browser to view the site.

Testing

User Testing

Perform functional testing of the shopping cart, search feature, and user login system.
Conduct usability testing to ensure that the shopping experience is smooth and the gamification elements are intuitive.
Test the listing creation process and the process of placing offers and following sellers.

Bug Fixes

Fix issues related to navigation inconsistencies (e.g., difference between index.html and browse.html nav menus).
Resolve problems with the real-time chat feature, ensuring messages are properly sent and received.

Credits and References

Images and other media used in this project are sourced from various online archives and free resources.
Inspiration for the design and gamification features came from popular eCommerce platforms and gaming apps. (e.g., Shopee [https://shopee.sg/])
Design [https://www.youtube.com/watch?v=OXGznpKZ_sA]
YT login/signup [https://www.youtube.com/@techmakersnocode] [https://www.youtube.com/@coding2go]
IG [https://www.instagram.com/web_development_legend/] [https://www.instagram.com/the_coding_wizard/]
Icons [https://fontawesome.com/start]
Connect Login & Sign up Form with DATABASE[https://www.youtube.com/watch?v=TRHtOixzrH8] [https://www.youtube.com/watch?v=EQii31gG51Q] [https://restdb.io/docs/javascript-api#restdb] [https://www.sitepoint.com/how-to-get-started-with-restdb-io-and-create-a-simple-cms/]
ChatGPT [https://chatgpt.com/]
Claude AI [https://claude.ai/]
Jotform [https://www.jotform.com/agent/build/0194e55c77377697a8d98ac9f4e1fad8b333/train]

Acknowledgements

Connect Login & Sign up Form with DATABASE[@LX]
The concepts of PHP and how it interacts with SQL to retrieve data[@LX]

WARNING TAKE NOTE

website content will take some time to load as it it GETing the data from the database and might be slow!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

MokeSell Interactive Web Application

Overview

Table of Contents

Database Usage (RestDB)

System Architecture Overview

Design Concept

User Audience

Purpose and Intent

Features

E-commerce Experience

User Account Management

Listing Management

Search and Browsing

Communication and Transactions

Feedback and Support

Additional Features

Feedback System

Customer Support Flow

Technologies Used

Installation

Testing

User Testing

Bug Fixes

Credits and References

Acknowledgements

WARNING TAKE NOTE

About

Uh oh!

Releases 1

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 148 Commits
css_folder		css_folder
img_folder		img_folder
js_api_folder		js_api_folder
js_folder		js_folder
README.md		README.md
ads.html		ads.html
browse.html		browse.html
cart.html		cart.html
deals.html		deals.html
events.html		events.html
home.html		home.html
image-chat.png		image-chat.png
image-chatbot.png		image-chatbot.png
image-deals.png		image-deals.png
image-discount.png		image-discount.png
image-fetching.png		image-fetching.png
image-jotform.png		image-jotform.png
image.png		image.png
index.html		index.html
login.html		login.html
lottie.css		lottie.css
lottie.html		lottie.html
payment.html		payment.html
productInformation.html		productInformation.html
profile.html		profile.html
rewards.html		rewards.html
sell.html		sell.html
shipping.html		shipping.html
signup.html		signup.html

C0hErYl/FED_EVA_website

Folders and files

Latest commit

History

Repository files navigation

MokeSell Interactive Web Application

Overview

Table of Contents

Database Usage (RestDB)

System Architecture Overview

Design Concept

User Audience

Purpose and Intent

Features

E-commerce Experience

User Account Management

Listing Management

Search and Browsing

Communication and Transactions

Feedback and Support

Additional Features

Feedback System

Customer Support Flow

Technologies Used

Installation

Testing

User Testing

Bug Fixes

Credits and References

Acknowledgements

WARNING TAKE NOTE

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages