Responsive Multi Step Form (React + TS and SCSS)

What are you most proud of, and what would you do differently next time?

What are you most proud of?

I like the folder-structure. I enjoyed separating content in "data" modules from rendering "components" on"pages", as well as having my stylesheets in "scss" files. It seems to me well structured and clean. I didn't face any problems losing myself in my own code.

Project Highlights: localStorage and useContext()

I decided to combine "localStorage" with the "useContext - Hook" for user input storage. Simply because 'till now I either worked with JSON-Server or MongoDB. Since I haven't used localStorage for a while now, I thought it'd be a great chance for this project. Then I added the useContext - Hook for sharing the input data between the routes and passing it either forward towards the finishing site, or for going back and updating data. You can look up the browser dev tools "application" for what has been stored inside Local storage. This also hepled me for dev - purposes, so that there's no need to uncommend the required fields of the first page when jumping back to it.

css and sass

I really enjoyed getting my styles done with sass variables.

What would you do differently next time?

***Start with the mobile-first workflow and style the app first, rather than getting both, logic and styles done at the same time.
***Dockerizing my web app. Found a helpful post on dev.to by Lester Diaz Perez

What challenges did you encounter, and how did you overcome them? styling

I found it somehow cumbersome to adapt the container size styling on mobile / desktop version, when i.e. toggling between monthly or yearly plans. Working here and there with fixed widths and browser Inspect tool worked for me. I found working from time to time with the tsx inline styling and ternary operator is a great thing, i.e. toggling between active - inactive classes.

logic

working with ts and localStorage has also led to irritation for me. For example, on the finishing page I get my object saved in localStorage: name: ['Customisable profile']. I had previously selected this on the addons page and it is saved in localStorage with setItem.

When I call getItem on the following finishing page in console.log(typeof getItem("addons")), I get: "object".

If I log console.log(getItem("addons")) I get:
{price: Array(1), name: Array(1)} name: ['Customisable profile'] price: ['$2/mo']

In order to be able to use it type-safe in my children component and pass it to my parent component, I call the following in my FinishCard, for example:

type FinishCardProps = { getItem: string[] } But I get the following message in vscode: This expression cannot be called. The type "string[]" has no call signatures.ts(2349)

So I continued working with "any" as a transition, but that misses the point of TS, doesn't it? Because getItem is defined as an array of strings in the FinishCardProps type, but I'm trying to use it as a function by calling getItem("addon"), I need to set it to a function in FinishCardProps. But it's still not working with "getItem: (item: string) => void". I'm missing some crucial point...

What specific areas of your project would you like help with?

1. Actually I wanted to test my web app with jest / react-testing-library, but I think my vite config wasn't setup right. Has someone found a nice article or some other content?
2. I'd really like to read some thoughts/advice on how to use TS in this app efficiently.