CraftHive operates as a multi-user e-commerce ecosystem designed to connect Filipino artisans directly with customers in their local communities. The application is structured around four primary user types: Buyer, Seller (Artisan), Delivery Personnel, and Company Representative. Each user type is provided with a distinct and highly functional portal.
The system is designed for efficient maintenance through a modular architecture, with each user role utilizing a dedicated codebase organized into separate folders. In addition to following standard web stack principles, the application integrates advanced features such as a Voice-Enabled Assistant and role-specific operational dashboards.
The platform is divided into four major portals, each with specialized features:
- Company and Product Discovery: Enables browsing artisan companies and viewing their product catalogs.
- Voice-Activated Assistant ("Craftra"): Supports voice commands for product search and adding items to the cart.
- Dynamic Product Views: Displays comprehensive product details, including images, descriptions, and available customizations (size, color, shape).
- Streamlined Checkout Process: A multi-step process for providing shipping details and confirming orders.
- Secure Manual Payment: Facilitates direct, secure payments via GCash QR codes.
- Order Tracking & Reviews: Allows viewing order history, tracking the status of current orders, and submitting reviews for delivered products.
- Sales and Performance Dashboard: A dedicated interface presenting critical metrics, including total product inventory, order volume, commission earnings, and detailed revenue breakdowns.
- Product Lifecycle Management (CRUD): A multi-page interface for comprehensive management of product listings (creation, updating, deletion), including images, pricing, variations, stock levels, and associated shipping fees.
- Order Fulfillment: Provides detailed information on incoming orders and the ability to approve or reject payments.
- Analytics and Insights: Visual charts displaying sales performance, top-selling products, and order status distribution.
- Logistics Dashboard: Displays total earnings from shipping fees and counts of delivered versus pending orders.
- Delivery Management: Lists pending and completed deliveries, including necessary order details and shipping addresses.
- Proof of Delivery Upload: A crucial feature enabling personnel to upload a photo as receipt confirmation, which updates the order status across the system.
- Central Business Dashboard: A high-level overview of platform performance, encompassing total registered users, subscription earnings, and commission totals.
- User & Subscription Management: Administration of associated sellers and delivery personnel, including account activation/deactivation and subscription plan management.
- Financial Tracking: Monitoring of earnings over time and recent transactions.
- Company Profile Configuration: Functionality to establish and update the company’s public profile, including policies and the GCash QR code for payments.
| Stack Component | Technologies Used |
|---|---|
| Frontend | HTML, CSS, JavaScript, AJAX |
| Backend | PHP |
| Database | MySQL |
| Libraries | PHPMailer (for password reset emails and 2FA notification) |
To set up and run this project locally, execute the following steps:
-
Prerequisites: Ensure XAMPP is installed and operational.
-
Clone the repository:
git clone https://github.com/EmanAguilera/CraftHive.git
-
File Placement: Place the cloned CraftHive folder within the XAMPP htdocs directory.
-
Start Services: Initiate the Apache and MySQL modules via the XAMPP Control Panel.
-
Database Setup:
- Access phpMyAdmin by clicking the Admin button for MySQL.
- Create a new database named
local. - Select the
localdatabase and navigate to the Import tab. - Select the
local(12).sqlfile located in the project's/databasefolder. - Click Import to populate the necessary tables and data.
-
Project Execution: Open a web browser and navigate to:
http://localhost/CraftHive/The CraftHive homepage will now be accessible for system interaction.
🏢 Company Representative & Admin Portal
Figure 1. This dashboard displays key metrics for company representatives, including their total number, new additions, those with expiring contracts, and total earnings.
Figure 2. This chart displays the earnings in subscriptions for the month of December 2024.
Figure 3. This table lists company representatives with their subscription details and allows for filtering.
Figure 4. This dashboard provides a summary of key metrics for the company, including the number of sellers, orders, affordable plan status, total commission, and earning trends.
Figure 5. Displays the total commission earned for the month of January 2025.
Figure 6. Displays a list of recent orders with options to approve or reject each order.
Figure 7. Page for adding a company profile, including location, payment details (GCash QR), and policy.
Figure 8. The company profile display page, with options to update or erase the information.
Figure 9. User management page to activate or deactivate sellers and delivery persons.
Figure 10. Table displaying a list of all products from sellers managed by the company.
Figure 11. Subscription plan page with QR code for payment.
Figure 12. Page for editing the company profile.
🎨 Seller (Artisan) Portal
Figure 13. The seller dashboard with key metrics: total products, orders, average rating, and total commission.
Figure 14. A chart displaying the seller's commission breakdown for different products.
Figure 15. A breakdown of product revenue, showing the seller's and company's shares.
Figure 16. A list of recent orders with options to approve or reject.
Figure 17. The first step of the multi-page form for adding a new product.
Figure 18. The second step for adding product details, including variations, stock, and shipping.
Figure 19. The final step for adding a product, including assigning a delivery person.
Figure 20. A list of the seller's own products with options to update or erase them.
Figure 21. The first page for editing an existing product's details.
Figure 22. The second page for editing product details.
Figure 23. A pie chart showing the distribution of order statuses (pending, delivered, approved).
Figure 24. A list of pending orders awaiting approval.
Figure 25. A bar chart displaying the top 5 best-selling products.
Figure 26. A list of products with their average ratings and review counts, with an option to view individual reviews.
🚚 Delivery Personnel Portal
Figure 27. The delivery dashboard with key metrics: total shipping fee, delivered orders, pending orders, and total revenue.
Figure 28. A chart displaying the delivery share for different products.
Figure 29. Lists of products with their total revenue and the corresponding delivery share.
Figure 30. A table displaying a list of recent orders assigned for delivery.
Figure 31. A list of pending delivery receipts that need a proof of delivery to be uploaded.
Figure 32. The page for uploading a proof of receipt for a delivered order.
Figure 33. An example of a proof of receipt from a delivery company.
Figure 34. A list of successfully delivered products with their proof of receipt.
👤 Buyer (Customer) Portal & Shopping Experience
Figure 35. The main landing page introducing CraftHive and its products.
Figure 36. The company directory page, allowing users to select an artisan company to browse.
Figure 37. A specific company's product listing page.
Figure 38. The product details pop-up modal with customization options.
Figure 39. The introduction to "Craftra," the voice assistant.
Figure 40. The voice assistant showing search results for "lightning" products.
Figure 41. The voice assistant confirming an order to be added to the cart.
Figure 42. The shopping cart page, showing all contents and totals.
Figure 43. The first step of the checkout process: order summary and shipping details.
Figure 44. The payment page showing the GCash QR code and reference number.
Figure 45. The order success confirmation pop-up.
Figure 46. The "empty cart" notification pop-up.
Figure 47. An example of a populated cart.
Figure 48. An example of the checkout page with an item summary.
Figure 49. The customer's order history page with an option to add a review.
Figure 50. The page for writing and submitting a product review.
🔑 User Authentication (Registration, Login, Password Reset)
Figure 51. The main registration page for buyers.
Figure 52. The "Forgot Password" page for sellers.
Figure 53. The password reset page using a verification code from email.
Figure 54. The login page for sellers.
Figure 55. The registration page for company representatives.
Figure 56. The login page for company representatives.
Figure 57. The One-Time Password (OTP) verification page for company representatives.
Figure 58. The password reset page for company representatives.
Figure 59. The registration page for delivery persons.
Figure 60. The login page for delivery persons.
Figure 61. The OTP verification page for delivery persons.
Figure 62. The "Forgot Password" page for delivery persons.
Figure 63. The password reset page for delivery persons.