digiKIT demo walk-through
Project Purpose and Goal
I started to learn React.js and the whole concept of full-stack development in March 2020. At the end of the year, I thought it's time to make an app to fully embrace the knowledge that I've learned. An e-commerce app seems the right one.
It contains the CRUD methods through the REST API. With the front end, I could fully practicality understand the "state management" concept which is quite new to me. (I used to work as a frontend developer 10 years ago with PHP developers in China, there was no such thing back then.)
Web Stack and Explanation
When I was working as a screenplay writer, my main entertainment was reading articles on scotch.io to learn the new tech concepts. So I'm familiar with Express REST API for a while, this time I finally got the chance to make something with it.
To be honest, I'm still not very sure about the idea of using a state management tool to store the data locally, but with React and Redux team up, it's very convenient to maintain the shopping cart.
The "component" development is also very new to me. Ten years ago, "CSS is global scoped" never bothered us, on the contrary, it's very helpful. So I took the opportunity to learn and implement styled-components in this app. This helped me understand the component more clearly.
And the Storybook is a very helpful tool to make UI components.
I use Figma for designing. (This was the first time I used Figma.)
Problem and Thought Process
I thought it'd be smoothly making this app since I've learned tons of tutorials about these tech stacks. But I still bumped into the wall and stucked once in a while. Here are the main problems that bothered me.
The Error Handling
As a self-taught developer, I took the advice online that people recommend using axios for HTTP requests. But it gave me a lot of trouble.
I write a middleware to deal with errors in the backend with messages and HTTP status code. But I found out every time axios gets a status code that is non-2xx, it just breaks without any messages I put in that error event. So I switched to fetch, it makes more sense to me. I wrote an article about this error handling thing.
The Logic of Auth
By making this app I found out there are two parts about "auth", one is "authentication", the other is "authorization". I wrote a blog post about the whole logic of them.
The Logic of Shopping Cart with Redux
Shopping cart on a website/webapp is like a "temporary zone", we put some products in there but this data will never store in the database. We read and write and do some calculations in this temporary zone to achieve the functionality of a shopping cart. So state management could make a temporary zone happen.
The Protection of Routes
Generally speaking for some special routes, like the user's profile page, we need to check whether there's a logged-in user when there is one we display the page, if not we redirect to a login page. So the logic is simple, but how do we implement this logic with React?
With the help of react-router-dom, I check the user's status in a Route component for whether there's a login status in the app's state and use the if-else condition to show the right component or re-direct to another location. Here's the code for route protection.