Frontend Engineer- React Challenge

[shadoss]

submit solution for Frontend Engineer- React Challenge

[gpositive]

Hey @shadoss - Thanks a lot for your effort dude! :)

I've checked your assignment and I have some questions for you:

• When I click on a breed card item, 2 same requests are being performed. Could you explain on why this is happening?
• Noticed that in your UI components, there could be some props or prop values (possible example the Button ghost variant or the Card padding prop) that are not used in the project code. Is that correct? If so, why are these added?
• SEO handling is a really good addition! Can you think of any challenges about this functionality? What may be improved? What are the downsides?
• Can you help me test the <NetworkErrorPage> component? How can I (as a dev) quickly check the component rendered view?
• If you had some more time, what would you have done differently?

Again thanks for your submission and looking forward to your answers!

[shadoss]

Hi @gpositive thanks a lot for reviewing my assignment.
Here are my answers to your questions below:

1. duplicate requests I guess you referring to the network tab in chrome dev tools. the first request that has type "preflight" is normal browser behavior when making cross-origin requests. the browser automatically sends this to check if the server allows the actual request, if everything is ok the actual request will be send, if not actual request wont be send and we will get a CORS error.

2. unused props in some UI components like ghost variant in Button component, I tried to make them more reusable and extendable for future use. I know if this would go to production, since I don't use this option right now, it shouldn't be included.

3. SEO a big challenge of an SPA is that SEO-related code would increase bundle size and Search engines might not see dynamically updated content. An improvement for better SEO would be the project be developed with SSR framework like Next.js.

4. testing the component you could

   1. change the endpoint url to be invalid like https://api.thecatapi.com/v1/2/
   2. in chrome dev tools network tab change the option 'No throttling' to 'offline'

5. If I had more time, I would have

   1. added testing (unit, integration, and e2e tests)
   2. added image lazy loading and optimization
   3. implement better accessibility
   4. implement better error handling
   5. implement animations between states for better UX

[gpositive]

Hello! :)

Hi @gpositive thanks a lot for reviewing my assignment. Here are my answers to your questions below:

1. duplicate requests I guess you referring to the network tab in chrome dev tools. the first request that has type "preflight" is normal browser behavior when making cross-origin requests. the browser automatically sends this to check if the server allows the actual request, if everything is ok the actual request will be send, if not actual request wont be send and we will get a CORS error.

I don't think that there are any preflight requests tbh (but I may be wrong). I guess it would be helpful from me to provide some screenshot. Could you quickly check them and let me know if I'm missing something?

4. testing the component you could

   1. change the endpoint url to be invalid like https://api.thecatapi.com/v1/2/
   2. in chrome dev tools network tab change the option 'No throttling' to 'offline'

I've tried changing to offline in the network tab but I still couldn't get this component rendered. But changing the endpoint to a wrong one helped. Thanks!

[shadoss]

Hello! :)

Hi @gpositive thanks a lot for reviewing my assignment. Here are my answers to your questions below:

1. duplicate requests I guess you referring to the network tab in chrome dev tools. the first request that has type "preflight" is normal browser behavior when making cross-origin requests. the browser automatically sends this to check if the server allows the actual request, if everything is ok the actual request will be send, if not actual request wont be send and we will get a CORS error.

I don't think that there are any preflight requests tbh (but I may be wrong). I guess it would be helpful from me to provide some screenshot. Could you quickly check them and let me know if I'm missing something?

Hi, now I understand, you are running the project in development mode.
The reason you see twice the api call is because of the React StrictMode <React.StrictMode> that wraps the app (main.tsx).
This is the expected behavior when using StrictMode and it's only for development, it runs twice the life cycle to help you find bugs in your app.
React StrictMode has no effect on the production build, app run only once, as expected.