Skip to content
Submitted 3 months ago

Result Summary Component using React JS and Tailwind CSS

#react#tailwind-css#vite
Anupam•90
@1nup-AM
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This is my first website deployement using github pages services and also my first proper repository on my github. There are few things which i would like to focus more in future projects which are responsive designs and read more official docs.

What challenges did you encounter, and how did you overcome them?
  1. Blank URL page: After carefully going through the repository and following the steps again and again, i was able to correct the 404 error.
  2. Svg image error: There was the path issue in my project where i added an extra "/" before my image folder. I solved the error by removing it and fix the broken svg imgae.
  3. Vite config: While handling the blank page error, i came upon a step where i needed to set path in vite config file so i corrected the base path.
  4. gh -pages and build folder issue: After deploying, i came to know that there are several steps which i needed to do before i deploy my project which was to create a build page but in vite, the folder name is dist.
What specific areas of your project would you like help with?
  1. Responsiveness
  2. Proper guide for deploying and debugging issues while creating the project like the 404 error and path conifguration in some files like vite and some guide about build folder as well.

Community feedback

  • José Mama•240
    @codesByJosePosted 3 months ago

    yes sometimes with react you could deploy and get that 404 error page.. sometimes this is due to

    • the way your file is named -the way its imported what i mean is if naming your file it Summary.jsx and when you imported it its (./components/summary).. because most times react is case sensitive and even the littlest mistakes can cause massive errors. i hope this helps.
    1
    Anupam•90
    @1nup-AMPosted 3 months ago

    @codesByJose Hello, thank you for your suggestion. It was because of several steps during running the build and deploy commands ,in vite -build is named as dist, and a few configurations which needed to be done in vite config file and package.json. I am not sure how much of these steps are actually necessary while deploying the proejcts on github pages and other platforms but I am learning as i go through it everyday. Thank you again.

    0
    José Mama•240
    @codesByJosePosted 3 months ago

    @1nup-AM yes ... because most time these issues are unavoidable especially because we are actually running on programs under the hood we dont even know of. im sure the next time you might encounter this. You would be confident to navigate thru the issue Happy coding.!

    1

Please log in to post a comment

Log in with GitHub

Join 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