An e-commerce website for the Instagram-born jewelry business, created using React and TypeScript. This website is fully responsive. It is not integrated with any backed, due to time constraints.
Here's what you can see on the website:
Since this is a real brand with its own identity, I interviewed the owner about their idea of the website. Some keywords they used - bright, clean, youthful. I also made note of the features they suggested, like User Testimonials.
According to their description, I created wireframes and used agile strategy to get continuous feedback and refine my designs.
Since the goal of this project was to hone my frontend development skills, I decided to omit the backed part of it, including user signup and authentication.
I started the development process using a mobile-first approach. As I added new components, each of them were developed to work on mobile first, and then adapted to larger screens using media queries.
Then I set up the routing, and integrated Stripe API to simulate the payment flow.
Finally, I added testing using Testing Library for all components, to ensure everything works well.
Along the way, while building everything, I took notes on what I've learned so I don't miss out on it. This really helped me to step back and completely understand all the new concepts.
useContext hook: It helped me optimize website performance by preventing unnecessary re-render caused by prop changes. It also simplified state management across the website, so I could keep the Shopping Cart dynamic.Each part of this project helped me understand more about building apps, managing complex information, and improving user experience. It was more than just making a website - it was about solving problems, learning new things, and improving my skills for future work.
npm install or yarn in frontend directory to install dependencies.npm start or yarn start to get the project started.