Real Store
Purpose of The Project
I built Real Store because I wanted to study TypeScript, Next.js, Redux and React Testing Library combination.
This was also a practice for migrating a React app to Next.js.
Tech Stack
Showcase
Desktop
Mobile
Process
This project started as a simple e-commerce test assignment for React. Then I decided to migrate it to Next.js and refactor it into a cleaner and solid project.
I started migration process by changing the project structure first. Then I gradually refactored existing components and added new ones with appropriate tests.
Previous version also had a different API provided with the assignment so I deleted it and integrated Fake Store API instead. Because it would give me more freedom to work with.
Problems I have Faced
Testing with Redux Persist & TypeScript
Even though I have experience testing Redux applications with TypeScript, this was my first time using redux-persist package for persisting the Redux state in localStorage.
So I struggled for quite some time trying to type my test utilities in compliance with redux-persist but I encountered a bug where react-testing-library's helper functions kept throwing type error because of redux-persist. And apparently there is an open PR for this issue but it still hasn't merged yet.
Stripe
I tried to integrate Stripe for the checkout process to make it as close to a real world application as possible. But I would have to use their own form component instead of my own. And it had a lot of unnecessary fields that would confuse people. So I moved on from this idea and implemented my own components instead.
What I have Learned
This project has helped me learn more about TypeScript and practice usage with Redux and Testing.
I also learned how to migrate a React project to Next.js.