Compare your project to our solution code and share your project below! Your solution might not look exactly like ours, and that’s okay! The most important thing right now is to get your code working as it should (you can always refactor more later). There are multiple ways to complete these projects and you should exercise your creative abilities in doing so.
This is a safe space for you to ask questions about any sample solution code and share your work with others! Simply reply to this thread to get the conversation started. Feedback is a vital component in getting better with coding and all ability levels are welcome here, so don’t be shy!
About community guidelines: This is a supportive and kind community of people learning and developing their skills. All comments here are expected to keep to our community guidelines
How do I share my own solutions?
You can upload your project to your own GitHub and share the public link on the relevant project topic.
Do I really need to get set up on GitHub?
Yes, and trust us, it’s worth your time. Here’s why:
Once you have your project on GitHub, you’ll be able to share proof of your work with potential employers, and link out to it on your CV.
It’s a great opportunity to get your feet wet using a development tool that tech workers use on the job, every day.
Not sure how to get started? We’ve got you covered - read this article for the easiest way to get set up on GitHub .
Best practices for asking questions about the sample solution
Be specific! Reference exact line numbers and syntax so others are able to identify the area of the code you have questions about.
Great project learned a lot about react-router. Thanks, @bspex for the tutorial, it definitely increased my confidence in using react-router in my next project.
Hi @bspex. I’ve started to do this project, but from the task 8 it is not working proparly as it should. Can someone help me, maybe I missed something. Checked many times, but can get it.
What can be a problem? This (/:type?) is not working. Can I work on this with react-router-dom v6?
React-router-dom v6 comes with some major changes. So I guess it is better to do this project with the previous version. I used ‘npm install [email protected]’, and everything worked for me.
Very nice course, I love the courses where we download the content and follow along with our own VSC. So I completed this project using V6 of React-Router and I completely recommend it as it made some things easier but you also got a good feel for the differences between V5 and V6.
That being said, I noticed that in the home page there is a Pet component being imported and when I go to that component it is the Link portion of the homepage where each of the animal cards are being created. I attempted to utilize the Pet component by passing animal through as a prop but was ultimately unsuccessful. I noticed that this component was also left unused in the solution files but obviously at one point the component was set up to be imported into the home page and used. I was wondering if anyone managed to get this to work and if they would be willing to share their solution with me.
Hi all,
This is a nice and clear exercise, thank you for this content
At first my search function wasn’t working, and it took me a while to figure out it was because I placed the route to the search function in App.js after the other 2 routes for pet types created earlier in the exercise. Once I moved it before them it worked. I thought the order of the routes is important when there’s a chance the first would prevent from any others to render when they are similar, and that’s when we arrange them from most specific to least, but in this case the route to the search is completely different from the other two, and I was hoping @bspex for some input that explains why the order is still relevant here for the app to work.
Had this same issue. Still not sure why the search route needs to be above the others. Perhaps because ‘:type’ could technically end up being ‘search’ (if there happened to be an animal called search). I suppose search is more specific.
Looking at the v6 docs it seems you don’t have to order them any more so it might not even be an issue going forward (but I haven’t worked with v6).
Hi and thank you for replying to my post. I was thinking along the same lines as you but I wasn’t sure and just needed some validation. I’m more convinced now
Thanks for that note about v6, I’ll be sure to check it out when relevant.
Hey everyone I struggled through this project because I did it using React Router v6. There were a lot of code breaking changes but I went through to learn the old version, the new version and how to convert what I was doing into the new one. It was difficult but if anyone is struggling because they’re using V6 feel free to check out my solution if it helps.
I really enjoyed this project and spent a lot of time on it. I used some CSS transitions to make the UI attractive, and I did some basic unit testing using react testing library.
Hi everyone.
I completed this project yesterday. The code was working fine on the localhost. However, after deploying the project to gh-pages, I am getting this error message: Failed to load resource: the server responded with a status of 404 (). Have someone already encountered this issue? If yes, please how have you solved it?
Hi there, I’m just about to start my 2-10pm shift so I won’t be active on this thread again until tonight, but this link to StackOverflow might help:
In this person’s case, it seems that he had mis-typed some file paths - from what I gather, changing the file paths from /css/main.css to ./css/main.css helped him solve the problem (notice the period before the slash).
If this doesn’t work then if you post the code that is throwing an error I will try to help you tonight
Hi @israelbeni, I think the problem is that the ‘data’ variable on the ‘HomePage’ component never evaluates to a ‘truthy’ value, which is why the ‘h2’ heading that displays “Loading…” is always displayed -
if(!data) { return <h2>Loading...</h2>; }
The reason that this ‘data’ variable never evaluates to a ‘truthy’ value is that a GET request is sent to ‘animals.json’ when the homepage loads to populate the ‘data’ array - this should be sent relative to the home page, so when I look at the console output for my app is says “GET /animals (200)”. The successful communication with ‘animals.json’ populates the ‘data’ array with JSON animal objects.
For your project, the initial GET request is sent relative to https://israel-beni.github.io, rather than https://israel-beni.github.io/Pet-Lover/. So then the line const searchParams = new URLSearchParams({ type, query }); interprets Pet-Lover as the type argument, and sends a request to a resource that doesn’t exist with an argument that doesn’t exist: https://israel-beni.github.io/type=Pet-Lover&query= and this is why you get a 404 response.
I’ve compared your source code to mine and there doesn’t seem to any problems in your code so I think that it’s a difficulty associated with deploying React apps on GitHub pages. This would explain why it was working on the localhost, because the GET request was being sent to the correct relative endpoint. When I deployed my Reddit Client I followed the following step-by-step tutorial suggested by @chrisdecleene and it worked correctly:
In your case I think the key is step 4 (specifying the ‘homepage’ property in the package.json file). Hopefully, if you follow all the steps and specify the ‘homepage’ property in step 4 as https://israel-beni.github.io/Pet-Lover then the mock API endpoints will be communicated with successfully, just as they were on your localhost.
HI @chrislarham, thanks for helping out. In fact, I deployed many times in the past to gh-pages, and each time I use the tutorial whose link you shared in your late reply. I checked and reached each step, sadly the problem persists. However, I will continue to debug it.
! Amazing content overall.
