Allure

Home
Cool palm tree
A santa riding a ferrari over nyc??
Santa loves eating cheesecakes
Bigger palm tree
Live demo results

Inspiration

Once upon a time, I found myself on a mission, one that involved designing the perfect farewell hoodie for our school. It was a task that required creativity, collaboration, and patience, but little did I know that it would lead me to embark on an extraordinary journey.

You see, being a part of the school's farewell hoodie design team was an exciting venture. However, the process of getting approval for our designs and then endlessly redrawing sketches was nothing short of a frustrating and time-consuming ordeal. It felt like a never-ending loop of revisions and edits, leaving us all a tad weary.

But it wasn't just our team facing these challenges. I soon realized that graphic designers, the true artists behind the scenes, often found themselves in a similar predicament. More often than not, their initial design, no matter how brilliant, was never "the one." The struggle to capture the essence of creativity and match the vision of their clients was real.

It was during one of those endless revision sessions that an idea began to take shape in my mind. Why not create a solution that could save time and allow designers to explore limitless possibilities? And so, the seed of my project was planted.

What it does

Allure link allows users to create, render and customize designs, instantly, on any 3D model. Users can choose from various options, including color, and textures, to personalize their designs. It offers a user-friendly interface with tabs for different design tools and options. Users can apply decals, change colors, and even generate images using OpenAI DALL-E. The website also provides features for downloading and sharing customized designs. With its animations and smooth user interactions, it offers an engaging and creative space for users to express their design ideas.

How we built it

Building our website was an exciting journey that involved a combination of cutting-edge technologies, meticulous planning, and collaborative efforts. Here's an overview of how I brought it to life:

Front-End Development: I chose to build the front end of our website using React, a powerful JavaScript library for creating dynamic user interfaces. React's component-based architecture allowed us to create reusable UI elements and efficiently manage the user interface.

Animation and Motion: To add eye-catching animations and transitions, I integrated Framer Motion into our project. Framer Motion provided us with a suite of animation tools, including AnimatePresence and motion-related functions, to create seamless and visually appealing user interactions.

API Integration: I harnessed the power of OpenAI APIs to enhance our website's capabilities. One notable integration involved using an API for image generation, enabling users to create customized images based on their prompts.

File Handling: Users can upload files to apply decals to designs. I implemented file handling mechanisms, including downloadCanvasToImage and reader, to ensure smooth file processing.

Conditional Rendering: Our website dynamically renders elements and components based on the application's state. This flexibility enables users to see real-time changes in their designs.

User Experience and Design: I invested in user experience design to create a seamless and visually appealing interface. Filter Tabs and Editor Tabs guide users through the design process, making it user-friendly and efficient.

Testing and Quality Assurance: Rigorous testing and debugging were vital to ensure the reliability and performance of our website. I meticulously examined each feature to identify and resolve issues.

I emphasized documentation throughout the development process. This documentation not only aids in understanding and maintaining our code but also supports future development and collaboration.

Challenges we ran into

Backend Setup and Deployment Issues: Setting up the backend and deploying the server was a challenging process. The server broke down initially, forcing me to change its location. Additionally, I encountered build failures due to outdated module versions. Managing the backend's deployment and keeping dependencies up to date has been an ongoing challenge.

CORS Error for AI Feature: After launching my website, a frustrating CORS (Cross-Origin Resource Sharing) error occurred, preventing other PCs from accessing the AI feature. Resolving this issue required adjustments to server settings, implementing proper headers, and exploring proxy solutions to ensure a smooth user experience.

Rendering Issue with Canvas and Logo Toggle: I faced a rendering problem when toggling between the canvas and logo feature. It failed to render correctly, and I had to resort to using switch cases to implement a solution. Managing complex rendering logic and ensuring the user interface behaves as expected can be challenging, especially in dynamic applications.

Accomplishments that we're proud of

I take pride in the successful integration of Valtio, which greatly improved our state management and made the user interface more efficient.

Launching a live and fully functional website prototype was a major accomplishment. I am also thrilled with the captivating transitions, animations, and our first-time experience working with 3D models, adding a rich interactive layer to our project.

What we learned

In the process of building my website, I acquired a wide range of skills and knowledge that allowed me to create a dynamic and interactive web application. Here is a detailed breakdown of what I learned:

React and JSX: I learned how to use React, a popular JavaScript library for building user interfaces. With React, I can create reusable UI components and efficiently manage the state of my web application. JSX, a syntax extension for JavaScript, enabled me to write declarative and component-based code.

Framer Motion: I became proficient in Framer Motion, a library for adding animations and transitions to web applications. I utilized components like AnimatePresence and motion-related functions to create visually appealing and smooth animations when elements enter and exit the DOM.

Valtio State Management: I grasped the concept of state management and applied it effectively using Valtio. This library simplified the process of managing and synchronizing the application's state, allowing for seamless updates and interactions.

Handling External Configurations: I learned how to manage external configurations, such as application settings and constants, by importing and utilizing them in my code. This made it easy to maintain and adjust the behavior of my website.

Custom Components: I developed the ability to create custom React components tailored to the specific needs of my website. These components, including AIPicker, ColorPicker, CustomButton, FilePicker, and Tab, enhanced the user interface and functionality of the site.

Working with APIs: I gained experience in working with external APIs. Specifically, I integrated an API for image generation, allowing users to interact with the website to create customized images based on their input.

Handling File Operations: I became proficient in handling file operations, including reading and processing files uploaded by users. This was essential for implementing features like applying decals to designs.

Conditional Rendering: I also learned how to conditionally render elements and components based on the application's state. This made it possible to create dynamic interfaces that adapt to user input.

Effective User Interface Design: Through the use of Filter Tabs and Editor Tabs, I learned how to design an intuitive and user-friendly interface for my website, ensuring a seamless user experience.

Web Asset Management: I efficiently managed web assets like images and icons, ensuring they were properly loaded and displayed within the application.

Error Handling: I developed robust error-handling mechanisms to provide meaningful feedback to users in case of issues, ensuring a smoother and more reliable user experience.

Optimization: I focused on optimizing the performance of my website, including code efficiency and the use of libraries like React Three Fiber to create 3D graphics efficiently.

Version Control: I utilized systems like GitHub to track changes and maintain a clean and organized codebase.

Testing and Debugging: I acquired the skills to test and debug my code effectively, ensuring that my website runs smoothly and is free from common issues.

Documentation: Lastly, I learned the importance of documenting my code and processes. This helps not only in understanding and maintaining my work but also in collaborating with others.

In summary, the journey of building my website has been a rich learning experience, encompassing various web development technologies, best practices, and problem-solving skills. I am now equipped with the knowledge and skills to create complex and interactive web applications while ensuring a seamless user experience.

What's next for Allure

Allowing users to choose from a variety of canvas styles such as shoes, heels, and jeans! Moreover, creating a forum for different designers to form groups to collaborate together and share their ideas :) Lastly, I also plan to integrate ML to suggest changes to user basis their requirements.