Back

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

Fake Store API

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.