Artisans Collective
An e-commerce website themed around artisans showcasing handcrafted products.
Tools:
React.js
Short Explanation
Artisans Collective is a React-based e-commerce site that highlights handcrafted products like bracelets, pots and more. All product data, images, and descriptions hardcoded focusing on building a visually appealing UI, product listing and shopping experience.
Tech Stack Used
- React.js: A frontend library used to build dynamic user interfaces, manage state, and render components efficiently.
- Tailwind CSS: A utility-first CSS framework for creating responsive designs without writing custom CSS.
Image Preview
A quick look at some UI shots from the project:
The Problems and How I Deal With It
- Organizing hard-coded product data: I structured all product details (images, descriptions, prices) in a single array of objects, making it easy to map over and update.
- Creating reusable components: I built modular components for product cards, listings, and layouts ensuring code reuse and consistency across the site.
- Designing a responsive UI: I implemented a clean visually appealing design that adaptssmoothly across devices, balancing aesthetics with usability.
Lessons Learned
- I learned the importance of creating reusable components early to save time later.
- I understood how responsive design decisions impact the overall user experience.
- I got a better sense of balancing aesthetics wih practicality when building a frontend UI.