Welcome to the 3D Product Customization Website! 🌟 This innovative web application empowers users to personalize their very own t-shirts with ease. With a wide range of customization options at their fingertips, users can unleash their creativity and design unique garments that reflect their individuality. Get ready to embark on a journey of self-expression and style! 🎉
This application boasts an array of impressive features to enhance your t-shirt customization experience:
Color Selection: Choose from a delightful range of t-shirt colors to suit your style and mood.
Image/Logo Upload: Personalize your t-shirt by uploading your own logos or images to be applied seamlessly.
DalleAI Integration: Unlock the power of DalleAI technology, generating unique custom images to adorn your t-shirt as logos or full designs.
Remove Functionality: Enjoy the freedom to remove any applied logos or images with a simple click of the "remove" button.
Download Option: Capture your masterpiece by downloading your completed t-shirt design as an image file.
This project showcases the harmonious fusion of several cutting-edge technologies:
React: A powerful JavaScript library renowned for its efficiency and flexibility in building interactive user interfaces.React provides a robust foundation for developing a dynamic and responsive user experience.
Three.js: An impressive 3D graphics library that brings life to our virtual world, enabling the creation and rendering of captivating 3D scenes on the web.
Tailwind CSS: A highly customizable CSS framework that accelerates the development process by providing a rich set of utility classess. Tailwind CSS allows us to craft unique and stylish user interfaces effortlessly, making the customization experience visually appealing and engaging.
Node.js: A versatile JavaScript runtime environment that empowers the backend functionality of our project. Node.js enables us to handle server-side operations, manage data storage, and integrate external services such as the groundbreaking DalleAI technology.
The combination of React, Three.js, Tailwind CSS, and Node.js sets the stage for an immersive and user-friendly experience, where users can unleash their creativity and transform their ideas into reality.
Stay tuned for more updates as we continue to explore and leverage the latest advancements in technology to enhance our project even further! 🚀🌟 To get started with this project, you can follow the steps outlined below:
We invite you to join us on this exciting customization journey. Whether you're an aspiring fashion designer, a creative soul, or simply looking for a unique gift, our 3D Product Customization Website has got you covered. Unleash your creativity, make a bold statement, and wear your personalized masterpiece with pride! 👕✨
Get started today and experience the joy of designing your own custom t-shirts like never before!
If you'd like to contribute to this project, please fork the repository and submit a pull request. We'd love to hear your ideas for improving this application! Thank you for considering contributing to our 3D Product Customization Website! Your ideas and contributions are valuable in improving this application and providing an exceptional user experience. Join us in revolutionizing customization and empowering individuals to express their creativity through personalized t-shirt designs.
- Clone the project repository:
git clone https://github.com/amanjaiman1/Product_3D.git
This command will create a local copy of the project on your machine.
- Install dependencies on both the client and server:
cd client
npm install
cd server
npm install
Navigate into the cloned repository using the cd command, and then run the npm install command to install the project's dependencies. The --legacy-peer-deps flag is used to handle any potential peer dependency issues.
- Start the application:
npm run dev
This command will start the client application. It typically runs on port 5173, but you can check the console output for the exact URL.
- Start the server:
npm start
-
Fork the project repository:
- Go to the project repository on GitHub.
- Click on the "Fork" button in the top-right corner of the page.
- This will create a copy of the repository under your GitHub account.
-
Clone the forked repository to your local machine:
-
Open your terminal or command prompt.
-
Navigate to the directory where you want to clone the repository.
-
Run the following command to clone the repository:
git clone https://github.com/your-username/your-repo-name.git
-
-
Create a new branch for your changes:
-
Change to the repository's directory:
cd your-repo-name -
Create a new branch with a descriptive name for your changes:
git checkout -b your-branch-name
-
-
Make and commit your changes:
-
Make the necessary modifications and additions to the project codebase.
-
Once you've made your changes, stage them for commit:
git add . -
Commit your changes with a meaningful commit message:
git commit -m "Add your commit message here"
-
-
Push your changes to your forked repository:
-
Push your changes to the branch you created on your forked repository:
git push origin your-branch-name
-
-
Create a pull request:
- Go to the original project repository on GitHub.
- You should see a notification banner indicating that you've recently pushed a new branch.
- Click on the "Compare & pull request" button.
Please follow the instructions below carefully:
1️⃣ Environment Setup :
In the ./client directory of our project, you'll find a file named .example.env. This file serves as a template for the environment variables required to run the application. Make a copy of this file and rename it to .envin the same directory.
2️⃣ Adding Environment Variables :
Open the newly created .env file and update the values of the environment variables according to the platform we're working on (Vite + React). For example, you might need to set environment variables related to Firebase, API keys, or other configurations specific to our project.
Make sure to keep sensitive information, such as API keys and credentials, confidential and avoid committing them to the version control system.
3️⃣ Building the Project :
Once you've added the necessary environment variables, navigate to the ./client directory in your terminal and run the following command to build the project:
npm run build
This command will generate the production-ready optimized build of our application.
4️⃣ Running the Project :
To start the development server and run the application locally, use the following command:
npm run dev
🚀This will launch the application at the specified development server URL.
Remember to perform these steps whenever you set up the project on a new machine or need to update the environment variables.
If you encounter any issues during the setup process or have questions, please feel free to ask in the #issues channel.
🎉Let's ensure that everyone has the necessary environment properly configured to work efficiently. Thank you for your attention and cooperation!🙌
Congratulations! You've successfully contributed to the project. Your changes will now be reviewed by the project maintainers, and they may provide feedback or merge your changes into the main project if they are deemed appropriate.
Thank you for using our 3D Product Customization Website!
The project is licensed under the MIT License.