The latest articles on DEV Community by Martin Fimia (@mfimia). https://dev.to/mfimia https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F774990%2F5da2f2c6-2ec4-4985-9c41-379166a5580a.jpeg https://dev.to/mfimia en Martin Fimia Tue, 04 Jan 2022 17:13:01 +0000 https://dev.to/mfimia/keyfessor-22gj https://dev.to/mfimia/keyfessor-22gj <h3> <a href="https://morning-brushlands-04377.herokuapp.com/" rel="noopener noreferrer">Link to demo</a> </h3> <h3> What is this? </h3> <p>Keyfessor is a great app to enhance your typing skills. It is made of 10 texts chosen randomly (a few of them coming from React Docs (turns out they are very typeable :D) in English language.)</p> <p>You will have the opportunity to test yourself and find out how fast and how accurate you can type. The app includes inmediate feedback with a digital keyboard and sound cues that will let you know if you pressed the right key.</p> <p>Once you have completed all 10 texts (it should take you around 10 mins) Keyfessor will let you know what's your title. "Keyboard God", "Drunk and Reckless", "Johnny Two Fingers" or "Journalist" are just a few of the possible titles that you could get. There are many more :D.</p> <p>Last but not least, you will be able to see leaderboard with scores submitted by other typers and of course to submit your score and show off your typing skills.</p> <h3> Features: </h3> <ul> <li>Speed tracking</li> <li>Dark mode enabler</li> <li>Accuracy tracker</li> <li>Timed laps</li> <li>Endgame scoreboard</li> <li>Leaderboard</li> <li>Endgame title</li> </ul> <h3> Requirements: </h3> <ul> <li>QWERTY keyboard</li> <li>Minimum screen width: 800px</li> <li>Minimum screen height: 510px</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feie1rau6ppj9r9xvb8ej.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feie1rau6ppj9r9xvb8ej.png" alt="Keyfessor title: Speedy Gonzalez!"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftowokf44abbfhrqbhtn7.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftowokf44abbfhrqbhtn7.png" alt="Endgame stats"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcxtymhmi7vq9gsd4dbv.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcxtymhmi7vq9gsd4dbv.png" alt="Keyfessor title: "></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flfdxvjt39u5h9w0kb48d.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flfdxvjt39u5h9w0kb48d.png" alt="Description"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fncum0p59m1fz8t5oyf36.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fncum0p59m1fz8t5oyf36.png" alt="Game main screen"></a></p> <p><iframe src="https://player.vimeo.com/video/661973512" width="710" height="399"> </iframe> </p> <h2> Overview of My Submission </h2> <h3> Submission Category: </h3> <p>Choose Your Own Adventure</p> <h3> Link to Code </h3> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/mfimia" rel="noopener noreferrer"> mfimia </a> / <a href="https://github.com/mfimia/keyfessor" rel="noopener noreferrer"> keyfessor </a> </h2> <h3> MERN app that you can use to improve your typing skills </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Keyfessor</h1> </div> <p>Keyfessor is a great app to enhance your typing skills. It is made of 10 texts chosen randomly (a few of them coming from React Docs (turns out they are very typeable :D) in English language.)</p> <p>You will have the opportunity to test yourself and find out how fast and how accurate you can type. The app includes inmediate feedback with a digital keyboard and sound cues that will let you know if you pressed the right key.</p> <p>Once you have completed all 10 texts (it should take you around 10 mins) Keyfessor will let you know what's your title. "Keyboard God", "Drunk and Reckless", "Johnny Two Fingers" or "Journalist" are just a few of the possible titles that you could get. There are many more :D.</p> <p>Last but not least, you will be able to see leaderboard with scores submitted by other typers and of course to submit…</p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/mfimia/keyfessor" rel="noopener noreferrer">View on GitHub</a></div> </div> <h3> Technologies used: </h3> <p>This is a full-stack MERN application:</p> <p>The frontend has been built with ReactJS and using components from MUI library.<br> The backend has been built with NodeJS.<br> The app connects to MongoDB Atlas database using express and it has been deployed in Heroku</p> <h3> <a href="https://morning-brushlands-04377.herokuapp.com/" rel="noopener noreferrer">Link to demo</a> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa3nd213tyze3o5rpijgi.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa3nd213tyze3o5rpijgi.gif" alt="Type!"></a></p> atlashackathon mongodb