
Responsive Order Summary Component using React TypeScript and Sass
Design comparison
Solution retrospective
In this project, I was able to use react with typescript together with Sass. This is my very first frontend mentor project that I have built with this technologies. Thought I was able to create something with it, I still need to improve on my React skills. For that reason, I need to learn more about react, read their whole documentation and be able to implement it to my projects in the future.
What challenges did you encounter, and how did you overcome them?I had struggle planning on the components to build. I overcomplicated things even though this is just a small project which made me finish the project longer than I expected. In the end, I ended up keeping it simple since it is just a small project.
I also struggled in integrating Sass in my react application. Initially, I made the setup incorrectly but after doing some research, I found out a better way to set it up.
What specific areas of your project would you like help with?I wanted to import the files using aliases like this:
import Card from "component/Card";
But I had struggled configuring my react application to use that syntax especially in my tsconfig.json
and vite.config.json
files. When I set it up, it was working but I still get a red line on my imports so it raises an error when I build it. I don't know if there is something wrong with my IDE or in my configuration or something else. In the end, I ended up using relative paths to import my files.
- I wanted some help in solving the problem mentioned above.
- I also wanted to get some feedback on how I structured my files.
- I also wanted some feedback on the decisions that I have made on what components I need to create for my react application.
Community feedback
- @oshudevPosted 2 months ago
Hello there 👋. Good job on completing the challenge!
About your question, you should replace your tsconfig with this:
"baseUrl": ".", "paths": { "@/*": ["./src/*"] },
then install this vite plugin, vite-tsconfig-paths.
That will solve your issue with alias import.
I hope you find it useful! 😄
Happy coding!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord