vspedr/developets

Introduce your animal buddies to your fellow developers!

Hi there 👋

developets's Issues

Separate data fetching from App component

Currently the data for the cards is being fetched in the App component. The fetch call should be moved to another file such as src/service/pets.js.

Create placeholder to show if data fails to load

If for some reason the pet list fails to load, the page should display a friendly message. Use your creatiity :)

Feature: Likes

Heyyy, i think the 'Likes' feature will be awesome for this project
If you agree, i can start ;)

Use CSS-in-JS instead of plain CSS

This project uses Semantic UI, but for a few cases where we need custom CSS I think it would be nice to use styled-components or a similar library

Fetch data with HTTP requests

Today the pet list is just a js file that exports an array of objects. To make it more like a real world application, we could use something like my-json-server to still allow adding pets as entries in a files, but also being able to get data with HTTP requests with some out-of-the-box advantages such as queries. This could help with #17

Add pagination

As the list increases, loading too many items at once may cause some performance issues. We could use pagination to limit the amount of items displayed.

Reach 100% test coverage

We already have CI and CD integration, so it would be nice to make better use of it with a better test coverage

Make the card pictures square

The cards would look much better if the image on them was cropped into a square (equal width and height) while maintaining the aspect ratio of the original image. Size should be something such as 240x240 for mobile devices and 320x320 for the rest

Make card list centered

Currently the list is not centered, as you can see here. Just fix this :)

Show loader component while the data is being fetched from the API or there is no data to be displayed

May I work on this issue ?

Feature: search

Allow searching pets by their name, their description or the owner's username. This is a starting point

Sync routing with pagination

We could use a page query parameter so that we can get a direct link to a specific page, for example, https://github.io/vspedr/developets?page=2 goes straight to page 2 results instead of always starting in page one.

Add pre-commit hook with husky

This project receives a lot of pull requests so it would be nice to have a hook to run eslint before commits to help maintain the code quality.

Redesign header

I'm not much of a designer, so the header looks very simple and boring :( use your creativity and improve the header!

Redesign the page!

Feel free to modify the page as much as you want, such as using different colors or changing the ui framework from semantic-ui to something else 😄

Use local storage to cache requests

We are using axios to fetch pets data from an external source and we have pagination set up so that every page loaded triggers a new request. This could be improved with something like this so that we first check if data is stored locally before actually sending a request to the server.

Bonus challenge: implement pre-fetching so that, for example, when I navigate to page 2, page 3 is loaded in advance, then when I navigate to page 3, page 4 is loaded in advance and so on. Can be a separate PR.

Add fallback for broken image urls

Some of the images are broken on the live website. It would be nice to display another image in this case, such as the paw icon, given that it is always publicly available as long as the page is served!