I first wrote this guide a while back. Since then I hit two problems it didn't cover: SSH quietly logging in to my personal repos as my work account, and commits made outside my usual folders going out under the wrong identity. This version fixes both and adds commit signing. The commands are for macOS; on Linux, drop the Keychain bits and the rest works the same.

Quick tip: for just the commands, scroll to the TL;DR at the bottom.

The plan

• Work is the default. Plain git@github.com:… URLs, and the work name and email, apply everywhere unless something says otherwise.
• Personal is the exception. Personal repos use a separate SSH host alias and the personal identity. Git picks them by folder and by remote URL, so a personal repo cloned somewhere unusual still gets it right.

Flip the two if most of your work is personal.

1. Create two SSH keys

Give them clear names. ed25519 keys are shorter and faster than RSA, and GitHub recommends them:

ssh-keygen -t ed25519 -C "jalaj@work.com"     -f ~/.ssh/jalaj-work-github
ssh-keygen -t ed25519 -C "jalaj@personal.com" -f ~/.ssh/jalaj-personal-github

You'll be asked for a passphrase. Use one; the Keychain step below means you won't have to type it again.

You now have four files in ~/.ssh:

jalaj-work-github
jalaj-work-github.pub
jalaj-personal-github
jalaj-personal-github.pub

The .pub files are public; the others are your private keys and never leave your machine.

2. Add the keys to GitHub

For each account, signed in as that account, go to Settings → SSH and GPG keys → New SSH key and add its .pub file twice:

1. Key type Authentication Key, for push and pull.
2. Key type Signing Key, so your commits show as Verified (step 6).

Copy a key to the clipboard with:

pbcopy < ~/.ssh/jalaj-work-github.pub

Make sure each account is the right one. If your personal key ends up on your work account, everything will seem to work, which is exactly the trap described in the next step.

3. Configure SSH

Create ~/.ssh/config if it doesn't exist and add:

# Work account: the default github.com
Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/jalaj-work-github
  IdentitiesOnly yes
  AddKeysToAgent yes
  UseKeychain yes

# Personal account: an alias for github.com
Host github.com-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/jalaj-personal-github
  IdentitiesOnly yes
  AddKeysToAgent yes
  UseKeychain yes

Don't skip IdentitiesOnly yes. My original guide left it out, and it cost me. Without it, SSH offers every key loaded in your agent before the IdentityFile you named. If your work key is loaded, the first key offered is the work key, GitHub accepts it, and your "personal" alias quietly logs in as your work account. Pushes to personal repos then fail, or worse, succeed as the wrong person. IdentitiesOnly yes makes each host use only its own key.

UseKeychain and AddKeysToAgent keep the passphrase in the macOS Keychain and load the key on first use. To store the passphrases now:

ssh-add --apple-use-keychain ~/.ssh/jalaj-work-github
ssh-add --apple-use-keychain ~/.ssh/jalaj-personal-github

Test it. Each host should greet the right account:

ssh -T git@github.com            # Hi jalaj-work!
ssh -T git@github.com-personal   # Hi jalajcodes!

If both say the same name, re-check IdentitiesOnly and which account each key was added to.

4. Stop rewriting remote URLs by hand

The old version of this guide had you run git remote set-url on every personal repo. Git can do that rewrite for you. Add this to ~/.gitconfig, with your personal username:

[url "git@github.com-personal:jalajcodes/"]
  insteadOf = git@github.com:jalajcodes/

Now you can copy the normal clone URL from GitHub (git@github.com:jalajcodes/blog.git), and Git silently connects through github.com-personal. Work URLs are untouched. Check it on any personal repo:

git ls-remote --get-url origin   # git@github.com-personal:jalajcodes/blog.git

Repos you already set up with git@github.com-personal:… keep working as they are.

5. Set your name and email automatically

Create one file per identity.

~/.gitconfig-work:

[user]
  name = Jalaj Gupta
  email = jalaj@work.com

~/.gitconfig-personal:

[user]
  name = jalajcodes
  email = jalaj@personal.com

Then, at the end of ~/.gitconfig:

# Work identity everywhere by default.
[include]
  path = ~/.gitconfig-work

# Personal identity overrides it. Keep these last: later settings win.
[includeIf "gitdir:~/projects/personal/"]
  path = ~/.gitconfig-personal
