A personal project

E-Commerce Product page

The responsive eCommerce product details page is crafted with ReactJS, Semantic HTML5, TailwindCSS, and TypeScript. Optimized for mobile devices, users can effortlessly explore the site's responsive layout. Interactive elements reveal hover states, while a click on the product image opens a lightbox gallery. Shopping is a breeze, with features to add items to the cart, view its contents, and remove unwanted selections

Front End Development / Interactive Design

HTML / CSS(Sass) / TailwindCSS / Typescript / React.Js / Node.js / Express / Vite / Webpack / helmet

Project Background

Dive into the intricacies of the FrontendMentor challenge, a web development endeavor that marries creativity with functionality. Developed with Reactjs, the project employs Semantic HTML5 markup and leverages the power of TailwindCSS for a sleek visual aesthetic. The use of Typescript ensures a robust and scalable codebase, embodying best practices in modern front-end development. The mobile-first workflow guarantees a seamless experience across devices, prioritizing responsive design. The integration of Nodejs and Express enables server and client-side rendering, optimizing performance and user engagement. The site offers a comprehensive feature set, from the presentation of optimal layouts based on screen size to interactive elements with hover states, and a user-friendly cart system. Notably, the lightbox gallery, triggered by a click on the product image, enhances the visual storytelling. In summary, our project not only meets the FrontendMentor challenge but surpasses expectations by incorporating a technological stack that ensures a delightful and efficient user journey. Explore the convergence of design and functionality, where every click resonates with a meticulously orchestrated symphony of Reactjs, HTML5, CSS, and more.

Static Preview

A personal project
A personal project