All solutions

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

Working for the first time with tailwind and styled-components in combination was fun! With more profound knowledge in both, I in longterm there could be benifits for some projects...

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

Making use of tailwind in a responsive manner didn't work out well. But I'll keep up to it.

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

Does anybody know a helpful resource/article/best practice on how to combine tailwind with styled-components? Maybe some known projects?

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

Really enjoyed matching this well designed project, working on my grid and flexbox without frameworks, just vanilla js and css.

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

Making background images fit inside grid containers as they should... But I did my research on stackoverflow, mdn and w3schools, this article or looked up my other projects to solve my problems, and it worked out fine!

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

Any suggestions are welcome!

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

Working with Grid Areas was the right thing for me... next time I'll be using perfectpixel in earlier stage of my project as I learned from having a look at one of @tediko projects. Thanks for sharing!

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

The transfer from desktop to mobile styling or vice versa feels sometimes cumbersome... maybe there are some helpful tools out there to create a smoother workflow even before writing first lines of code (like wireframes etc.)?

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

Any suggestions and recommendations are well appreciated! You're welcome to also share your thoughts on workflow and approach to projects.

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

The Components - Architecture Workflow: passing data from model, to PriceCard, to PriceList and back to App Component.

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

I'm proud of how I managed context state: finding a solution to first update the counter component, then pass it to cart and finally activate it with "button" - add to cart - component, it wasn't that obvious for me how deal with it. Another thing I'm proud of is, that I made use of framer motion for the Lightbox.

Next Time I plan to go mobile first. This time it took me a while to get the responsive style.

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

Working with and styling svg files was somewhat cumbersome. But I found a great article, describing multiple ways to handle svg's in css and react.

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

I'm open for any suggestions to improve my code.

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

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.

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.

I really enjoyed getting my styles done with sass variables.

***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.