[includeIf "hasconfig:remote.*.url:git@github.com:jalajcodes/**"]
  path = ~/.gitconfig-personal
[includeIf "hasconfig:remote.*.url:git@github.com-personal:jalajcodes/**"]
  path = ~/.gitconfig-personal
[includeIf "hasconfig:remote.*.url:https://github.com/jalajcodes/**"]
  path = ~/.gitconfig-personal

Why it's built this way:

• A default, not two folder rules. My original setup only had includeIf rules for ~/projects/work/ and ~/projects/personal/. Anything cloned elsewhere (a temp folder, a tool's scratch directory) matched neither and fell back to whatever global name and email were set. That's how work commits went out under my personal identity. With a default, nothing falls through the cracks.
• Order matters. Git applies settings top to bottom, so the personal includes must come after the work include to override it.
• Match by remote, not just folder. hasconfig:remote.*.url: (Git 2.36 or later; check with git --version) picks the personal identity for any repo whose remote is one of yours, wherever it lives. The three lines cover the plain SSH URL, the alias URL and HTTPS. The folder rule still catches personal-folder repos whose remote isn't yours, such as a clone of someone else's open-source project.
• Mind the trailing slash in gitdir:~/projects/personal/. It makes the rule apply to everything inside the folder.

Test it:

cd ~/projects/work/some-repo     && git config user.email   # jalaj@work.com
cd ~/projects/personal/blog      && git config user.email   # jalaj@personal.com

6. Sign your commits (optional, recommended)

You already have SSH keys, so you don't need GPG to get the Verified badge. Add to ~/.gitconfig-work:

[user]
  signingkey = ~/.ssh/jalaj-work-github.pub
[gpg]
  format = ssh
[gpg "ssh"]
  allowedSignersFile = ~/.ssh/allowed_signers
[commit]
  gpgsign = true

Add the same block to ~/.gitconfig-personal with jalaj-personal-github.pub. Each identity then signs with its own key. Don't leave the signing settings out of the personal file: it would inherit the work key from the default include.

allowedSignersFile lets Git verify signatures locally (git log --show-signature). Create it with one line per identity:

echo "jalaj@work.com namespaces=\"git\" $(cut -d' ' -f1,2 ~/.ssh/jalaj-work-github.pub)"         >> ~/.ssh/allowed_signers
echo "jalaj@personal.com namespaces=\"git\" $(cut -d' ' -f1,2 ~/.ssh/jalaj-personal-github.pub)" >> ~/.ssh/allowed_signers

Watch the section name: it's [gpg "ssh"], not a nested [ssh] under [gpg]. Git silently ignores the wrong one.

Two things GitHub checks before showing Verified:

1. The key is added to the account as a Signing Key (step 2).
2. The commit's email is a verified email on that same account (Settings → Emails).

Test it:

git commit --allow-empty -m "signing test"
git log -1 --format='%an <%ae> %G?'   # G means a good signature

Troubleshooting

git config --show-origin --get-regexp 'user\.' shows which file each setting came from, which is the quickest way to debug an include.

TL;DR

1. Keys: ssh-keygen -t ed25519 -C "you@work.com" -f ~/.ssh/jalaj-work-github, and the same for personal.
2. GitHub: add each .pub to its own account as both an Authentication Key and a Signing Key.
3. ~/.ssh/config: Host github.com uses the work key, and Host github.com-personal uses the personal key. Give both IdentitiesOnly yes, AddKeysToAgent yes and UseKeychain yes. Test with ssh -T.
4. ~/.gitconfig: [url "git@github.com-personal:you/"] insteadOf = git@github.com:you/, so remotes are rewritten automatically.
5. ~/.gitconfig: [include] the work file first, then includeIf the personal file by folder (gitdir:) and by remote (hasconfig:remote.*.url:), last.
6. Signing: each identity file sets signingkey, gpg.format = ssh, allowedSignersFile and commit.gpgsign = true.

That's it: one-time setup, and every repo gets the right key, identity and signature without you thinking about it. If you have questions, reach out on Twitter. Thanks for reading!

There are many ways to solve this problem like,

• Absolute positioning the footer at the bottom (this doesn't work when content grows larger than the viewport, the footer gets ‘stuck’ to the bottom of the viewport.)

• Using sticky or fixed positioning (this works if you want your footer to always be visible ;(

• Using Flexbox or Grid (Both of these technologies allows us to get the behaviour we want but in my opinion using grid is easier and more elegant)

I'll explain how to use grid to push footer at the bottom in this post and let's leave flexbox for a later post.

Page Structure

Your page structure should match the html below.

<body>
   <div class="page-wrapper">
       <header>HEADER</header>
       <main>MAIN</main>
       <footer>FOOTER</footer>
   </div>
</body>

Maybe your page structure is somewhat more complex, in that case you need to keep in mind to put your Header, Footer and Main inside a parent container.

Applying CSS Magic

.page-wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
}

Let see what each line of above code does.

• min-height: 100vh - Here we are telling the browser to fill the entire viewport
• display: grid - This line makes the element a grid container
• grid-template-columns: 1fr - We are creating a single column and giving it a width of 1fr. If that 1fr is new to you, it essentially means “take the remaining space” which, in this case, is the entire width of the grid container, .page-wrapper.
  

Now the most important line,

• grid-template-rows: auto 1fr auto:

  • Here we are telling the brower to create three rows. The first and third row, which is the header and footer, respectively, are sized with auto, which means they’ll take up as much space as needed. In other words: no need for hard-coded sizes! (isn't css grid just awesome?)
  • The middle row is our content. We’ve assigned it a size of 1fr which, again, just means it takes up all of the remaining space that’s left over from the other two rows. If you’re wondering why we aren’t making it auto as well, it’s because the entire grid spans the viewport’s whole height, so we need one section to grow and fill up any unused space.

I've prepared a working example on codepen. Go ahead and see what happens when you type more text.

We all love to see smooth and cool page transitions when browsing websites. I've always been fascinated by them and wanted to learn how to add those to my sites. Libraries like Barba makes it very easy to add them in our site, but they don't work well with React.

Thankfully, Framer Motion makes it possible (and easier) to create sleek and smooth page transitions in React and similar libraries and in this article, I'll show you how. Scroll down to the bottom if you want to see the final demo.

Framer Motion

The basics of Framer Motion involve creating a motion component and passing some values to set the styles we want an element to start at and animate to. So if I want to have an element to come in from the left when it's rendered, I can play with the x property. Check out the sandbox below, try changing x to y and see what happens.

<motion.div
    initial={{ opacity: 0, x: "-100vh" }}
    animate={{ opacity: 1, x: 0 }}
>
   <p>Animated text</p>
 </motion.div>

AnimatePresence

In the above example, you should notice that the top text slides in as it's being mounted, while the normal text renders without any sort of transition. The slide in is smoother, but both texts exhibit the same behavior when they are unmounted. Even though our motion.div component slides in, it doesn't slide out.

To get the desired behavior, we can import and wrap AnimatePresence around our conditionally rendered element. Now we can use the exit prop on our motion.div to have the element slide out as it's being unmounted.

<AnimatePresence>
          {isDisplayed && (
            <>
              <motion.div
                initial={{ x: "-100vh" }}
                animate={{ x: 0 }}
                exit={{ x: "100vh" }}
              >
                <p>Animated text</p>
              </motion.div>
              <p>Normal text</p>
            </>
          )}
</AnimatePresence>

Pretty cool, huh? Let's reuse the above logic to apply animation when a route is changed in this simple react application.

Starter Sandbox

Our first step is to wrap our pages inside a <AnimatePresence>. Where we wrap it will depend on where our router is rendering the pages. In our case, we'll do that in App.js file because that's where routes are defined.

AnimatePresence demands that each of its direct children needs to have a unique key prop so it can track their presence in the tree. We can use the location object from the useLocation hook by importing it from react-router-dom.

Here's how the App.js file will look like after making the necessary changes. Notice that I've kept the <Navbar/> component outside of AnimatePresence because we don't want it to animate with the whole page.

import React from "react";
import { Route, Switch, useLocation } from "react-router-dom";
import { AnimatePresence } from "framer-motion";

import Home from "./pages/Home.js";
import About from "./pages/About.js";
import Contact from "./pages/Contact.js";
import Navbar from "./components/Navbar.js";

const App = () => {
  const location = useLocation();

  return (
    <>
      <Navbar />
      <AnimatePresence exitBeforeEnter>
        <Switch location={location} key={location.pathname}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </AnimatePresence>
    </>
  );
};

export default App;

If you look closely you will notice that I've added a prop called exitBeforeEnter to AnimatePresence. This prop guarantees that our component will have unmounted (i.e. completed its exit animation) before allowing the new component to animate in. If we remove this prop the exit and enter animation will take place at the same time and we won't be able to see the enter animation while changing routes.

Now all that's left is to use a motion component in our pages and define our initial, animate, and exit props like we did earlier!

So, we'll wrap the return value of all the three pages of our site with a motion.div component and add the necessary props. We'll also add a transition prop to change the duration of the animation so that we can see it more easily. Here's how Home.js will look like after making the changes.

import React from "react";
import Banner from "../components/Banner.js";
import { motion } from "framer-motion";

const Home = () => {
  return (
    <motion.div
      initial={{ opacity: 0, x: -200 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 200 }}
      transition={{ duration: 0.7 }}
    >
      <Banner title="Welcome stranger!" subtitle="Put something witty here!" />
      <div className="container">
        <h2>Welcome</h2>
        <p>
          Lorem ipsum........
        </p>
        <p>
          Maecenas dapibus.......
        </p>
      </div>
    </motion.div>
  );
};
export default Home;

Final Demo

Conclusion

I hope you enjoyed reading the article and learned something from it.

We have only scratched the surface of what framer motion can do. In the next post, we'll use some advanced features of framer motion like AnimateSharedLayout to create a fairly complex page transition.

Below given code is how I wrote the solution at first, I'll explain it and after that discuss other methods of solving the problem.

function reverseString(str) {
    let arr = str.split("");
    arr.reverse();
    str = arr.join("");
    return str;
}

What above code does is it first uses the split function which splits the passed string object into array of strings by separating strings into substrings.

After that I reversed the array we created above using reverse method. In the last I joined all the elements of array into string using the join method and returned the string.

So that's my solution to the challenge. Now let’s talk about other ways.

To make above code shorter we can chain methods and return immediately.

function reverseString(str){
    return str.split("").reverse().join("");
}

While we're at it we can make it even shorter if we use ES6 arrow function syntax.

const reverseString = str => str.split("").reverse().join("");

Now imagine your interviewer saying, 'Great, now solve it without using these inbuilt methods with a simple for loop.'

Don't sweat yet! Below I'll tell how to do just that...

Reversing a string using for loop

We can also reverse a String without using builtin methods like reverse by using for loop.

function reverseString(str) {
    let newString = "";
    for (i = str.length - 1; i >= 0; i--) {
        newString += str[i];
    }
    return newString;
}

Okay so what I am doing in this code is at first I declared a new variable to hold our reversed string.

After that I created a for loop. The starting point of the for loop is str.length - 1. which is the index of the last character of the string. As long as the value of i is greater than or equal to zero the loop will go on and we decrement the value of i with each iteration.

Checkout the pseudocode explaining the process below.

For example let’s suppose the string passed to the function is “hello”.

Now hello’s length equals 5
For each iteration: i = str.length – 1 and newString = newString + str[i]
First iteration: i = 5 – 1 = 4, newString = “” + “o” = “o”
Second iteration: i = 4 – 1 = 3, newString = “o” + “l” = “ol”
Third iteration: i = 3 – 1 = 2, newString = “ol” + “l” = “oll”
Fourth iteration: i = 2 – 1 = 1, newString = “oll” + “e” = “olle”
Fifth iteration: i = 1 – 1 = 0, newString = “olle” + “h” = “olleh”
End of the FOR Loop

Aaaand in the last we returned the reversed string.

Hope you got that! If not then don’t hesitate to comment and I’ll be more than happy to help.

Still awake? Let's see yet another method to reverse your strings.

Reversing string using Recursion

In this method, I will use two methods: the String.prototype.substr() method and the String.prototype.charAt() method.

The substr() method returns the characters in a string beginning at the specified location through the specified number of characters.

"hello".substr(1); // "ello"

The charAt() method returns the specified character from a string.

"hello".charAt(0); // "h"

Now the whole code,

function reverseString(str) {
    if (str === "") { // This is the terminal case that will end the recursion
        return "";
    } else {
        return reverseString(str.substr(1)) + str.charAt(0);
    }
}
reverseString("hello"); // olleh

Explanation:

First Part of the recursion method

  We need to remember that there won’t be just one call, we’ll have several nested calls

  Each call will return       reverseString(str.subst(1))   +    str.charAt(0)

  1st call – reverseString("Hello")   will return   reverseString("ello")    + "h"
  2nd call – reverseString("ello")    will return   reverseString("llo")      + "e"
  3rd call – reverseString("llo")     will return   reverseString("lo")       + "l"
  4th call – reverseString("lo")      will return   reverseString("o")        + "l"
  5th call – reverseString("o")       will return   reverseString("")          + "o"

Second part of the recursion method

  The method hits the if condition and the most highly nested call returns immediately

  5th call will return reverseString("") + "o" = "o"
  4th call will return reverseString("o") + "l" = "o" + "l"
  3rd call will return reverseString("lo") + "l" = "o" + "l" + "l"
  2nd call will return reverserString("llo") + "e" = "o" + "l" + "l" + "e"
  1st call will return reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h"

In the end we get the reversed string.

So this one was heavy and I doubt if someone could come up with this solution on his own in interview. If you don't understand this solution right now its totally fine.

Now continuing on our tradition from above, here's the shortened version of above code using arrow functions and ternary operators.

const reversedString = str => (str === "") ? "" : reverseString(str.substr(1)) + str.charAt(0);

Parting words

Hope you learned something from the article. Reversing a string is a simple problem which can be useful in solving more complex problems in interview or maybe if you are lucky enough you'll be asked just to reverse a string ;)

See you in next post, till then Happy Coding!

In my personal projects when things get more complicated than that, I like to immediately jump to a state management library. One of my favorites lately is easy-peasy.

It builds on top of Redux, and it provides a simpler way to interact with state.

I like to keep my code as simple as possible. Simple is understandable. Simple is beautiful.

Complexity should be avoided at all costs, and if possible hidden away in libraries that expose a simple interface to us. It’s the case of this library, and that’s why I like it!

Install it using:

yarn add easy-peasy

First of all we need to create a store. The store is the place where we’ll store our state, and the functions needed to modify it.

Create the store in the file store.js in the root of your project, with this content:

import { createStore, action } from 'easy-peasy'

export default createStore({})

We’ll add more things to this file later.

Now let's wrap our React app into the StoreProvider component provided by easy-peasy. It depends on what you use. With create-react-app for example, I'll add this to my index.js file:

//...
import { StoreProvider } from 'easy-peasy'
import store from '../store'

ReactDOM.render(
  <React.StrictMode>
    <StoreProvider store={store}>
      <App />
    </StoreProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

This operation makes now our store available in every component of the app.

Now we're ready to go in the store.js file and add some state, and some actions to change that state.

Let’s do a simple example. We can create a name state, and we create a setName action to change the name:

import { createStore, action } from 'easy-peasy'

export default createStore({
  name: '',
  setName: action((state, payload) => {
    name = payload
  })
})

Now inside any component of our app we can import useStoreState and useStoreActions from easy-peasy:

import { useStoreState, useStoreActions } from 'easy-peasy'

We use useStoreState to access the store state properties:

const name = useStoreState((state) => state.name)

and useStoreActions to access the actions we defined:

const setName = useStoreActions((actions) => actions.setName)

Now we can call this action whenever something happens in our app, for example if we click a button:

<button
  onClick={() => {
    setName('newname')
  }}
>
  Set name
</button>

Now any other component that is accessing the state through useStoreState() will see the value updated.

This is a simple example but it all starts from this. We can add as many state variables and as many actions we want, and I found that centralizing it all to a store.js file makes the application very easy to scale.

Hi folks!

First of all, I want to thank the Hashnode team for providing us with the opportunity to get out of our comfort zone (or should I say Tutorial Hell 😉) and actually build and deploy something into the real world. This is my first ever hackathon and I am very excited to share what I created with all of you.

I am Jalaj, a student from India currently pursuing my bachelor's degree. I started contributing to Open source last year in December since then I've contributed to 10+ repositories with over 30+ merged pull requests.

Working in Open Source has taught me a lot of things and I would recommend everyone to try it, we get to learn to work with other people, learn and improve by reading code and a lot of other things which one simply can't get by just watching a tutorial on Youtube or Udemy and creating simple and trivial apps.

✨ Introducing GiTrack

• Demo
• Github

I like to keep track of things and while contributing simultaneously to various repositories, it sometimes gets difficult to keep track of assigned issues and pull requests. To solve that problem, I built GiTrack, a website for Open Source Enthusiasts to keep track of issues assigned to them and arrange them in a nice looking Kanban board.

I wanted to create something useful but also simple enough for everyone to use, that's why I went with a Kanban board (coz everyone's familiar with it? 😅) besides that I also decide to add a profile page to the website that shows some useful statistics to the user such as the Total number of their contributions, issues they have opened, pull requests they have created, their current streak and a lot more...

Github has their own project board for a per-project basis, but the idea behind GiTrack is to be an issue tracker for all repositories, owned or otherwise, plus you get some nice statistics.

Here's what I had in mind when I started building the website:

• It should allow users to log in via Github. (who wants to type their email and password?)
• It should have a beautiful homepage that lists features of the website.
• It should allow users to fetch currently assigned issues directly into the board.
• Board state should be saved every time a user makes any changes. So that the next time they visit they can start where they left.
• Profile page should list different stats that might be useful for users.

I used AWS Amplify to host the site. Amplify's CLI is a dream come true for developers. Just one command and the site is deployed live.

💻 Screenshots

Light mode:

Home page

Login Page

Statistics

Issue Tracker

Dark mode:

Home page

Login page

Statistics

Issue tracker

👀 Features

• Issue Tracker
• Github Statistics
• Fetch issues assigned to you directly from Github.
• Client Side Storage using IndexedDB for super fast page loads.
• Persistent board state, so no worries about accidentally closing the page.
• Beautiful UI
• Open Source (checkout code on github)
• One Click Login using Github OAuth

Here's a quick video showing how to use the issue tracker.

🏢 Build Process

I really wanted to get out of my comfort zone and build something with the technologies I've never used before. In the tech stack listed below, I was only familiar with Typescript before I started this project.

👩‍💻 Tech Stack

• Next JS
• Typescript
• AWS Amplify
• Firebase
• Chakra UI

I read about this hackathon at the starting of February and I created a repo and pushed the initial commit the on 14th. But after that, I started procrastinating didn't do anything for the next few days. It was 22 when I got some confidence boost and started working on the project again.

I used OpenChakra to quickly create a basic boilerplate for the pages and edited it to fit my needs. I chose firebase to do the authentication and storage. I really wanted to use Amplify for auth but they don't have Github OAuth. Anyways, after getting done with a basic MVP of the project I deployed it on Amplify using its CLI.

Here are some of the packages I used:

• nextjs : for building the app
• typescript for writing type safe code
• react-trello for issue tracker
• chakra-ui as a UI framework
• firebase for auth and storage
• localforage for storing data in indexedDB
• octokit as a github rest client

🏆 Challenges faced while developing

• Persist board state: I wanted to store board state every time a user makes any change to the tracker board. I could use firebase for this but I wanted to keep it fast. So my only option was to store data in the browser. As the data was complex I was having trouble storing it in localstorage, I did some research and decided to use IndexedDB.

• As I wasn't requesting any special permissions while using GitHub OAuth I had to find an alternative way to get assigned issues for the user. I did some research and used github issues and pull requests search endpoint to get the required data.

• Persist login state: Firebase provides a function just for this purpose but it wasn't working as I expected it to be, it logged the user in without checking if there is data in IndexedDB or not so I had to modify it with added logic of fetching the state from indexedDB first and if there is no data in DB then don't log the user in.

🌟 What's Next

• Add Dark Mode
  • Update 3/3/21: Dark mode added. (Check Screenshots above)
• Allow users to get issues they recently commented on.
• Allow users to get their merged pull requests.
• Keyboard shortcuts

🥳 Conclusion

All in all, it was fun working on the project in a strict timeline. Once again thanks to the folks over at Hashnode for this opportunity.

Thanks to the reader for reading this far, I hope you like the app, and please don't hesitate to message me or comment below if you have any feedback.