Open to full-time & freelance work
This project started as part of an e-commerce application where I was responsible for building the authentication interface. It includes sign in, sign up, and forgot password screens inside a single animated layout. The components are modular and can be dropped into any existing React app without heavy configuration.
The main e-commerce application already had animations across all pages, so the auth screens needed to follow the same visual style and feel consistent with the rest of the product.
So instead of using separate pages for each form, the goal was to combine all authentication flows into one container and switch between them using animations. The design itself was inspired by a layout I discovered while browsing Dribbble. I often look there for UI ideas, and this particular design matched the style and interaction we were aiming for, so I adapted it and rebuilt it in React with my own structure and animations.
One of the main challenges was organizing three different forms inside a single layout without making the UI feel crowded or causing layout shifts. Each form needed its own structure, but transitions between them had to feel natural and controlled.
This was also my first time using Framer Motion, so I had to learn how animations, presence, and transitions work while building the UI.
The initial design we had helped shape the overall approach of the solution. It acted like a visual prototype and gave us a clear idea of how a single container could hold all authentication forms while controlling which one is visible. It also inspired the sleek animations and small details that make the animation feel smooth and intentional.
To implement those animations, I used Framer Motion which made it much easier to build the sliding transitions, animate form controls, and bind our animations directly to the application state. This helped the interface feel alive and responsive.
I had to keep in mind that this feature would be integrated by other developers into the main app, so I built the auth UI as a self-contained and modular component that can be used without major changes.
After finishing the initial version, I was asked to add front-end validation to all forms. So, I used Zod to define clear and reusable validation schemas, which helped keep the logic simple and consistent across all auth flows.
This project helped me get more comfortable working inside an existing project, making decisions that fit the product instead of starting from scratch. Overall, it improved how I approach extending real-world applications while keeping the user experience consistent.
