Skip to content

Cat project assessment | Thodoris Magkavetsos#39

Open
magkavetsos wants to merge 25 commits into
GlobalWebIndex:mainfrom
magkavetsos:main
Open

Cat project assessment | Thodoris Magkavetsos#39
magkavetsos wants to merge 25 commits into
GlobalWebIndex:mainfrom
magkavetsos:main

Conversation

@magkavetsos
Copy link
Copy Markdown

@magkavetsos magkavetsos commented Sep 22, 2025

Description

This PR adds a lightweight React + TypeScript app built with Vite.
The app allows users to:

  • Browse random cat images
  • Explore cat breeds with search and details
  • Save/remove favorites

🔗 Live demo (deployed on Vercel): here

📖 For setup instructions, environment variables, and more details, see the README file

…ng states - create first view with basic options of load more and refresh
Copy link
Copy Markdown

@gpositive gpositive left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @magkavetsos - Thanks for your time and effort in doing this! :)

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

  • How come you used tailwind? Are you familiar with alternatives?
  • Can you please respond to the comments I made across the whole project?

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

}) => {
const [showMore, setShowMore] = useState(false);
const description = breed.description ?? "";
const teaser = description.slice(0, 140);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that you've decided to use string slicing for this truncation use case which can cut words and isn’t really responsive.

Can you think of any better ways to achieve a similar or even better result? If so can you mention and pros/cons?

Comment thread src/App.tsx
import BreedsView from "./routes/Breeds/BreedsView";
import FavoritesView from "./routes/Favorites/FavoritesView";

const queryClient = new QueryClient();
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right now the query client is using just the default options. I'd you had to override some of these, what would these be?

Comment thread tsconfig.json
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this file needed? If so, why?

{
id: Date.now(),
image_id,
created_at: new Date().toISOString()
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you help me understand if and why created_at attribute is needed here?

return useInfiniteQuery({
queryKey: ["images", "random", limit],
initialPageParam: 0,
queryFn: async ({ pageParam = 0 }) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the pageParam has always the same value in here? Do you have any way to get the page somehow from the API and the react query helpers?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants