Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CRUD/Functional Ecommerce Product Page

#react#tailwind-css#react-router
Jeffrey Tuasonβ€’ 550

@Tuason066

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, πŸ‘‹

I have a question about the GitHub pages. So this solution is built with react and react-router, I am using gh-pages to live my solution but the output(live website) doesn't work correctly because there is an unexpected bug(the images don't show). That's why I used Netlify to live my solution(website).

Thank you so much for helping me out. Happy Coding. πŸ₯³πŸ”₯✨

Community feedback

Sulemanβ€’ 750

@legion40216

Posted

Bro Awesome work... keep it up

1

Jeffrey Tuasonβ€’ 550

@Tuason066

Posted

Hi @legion40216,

Thank you so much for appreciating my efforts.

Happy coding bro πŸŽΆπŸ‘¨β€πŸ’»βœ¨πŸ”₯

1
Sahand Masolehβ€’ 1,230

@sahand-masoleh

Posted

Hi Jeffrey, great job!

You have deactivated Github pages for this repo so I can't see what was wrong. But you typically have to set a 'homepage' property in your package.json, otherwise your relative links don't point to the right address.

Usually when everything works but the images, it's a path problem.

1

Jeffrey Tuasonβ€’ 550

@Tuason066

Posted

@sahand-masoleh

Hi Sahand,

I purposely removed the GitHub environment/pages/homepage and the scripts for gh-pages

 "predeploy": "npm run build", 
"deploy": "gh-pages -d build",

because it didn't work so my option is to remove them and instead use the GitHub pages I used Netlify.

I just found this...

from freeCodeCamp

At first glance, everything seems to be working fine. But when you try refreshing the page or navigating through the browser itself, you'll keep getting 404 errors.

Why does this happen? Because GitHub Pages does not support browser history like your browser does. In our case, the route https://tomerpacific.github.io/starter-project/about doesn't help GitHub Pages understand where to point the user (since it is a frontend route).

To overcome this problem, we need to use a Hash Router instead of a Browser Router in our application. This type of router uses the hash portion of the URL to keep the UI in sync with the URL.

Here's the link for the blog I hope it also helps you.

Thank you so much for the response.

0
Sahand Masolehβ€’ 1,230

@sahand-masoleh

Posted

@Tuason066 Ahh yeah, GitHub pages doesn't redirect, there are tricks for it, but I personally jusy use Netlify which does.

But where are you using routing in this page? It's just a single page, isn't it? πŸ€”

2
Jeffrey Tuasonβ€’ 550

@Tuason066

Posted

@sahand-masoleh yeah it's just a single page, I am just using it to practice how to use react-router because this will be helpful in the future. πŸ˜…

2

Please log in to post a comment

Log in with GitHub
Discord logo

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