Projects
A collection of projects that I have built leveraging my skills as a front end developer
Cocktail Explorer
- Project OverviewIntroducing Cocktail Explorer, a sophisticated web application designed for cocktail enthusiasts and mixology aficionados alike. This elegantly crafted platform serves as your virtual guide through the world of mixology, offering an immersive and user-friendly experience for discovering, creating, and sharing exquisite cocktail recipes.
- Extensive recipe libraryAccess a vast and curated collection of cocktail recipes, ranging from timeless classics to contemporary creations. Cocktail Explorer boasts a comprehensive database, ensuring users have an extensive array of choices to suit every palate and occasion.
- Intuitive search functionalityNavigate through the diverse repertoire of cocktails effortlessly with intuitive search options. Whether you're in the mood for a refreshing summer cocktail or a warming winter concoction, finding the perfect recipe is a breeze.
- Step by step instructions and visual aidsEach cocktail recipe is accompanied by clear and concise step-by-step instructions, ensuring even the novice mixologist can craft a perfect drink. Visual aids such as images and videos provide additional guidance for an immersive learning experience.
- Mobile responsivenessEnjoy the Cocktail Explorer experience on the go with our mobile-responsive design. Access your favorite recipes and cocktail inspiration anytime, anywhere, from the convenience of your smartphone or tablet.
Tech Stack
- TypeScript
- JavaScript
- React.js
- Redux Toolkit
- React Router
- HTML5
- CSS3
- Node.js/Express.js
UI Components Library
- Project OverviewDeveloped a modular and reusable UI component library using React, Next.js, and TailwindCSS, designed to streamline development and enhance user interface consistency across web applications. The library includes a suite of flexible components such as Buttons, Text Inputs, Badges, and more—each built with customization and accessibility at its core. This project reflects strong front-end engineering fundamentals, including component-driven development, design system thinking, and performance-conscious UI construction.
- CustomizationEnabled component-level customization through robust prop interfaces and Tailwind-based styling overrides for maximum design flexibility.
- AccessabilityPrioritized accessibility best practices using semantic HTML and ARIA attributes, ensuring inclusive user experiences.
- OptimizationOptimized for fast rendering and performance, with a focus on clean component architecture and reusability.
- UI/UXEmphasized UI consistency and scalability, supporting rich, modern aesthetics suitable for enterprise-level or consumer-facing applications.
UI Components Showcase
- Project OverviewDeveloped a UI components showcase using React, Next.js, Framer Motion, and TailwindCSS, designed to showcase a collection of UI components and their usage in a real-world application.
- Enterprise Grade AnimationsUtilized Framer Motion to create enterprise-grade animations that are performant and accessible.
- Responsive DesignDesigned the UI components to be responsive and accessible on all devices.
- UI/UXDesigned the UI components to be user-friendly and intuitive.