UNIKRITI WEBD ASSIGNMENT

Introduction

Hello, I am Snigdha Parashar, and I'm excited to present my solution for the WEBD (Web Development) assignment. In this assignment, I have developed a comprehensive webpage that features a 3D T-shirt customization tool using the three.js framework. Users can interact with the 3D T-shirt model by adjusting its scale, rotation, and most importantly, changing its color to suit their preferences. I've also integrated a backend system with MongoDB to store and retrieve user color preferences.

Getting Started

To get started with the project, please follow the steps below:

1. Clone the repository from the GitHub link provided.

2. Install the necessary dependencies for both the frontend and backend. You can do this by running the following commands in the respective project folders:

   # Navigate to the frontend folder
   cd frontend/
   npm install
   
   # Navigate to the backend folder
   cd backend/
   npm install

3. Start the development server for both the frontend and backend using the following commands:

   # Copy code
   # Start the frontend development server
   cd frontend/
   npm start
   
   # Start the backend server
   cd backend/
   npm start

4. Visit http://localhost:3000 in your web browser to access the application.

Usage

Login: To access the T-shirt customization page, use the following login credentials:

Email: [email protected]

Password: testpassword

T-shirt Customization: Once logged in, you can customize the 3D T-shirt by:

Adjusting the scale and rotation.

Changing the T-shirt color to your preference.

Real-time Preferences Saving: Your color preferences are saved in real-time to the backend database. This functionality is powered by WebSockets, allowing seamless communication between the frontend and backend.

Project Structure

The project comprises two main components:

Frontend: The frontend is responsible for the user interface and 3D T-shirt customization. It uses the three.js framework to render the 3D model and interacts with the backend to save user preferences.

Backend: The backend handles user authentication and preferences storage. It is connected to a MongoDB database to store user information and color preferences. The backend also utilizes WebSockets to enable real-time updates of user preferences.

Screenshots

Conclusion

This project showcases a complete solution for the WEBD assignment, combining frontend development, 3D rendering, user authentication, and real-time database interactions. Users can enjoy a personalized 3D T-shirt customization experience while exploring the potential of web development technologies.

Thank you for checking out my project !