Right now, when fetching issues from github issues API, there are pull requests mixed in with the issues:

We want to add another filter here:

Such that we can filter by pull requests.

To do this, you must have some knowledge or react/redux. Look into here to see how filtering works. You would need to add another conditional there to see if an issue is a pull request or not. Here is where the filtering is activated from.

The last two cards to be displayed are stretched

The styling in Issues.css needs to be fixed such that the cards do not stretch like that. Specifically look into these two styles here:

Add icons to cards in the top right

Issues will have an issue icon
Pull requests will have a pull request icon.
(to check if an issue is actually a pull request, check if the pull_request key exists.)

Bonus

Bonus: If issues are open, show green icon. If closed, show red icon.
If pull request merged, show purple pull request icon.
Similar to this

Currently they're same style

In current scenario we don't have any back button to go landing page.

Currently my default eslint settings are clashing with project style, and I have to manually edit half of the file before commit

This is a very beginner friendly issue!

In the file Issues.js you will notice that an isLoading prop is passed to the Component.

Your task will be to use that prop and display a loading spinner while isLoading is true. Look into any spinner of your choice and be creative!

Hint: This might be a good library for spinners if you are stuck.

Prevent this from happening when on mobile devices

Implement pagination using the github API

Example:
https://api.github.com/repos/facebook/react/issues?state=all&page=2

To get started, add a page attribute to the state in the react component here

Then, you have to pass the page number as a function argument to this function called from here and here

Last step would be adding a pagination component at the bottom of the page so that on click, the page number increases/decreases

Maybe look into this component to help out

Add a simple transition effect between the landing page and the actual github issues page so it feels smoother.

This has to be done on the react router level. Most likely something in App.js.

See this video for example

Can maybe look into this post for inspiration

Lets make the active filter have the primary color. Right now they are all the same.

To do this, look into src/Issues.css

I've noticed that the issues list is handled with flex and margin and the values seem to be chosen in an arbitrary way.

While this is working perfectly, I think we can do better by making use of CSS Grid.

Basically, we just need to add this code into .issues-container 🙂

display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 2rem;

Right now we are using a very unstructured way to style our issues viewer. Lets use scss which allows us to have nested styles.

The two main files which need refactoring are Landing.css and Issues.css.

The combined total lines of css is 150 lines

Check this tutorial to get started.

BONUS Make scss variables for the colors which are repeated throughout the app

Add functionality so that clicking on a card links to that specific issue on github

To do this, you can either use a classic html <a /> tag or if you are more advanced, pass an onClick prop to the card and handle the click event by redircting to the specific url