https://github.com/jipconan/jippyhome-3d-e-commerce
JippyHome is a 3D furniture e-commerce site where users can explore and preview furniture products in detail before buying.
https://github.com/jipconan/jippyhome-3d-e-commerce
api chakra-ui chakraui cloudinary cloudinary-api e-commerce-website mongodb mongodb-atlas mongoose react react-router react-three-fiber reactjs tailwindcss typescript vite
Last synced: 3 months ago
JSON representation
JippyHome is a 3D furniture e-commerce site where users can explore and preview furniture products in detail before buying.
- Host: GitHub
- URL: https://github.com/jipconan/jippyhome-3d-e-commerce
- Owner: jipconan
- Created: 2024-08-14T11:20:55.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-25T04:32:33.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T04:48:47.392Z (over 1 year ago)
- Topics: api, chakra-ui, chakraui, cloudinary, cloudinary-api, e-commerce-website, mongodb, mongodb-atlas, mongoose, react, react-router, react-three-fiber, reactjs, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://jippyhome-3d-e-commerce.onrender.com/
- Size: 76.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JippyHome 3D E-Commerce
## Summary
This e-commerce website allows users to browse and purchase furniture with excellent catalogs. The app provides a seamless shopping experience with a responsive 3D model previewer to allow shoppers to see the furniture in a 3 dimensions.
## Key Features
- **3D model previewer:**
Preview the model in 3D with different lighting modes.
- **Product Catalog:**
Display a wide range of products with detailed descriptions, images, and pricing.
- **Shopping Cart:**
Offer a smooth checkout process with various payment and shipping options.
- **Checkout Process:**
Provide a streamlined checkout process with options for payment and shipping.
- **Admin Dashboard:**
Provide an admin dashboard for managing products, orders, inventory, and user accounts.
- **Responsive Design:**
Ensure the website adapts to different devices and screen sizes for an optimal user experience.
- **Performance Optimization:**
Enhance website performance for quick load times and easy navigation.
## Deployed URL
You can access the deployed URL at [JippyHome 3D E-Commerce](https://jippyhome-3d-e-commerce.onrender.com/).
## Trello Board
You can access the trello board URL at [JippyHomeTrello Board](https://trello.com/b/W6SJDniH/project-4-jippyhome).
In my board, I have included links to ERD diagrams, wireframes.
## Website Screenshots
| **Landing Page** | **Signup Page** |
| :-----------------------------------------------------------------------: | :------------------------------------------------------------------: |
|  |  |
| **Login Page** | **Account Page** |
|  |  |
| **Store Page** | **Category Page** |
|  |  |
| **Product Page** | **3D Preview Modal (Default)** |
|  |  |
| **3D Preview Modal (Warm)** | **3D Preview Modal (Cool)** |
|  |  |
| **Category Bar** | **Checkout Page** |
|  |  |
| **Contact Page** | **Merchant Page** |
|  |  |
## Technologies Used
### Front-End
- **Project Setup**
- **Vite**
- **React**
- **Typescript**
- **3D Tools**
- **Three.js**
- **React Three Fiber**
- **React Three Drei**
- **React Tools**
- **React Router**
- **React Icons**
- **React Intersection Observer**
- **Chakra UI**
- **Tailwind CSS**
- **Snipcart API**
### Back-End
- **Node.js**
- **Express.js**
- **MongoDB + Mongoose:**
For database management
- **Cloudinary API:**
For image cloud & 3d model management
### Tools and Dependencies
- **Ngrok**
- **Crypto.js**
- **dotenv**
## Challenges Faced
### Cloudinary problems
- **Implementing uploading 3D model:**
I couldn't upload 3D model at first so I have to check with the snipcart team what went wrong.
- **Implementing snipcart with backend to record order id:**
I had a hard time trying to respond back to snipcart.
### Snipcart problems
- **Implementing Snipcart webhooks:**
I had a hard time to understand how to use webhook for the first time, but I managed to pull through after reading the document properly.
- **Implementing snipcart with backend to record order id :**
I had a hard time trying to response back to snipcart.
## Next Steps
### Planned Future Enhancements
- **Website Responsiveness & Compatibility:**
Implement responsive design and ensure compatibility across all device sizes.
- *More product suggestions:**
Implement related products, new products, on-sale products.
- **Product Reviews:**
Enable users to leave reviews and ratings for products.
- **Wishlist:**
Add a wishlist feature for users to save products they are interested in.
- **Social Media Sharing:**
Integrate with social media platform sharing like Whatsapp, Facebook, etc.
- **User account management:**
Manage user accounts so that I can control who has access to certain features.
- **Discount system:**
I want user to able to apply discount code to their cart.
- **Newsletter system:**
I want user to sign up for newsletter so that can stay updated on new products & promotions.
For more details and updates, stay tuned to the repository and the project board.