Typer ⌨️ | Experience Typing in Style. Typer is a React-based keyboard and is inspired by a Neumorphic style which gives it a 3D Modern Flair.
- Interactive Keyboard
- Colorful Themes
- Playful Music for every Theme
- Mechanical Keyboard Sound
I faced so many challenges while during this project and I got to learn a lot from this project namely:
- How to style SVGs using inline styling i.e., make SVGs into components so that they can be styled easily.
- The true power of React Components, I used the Key Component to its full potential as I reused it to make different types of keys with different width and height all from one single component.
- While designing and developing themes, I got to learn how to use props properly and with that use inline styling to style different elements.
- I learnt about Context in React, which helped me a lot as because of that I didn't had to pass the theme to every single key and without Context, that would have been the end of me.
- I learnt how to dynamically import and use audio files by storing them in the public folder and using them through PUBLIC_URL.
Clone the project
git clone https://github.com/HibbanHaroon/typer.git
Go to the project directory
cd typer
Then,
cd virtual-keyboard-app
Install dependencies
npm install
Start the server
npm run start
Thanks to Ludwig Ahgren's playlist for a few music choices, and my dearest friend Sanie to help me edit the Key Sound. @-}---