As a productivity nerd, I am always looking for ways to speed up my workflow. One recommendation I've heard time and time again is to rely less on the mouse and leverage the keyboard as much as possible. Keyboard shortcuts may seem like a minuscule time-saver but they can actually have a profound impact on your overall productivity.
I would like to introduce Shortcut Search 🚀
This is an app that provides a searchable catalog of commonly used keyboard shortcuts to help boost productivity.
There you can find shortcuts for both Windows and Mac operating systems. The cool part of the app is that you can dynamically search for shortcuts by pressing any key combo you think may be a shortcut. The search is smart enough to narrow down your results based on each individual key that you enter.
How it Works ✨
- Step 1: Choose an operating system (Mac or Windows)
- Step 2: Select a Category
- Native - Shortcuts to use within the operating systems ecosystem.
- Browser - Shortcuts to use across browsers like Chrome and Firefox.
- Document - Shortcuts to use when working with text. (i.e. Word documents, emails, Slack messages, etc.)
- Step 3: Decide on a View
- Table View - Presents all the shortcuts available in a tabular form. This is filtered based on the selected category and operating system.
- Keyboard View - Interactive area where you can press any key (max of 4) to dynamically search for a shortcut. This is a filtered search based on the selected category and operating system.
How I Came up with the Idea 💭
Recently, I was drafting an article on useful shortcuts to improve productivity. As I was curating my list of shortcuts, I realized that it was starting to grow into a long list and would be difficult to remember them all. That's when the lightbulb 💡 went off for my hackathon project idea! I realized that having an easily searchable list of shortcuts would help me out a lot and I figured that I should create something that could also help out others who may want to quickly locate a shortcut without sifting through docs.
I derived a lot of inspiration from Wes Bos' keycode.info and John W. Comeau's - Operator Lookup tool.
Implementation Details 👷🏽♀️
This project is built with modern JS (ES6+) and React with hooks. Material-UI is the only third-party library I imported into the project. Because I wanted to focus more on the functionality rather than the design of the app (since design is not my strong suit 😅) I opted with Material-UI which comes pre-built with its own component library and default color scheme.
Because there are overlapping shortcuts depending on what application you are using, I had to categorize the shortcuts data to be able to accommodate all scenarios. I did face a few challenges along the way, but thankfully I was able to pivot early on in the project and it did not deter my progress that much.
Tech Stack 💻
- React (Bootstrapped with Create React App)
- Material-UI
El Fin 👋🏽
I hope this app provides an easy way for everyone to be able to find common shortcuts and rely less on the mouse.
Feel free to check out the Github repository and Shortcut Search site!