Spotlight
3D PRODUCT
MOCKUP CREATOR.
THE GOAL.
I was keen to create an app that made it really easy to capture the product renders that you see on this site. I needed to make a fully capable 3D editor, along with user authentication and a project save system.
I chose Next.js as the framework, as it allowed relatively simple authentication with Next Auth, as well as the ability to create APIs to interface with the database with ease using the Prisma ORM.
HOW IT WORKS.
The auth.ts helper file does most of the heavy lifting for the authentication system. It uses Next Auth to handle the authentication flow, and then uses the Prisma Adapter to create a user in the database if one doesn't already exist.
The Prisma schema outlines the shape of the data for each project scene and user. Zod is used to mirror this schema and handle data validation on both the client and server, and safely catch and handle any errors. The TypeScript types are inferred from the Zod schema.
React Three Fiber renders the scene based on the user's input and responds in real time to any changes made from the toolbar.
Finally, Edge Store was used to store the image files used in the user's project.
LESSONS LEARNED.
This was a great project to extend my backend development skills, as well as reinforce and consolidate my frontend and 3D experience.
I became comfortable with Tailwind, which was a technology I'd not used before and strengthened my TypeScript and data validation knowledge.