Live Version

https://catwikipage.onrender.com/

Application Photos

Description

User Stories:

• User story: I can see more photos of the breed on the breed details page.
  
• User story: I can see the breed details including description, temperament, origin, life span, adaptability, affection level, child-friendly, grooming, intelligence, health issues, social needs, stranger friendly
  
  

Hello Blowfish Studios family, I am thankful for the chance you have provided me. The project was enjoyable to work on and I had numerous ideas on how to tackle it. I chose to keep it straightforward and uncomplicated. I must confess that I revised my design several times to make it as perfect as possible.

Regarding the searchbar, I attempted to build it to fetch data from the backend. I created the component and the code was almost complete, however, I felt it was not meeting my expectations and would require more time for debugging and improvement. I have a passion for working on projects and am open to spending more time on it, but I am also eager for your feedback and the possibility of joining your team. As a person and as a software engineer, if I undertake a task, I prefer to complete it thoroughly rather than doing a half-hearted job. Consequently, I left the search functionality code on the backend and decided to exclude it from the front-end.

Server side Notes:

In a large codebase project, I would prefer to separate controllers and routes into separate files. But in this case, I decided to keep it short and sweet. In a large codebase, separation of concerns is a good practice. It's easier to maintain, debug, and most importantly, scalable.

Client side Notes:

You might notice that I created a custom hook called (useFetchDataFromBackend) to fetch data from the server. I believe this way will encourage code reusability, offer cleaner code, and be easier to debug. I'm a big fan of dedicated functions that can be reused multiple times across the application. Furthermore, I know that I can do much better in terms of UI and styling, and you might notice that I did not have any CSS files. In a real project, I would usually create a separate CSS file for each component, and the styles would be a mix of inline-styles and external styles. But for the sake of simplicity, I decided to keep all styles inline.

Tech Stack

Server:

• ExpressJs: It provides a minimalistic and flexible framework for building web applications and APIs. It includes routing and middleware functions that make it easy to handle HTTP requests and responses, as well as other features such as:
  

1- Handling different types of HTTP requests (GET, POST, PUT, DELETE, etc.)
2- Serving static files
3- Parsing request bodies
4- Handling cookies and sessions
5- CORS
6- Support for template engines

• Express-async-handler: This package catch any errors thrown by the async function and pass it to the next middleware for proper handling, it also makes sure that the promise returned by async function is awaited before the response is sent to the client.
  

• Nodemon: I love nodemon, it makes my life easier for sure. Nodemon is used to monitor the changes in the file system and automatically restarts the application when it detects a change. It can watch for changes in the source code, configuration files, and other files that are part of the application. This allows developers to make changes to the code and see the results immediately, without having to manually stop and restart the application.
  

• Axios: Provides a simple, easy-to-use API for making HTTP requests.
  It supports features such as:
  

1- Automatic transformation of request and response data
2- Automatic handling of JSON data
3- Automatic handling of errors
4- Automatic handling of HTTP interceptors
5- Automatic handling of request and response headers
6- Automatic handling of timeout
7- Automatic handling of withCredentials

• Body-parser: Is a middleware for Express.js, a popular web framework for Node.js, that parses incoming request bodies in a middleware before your handlers.
  It can parse the following types of data:
  

1- JSON
2- Raw
3- Text
4- URL-encoded data

• CORS: Allows servers to specify who can access its resources, and how. By default, CORS blocks all cross-origin requests, unless the server explicitly allows them by returning the appropriate CORS headers.
  

• Dotenv: Is a Node.js package that is used to load environment variables from a .env file into the process.env object. The process.env object contains environment-specific information such as the operating system, paths, and environment variables.
  

Client:

• ReactJs
• Material UI: I enjoy using MUI. It provides a set of pre-built, reusable components for building user
  interfaces with a Material Design look and feel.
  
• Custom Hook: To fetch data from the backend and resuse it anywhere in the application.
  

Improvements

There are a lot of things I can improve on the current version of the app. Among these improvements are
1- Add a searchbar or a drop down menu to choose a breed.
2- Enhance the UI and make it more responsive. The current design is very minimal
3- Add more functionalities such as allowing users to vote for their favourite cat photo and produce the most voted photos.
4- Merge the dog API as well so users can have double the joy by searching for both dogs and cats. lol