Open jhatzics opened 1 year ago
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
some answers i mentioned in the long paragraph and the rest will take care and keep in mind of course as well
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
Comments
toast
message, presentation logic?https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/delete-favourite-cat-button.tsx#L29-L38
https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/cat-list.tsx#L16
breedsPages?: Array<Breed[]>;
here?https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/breed-list.tsx#L7-L11
React.useMemo
here?https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/nav-link.tsx#L10
pages
property here with a single array type?https://github.com/abdelwahidjr/CatLover/blob/c07e3fc5406032c48e76ec20f544a65a18b4856a/src/components/cat-list.tsx#L11
Can you briefly describe the idea behind the
src\routes
folder structure?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