Nice work Ibrahim 💪

[jhatzics]

Hi Ibrahim,

First of all, thank you for effort in this assignment! We really appreciate it. Apart from my comments below, I would like you to answer these two questions.

Thank you once again and have a great day ahead 🙏

Questions

1. In terms of security, what would you change in this app before a production deployment? Assume that hundrends of users will use it.
2. If you had to present thousands of images without pagination, what would you do differently?

Comments

1. Can you suggest a different way of implementing this toast message, presentation logic?

https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/delete-favourite-cat-button.tsx#L29-L38

2. What is the return type of this function?

https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/cat-list.tsx#L16

3. Why you did not define a property like breedsPages?: Array<Breed[]>; here?

https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/breed-list.tsx#L7-L11

4. What is the use of React.useMemo here?

https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/nav-link.tsx#L10

5. What else you could do to define the pages property here with a single array type?

https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/cat-list.tsx#L11

6. Can you briefly describe the idea behind the src\routes folder structure?

7. Is there something else you could do here to increase your app's performance?

https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/routes/favourites/api.ts#L39-L52

[abdelwahidjr]

First of all i have worked with many many different stacks and reactjs is not my first choice also have a wide experience in core side of software engineering and server side in extensive way as well, but as you know if you're a good software engineer you can do anything related to the SDLC from gathering the requirements doing UML diagrams class diagram , activity ,sequence , block etc even DB ERD and practice in development in addition to server side work. BTW

• General Improvements I tried to pick the libs (or version in case of react router) I have not much experience with. There is a lot to improve to be honest. With more time I could learn a bit more about the libraries I used. I’d use loaders and actions much more with react router. Handle more UI scenarios to make the design better. Optimize caching keys in better way (basically learn more about how react query works). Rework breeds to have search with suggestions. Reduce some code repetition. Add e2e test at least.

• Testing In past years I used mostly jest, testing library In the case of the challenge I’d go for vitest library for unit tests.

• security and performance optimizations Using webpack a good practice is to separate different (production, development, staging, local, etc) configurations. Since we need a production-ready environment, will create a webpack.common.js file, which will be imported to our different Webpack config environment profiles like prod, dev, etc. and of course care about Generic High Entropy Secret keys exposed on GitHub but its just for this challenge now.

• we can React.Fragment to avoid adding extra nodes to the DOM, Use React.Suspense and React.Lazy for lazy loading components, React.memo for cache functional components. we can use AWS cloud front and REDIS or MEMCAHE with great server side structure like micro-frontend like micro-service in the backend side.

• presenting thousands of images without pagination Infinite scroll or even react-virtualized we can render a large amount of data/images with infinite scroll by appending data to the end of the page as you scroll down the list when the page initially loads, only a subset of data is loaded. As you scroll down the page, more data is appended. its specifically designed for rendering large list data. It uses a technique similar to infinite scroll called windowing that renders only the visible parts of a list to the screen.

• Build the project for prod after build is completed, we can use (dist) in root directory, in which all the compiled files (index.js, index.html, main.scss, etc.) are there.

• Eslint (and Prettier) for statically analyses the code to find any error or problem. It is a good practice to follow eslint rules, as using eslint keeps our codebase clean and makes our project faster and more optimized.

• SonarQube helps us to write a better quality code with better code security. It is an advanced setup and generally more helpful in large projects which includes [CI/CD] at a large scale.

---

Comments

• Can you suggest a different way of implementing this toast message, presentation logic? i will use Toast API with React Hooks

• return type of this function const CatList: React.FC = ({ cats, catId }): JSX.Element => { } type of JSX.Element

  • src\routes folder structure it a Structural Pattern to organize and its very common in many others open source frameworks .

some answers i mentioned in the long paragraph and the rest will take care and keep in mind of course as well