Masai Construct Week - How I Built This Skincare E-Commerce From Scratch
In this article, Krishna describes her Construct Week experience at Masai where she built a skincare E-commerce website from scratch and won the 2nd prize in the solo project category.
Authored by- Krishna Vaishnav
Krishna is a civil engineer from Surat, Gujarat. She is currently pursuing full-stack web development at Masai. In this article, she describes her Construct Week experience at Masai where she built a skincare E-commerce website from scratch and won the 2nd prize in the solo project category.
About Construct Week- Every 5th week of our 35-week curriculum, Masai students get to build capstone projects by implementing their learnings from the course. By the time a student graduates, they would have 7-8 production-ready projects to showcase in their portfolio, thereby giving them that competitive edge.
Introduction: From Passion to Practical Application
Howdy, folks! Come join me as I walk you through my journey of constructing Skinnetic, an educational e-commerce website focused on skincare products and sanitizers. This was my solo endeavour during the Construct Week at Masai School, where I built this using React, CSS, Chakra UI, and a local JSON server.
Why skincare and sanitizers, you ask? Well, my love for technology and personal care inspired me to mix the two. I wanted to create a website that felt like an actual online shop, but at the same time, it also allowed me to practice and polish my skills in React, CSS, and Chakra UI.
Designing the Blueprint: The Layout and Functionalities
Before I started coding, I put on my designer hat first. I sketched out the wireframes and site layout, paying special attention to making it user-friendly. I wanted anyone who visited my site to easily find what they were looking for.
Then came the fun part - brainstorming the features! I thought about what makes shopping online a fun and easy experience. A sign-up/login system for personalized user experience, product search and filter options for finding the perfect product, sorting mechanisms to arrange the items according to user preference, a detailed page for each product to understand it better, and private routes to maintain security and privacy.
Bringing Skinnetic to Life: From Vision to Reality
Next up was the building stage. With a clear plan in hand, it was time to bring Skinnetic to life. I used React to create reusable UI components, which made the development faster and more efficient. CSS and Chakra UI were my companions in making the site aesthetically pleasing and aligned with modern design principles.
Overcoming Challenges
However, not everything was as easy as pie. I encountered some tricky parts too. One of them was managing data flow in a single-page application, but I wasn't deterred. With the help of online tutorials, lectures, and a bit of perseverance, I managed to handle this. I also set up a local JSON server to handle data storage and retrieval, expanding my knowledge of backend simulation and RESTful API concepts.
The Learnings
This project wasn't just a coding exercise. Working with React allowed me to develop a deeper understanding of its core concepts, such as state management, component lifecycle, and routing. CSS and Chakra UI empowered me to create visually appealing designs, implementing responsive layouts and intuitive user interfaces.
I learned how to manage data, simulate backend functionalities, and bring an idea to life by utilising the local JSON server. More than just technical skills, it honed my problem-solving abilities and taught me how to manage a project from start to finish, a skill every developer needs.
The Final Outcome
The grand finale? A fully functional e-commerce website, Skinnetic, that offers skincare products and sanitizers- https://skinnetic.netlify.app/
Note: It won't load the products as it needs a local server to run on the backend.
To me, Skinnetic is more than just an application. It's a testament to my journey and growth as a web developer. The challenges I faced during the development process enhanced my problem-solving skills and taught me the importance of seeking solutions through documentation and available resources on Masai’s platform.
It's a showcase that I'm ready to take on real-world challenges and build products that users love.
Construct week was an amazing opportunity to get hands-on experience and apply the skills I learned in my course at Masai.
I can confidently say that the experience and knowledge I've gained from this journey will be a guiding star for my future projects. For all you aspiring developers out there, I hope my journey inspires you to take the plunge and start building. Trust me, there's no better way to learn than by doing.