ShapeHive is a comprehensive online marketplace for 3D models, designed for graphic designers, 3D artists, game developers, architects, and hobbyists. The platform allows creators to upload and sell their 3D models while enabling buyers to discover, preview, and purchase high-quality digital assets.
- About
- Features
- Pages Overview
- Tech Stack
- Project Structure
- Firebase Services
- Payment Integration
- Future Enhancements
ShapeHive is a web-based 3D models marketplace that bridges the gap between 3D content creators and consumers. Whether you're looking for character models, architectural elements, furniture, vehicles, or any other 3D asset, ShapeHive provides a centralized platform to buy and sell digital 3D content.
The platform is built with modern web technologies and follows best practices for performance, security, and user experience.
- Email/Password Registration & Login - Traditional authentication using Firebase Auth
- Google OAuth - Quick sign-in with Google accounts
- Email Verification - Users must verify their email before accessing the platform
- Password Reset - Forgotten password recovery via email
- Upload Models - Creators can upload 3D model files with metadata (title, description, price, category, software compatibility)
- Download Models - Purchasers can download models directly from the platform
- Preview - Interactive 3D model preview using Three.js
- Categories - Organized model listings (Animals, Architecture, Art, Characters, Electronics, Fashion, Furniture, Jewelry, Mechanical, Plants, Vehicles, Weapons, Sports)
- Shopping Cart - Add multiple models to cart before checkout
- Checkout - Secure payment processing with Stripe
- My Library - Access purchased models anytime
- Dashboard - Personal user dashboard showing uploaded models and statistics
- Public Profiles - View other users' public profiles and their model listings
- Settings - Account settings, profile management
- Search - Find models by keywords
- Filtering - Filter by categories, price, software compatibility
- Sorting - Sort by newest, price, popularity
- Cookies Banner - GDPR-compliant cookie consent
- Terms & Conditions - Legal documentation including refund policy
- Cookie Policy - Detailed cookie usage explanation
- Contact - Contact form for inquiries
- Loading Screens - Smooth loading states with animations
| Page | Route | Description |
|---|---|---|
| Home | / |
Landing page with hero section and featured models |
| Login | /login |
User authentication page |
| SignUp | /signup |
New user registration |
| Forgot Password | /forgot-password |
Password recovery |
| Dashboard | /dashboard |
User's personal dashboard |
| Heroes | /heroes |
Featured creators spotlight |
| Other Dashboard | /user/:username |
Public user profile |
| Settings | /settings |
Account settings |
| Password Reset | /password-reset |
Password reset page |
| Upload Model | /upload |
Upload new 3D model |
| Model Details | /model/:modelId |
Individual model view with 3D preview |
| Search | /search |
Search results page |
| Models Page | /3d-models |
Browse all models |
| Community | /members |
Community members list |
| Cookie Policy | /cookie-policy |
Cookie usage documentation |
| Terms & Conditions | /terms&conditions |
Terms, conditions & refund policy |
| Contact | /contact |
Contact form |
| My Cart | /my-cart |
Shopping cart |
| My Library | /my-library |
Purchased models library |
- React 19 - Modern React framework with hooks
- React Router v7 - Client-side routing
- Vite - Next-generation build tool
- @react-three/fiber - React renderer for Three.js
- @react-three/drei - Useful helpers for react-three-fiber
- CSS Modules / Inline Styles - Component-level styling
- Node.js - JavaScript runtime
- Express - Web application framework
- Firebase - Backend-as-a-Service platform
- Firebase Firestore - NoSQL cloud database
- Firebase Storage - Cloud storage for 3D model files
- Firebase Authentication - User authentication service
- Stripe - Payment processing platform
- @stripe/react-stripe-js - Stripe React components
- @stripe/stripe-js - Stripe.js library
- emailjs/browser - Email sending service
- jszip - ZIP file creation
- lucide-react - Icon library
- react-loading-indicators - Loading animations
3D-Models-Marketplace/
├── backend/ # Backend server code
│ ├── auth.js # Firebase authentication utilities
│ ├── cookies.js # Cookie consent & tracking
│ ├── firebase.js # Firebase configuration
│ ├── models.js # Data models
│ ├── server.js # Express server
│ ├── users.js # User-related functions
│ └── contexts/
│ └── authContext/ # Authentication context
├── frontend/
│ ├── assets/ # Static assets
│ ├── css/ # Global CSS files
│ │ ├── App.css
│ │ ├── Contact.css
│ │ ├── Dashboard.css
│ │ ├── Heroes.css
│ │ ├── Home.css
│ │ ├── ModelDetails.css
│ │ ├── MyCart.css
│ │ ├── OtherDashboard.css
│ │ ├── Settings.css
│ │ └── UploadModel.css
│ └── src/
│ ├── pages/ # Page components
│ │ ├── Home.jsx
│ │ ├── LogIn.jsx
│ │ ├── SignUp.jsx
│ │ ├── Dashboard.jsx
│ │ ├── UploadModel.jsx
│ │ ├── ModelDetails.jsx
│ │ ├── MyCart.jsx
│ │ ├── MyLibrary.jsx
│ │ └── ... (other pages)
│ ├── UI+UX/ # Reusable UI components
│ │ ├── Header.jsx
│ │ ├── Footer.jsx
│ │ ├── SideMenu.jsx
│ │ ├── CookiesBanner.jsx
│ │ └── LoadingScreen.jsx
│ └── validations/ # Form validation logic
├── public/ # Public assets
│ ├── background.jpg
│ ├── background1.jpg
│ ├── background2.jpg
│ ├── WebsiteLogo.png
│ └── ... (icons and images)
├── functions/ # Firebase Cloud Functions
├── App.jsx # Main app component
├── main.jsx # Entry point
├── index.html # HTML template
├── package.json # Dependencies
├── vite.config.js # Vite configuration
└── firebase.json # Firebase configuration
- Email/Password sign-up and login
- Google OAuth integration
- Email verification flow
- Password reset functionality
- Session management via Firebase Auth
Collections:
users- User profiles and metadatamodels- 3D model listings with title, description, price, creator infopurchases- Purchase historycomments- Model comments/reviews
- 3D model file uploads (.zip, .fbx, .obj ...)
- Model preview images
- User avatars
ShapeHive uses Stripe for secure payment processing:
- Users add items to cart
- Checkout process through Stripe Elements
- Payment confirmation triggers:
- Purchase record creation in Firestore
- User gets access to purchased models in My Library
- Credit/Debit Cards (Visa, Mastercard, American Express)
- Users can become sellers
This project is developed for commercial and demonstration purposes, serving as a comprehensive showcase of full-stack capabilities, including secure payment integration and 3D asset management.
The software is released under the GNU General Public License v2.0 (GPLv2).
Key Terms:
Copyleft: If you modify and distribute this software, you must make the source code available under the same GPL v2.0 license.
Commercial Use: The licensed material and derivatives may be used for commercial purposes.
Distribution: You are free to copy and distribute verbatim copies of this license document and the software.
Demonstration Focus: While the project is a functional marketplace, it is primarily intended to demonstrate architectural best practices (React, Firebase, Stripe).
No Warranty: The software is provided "as is". The author provides no warranty and is not liable for any issues arising from its use.
