@samuel-aduSubmitted 30 days ago
Latest solutions
Responsive Hangman Game App
#accessibility#next#react#tailwind-css#typescriptSubmitted 4 months agoI will like a code review, if possible. I intend to refactor the code overtime.
ReactJs, TailwindCSS, Typescript, Axios, Express, NodeJs
#express#react#tailwind-css#typescript#nodeSubmitted 5 months agoI think I may need help with the backend. However, I hope to explore more on this.
Kanban Task Management App
#next#react#redux#tailwind-css#zodSubmitted 8 months agoI will like help with how to revalidate path of a dynamic url.
Responsive web lay out using css grid and flexbox
#accessibility#react#tailwind-css#nextSubmitted about 2 years ago
Latest comments
- @mrvicthorPosted 26 days ago
@samuel-adu Fantastic work with the layout. Looks good.
1 - @jdrodriguez2707Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
It was great to use the useState hook in React to manage different states of the component and perform conditional rendering based on them. I also used it to manage errors, display them to the user, save information, and share it between components. This helped me practice and understand the various applications of this hook.
What challenges did you encounter, and how did you overcome them?It was challenging to figure out how to use React's state to make the site interactive and dynamic. However, thanks to AI tools like GitHub Copilot, I was able to succeed. I want to continue learning about React and its hooks to improve my skills and build more complex applications.
@mrvicthorPosted 4 months agoHi Riquez, excellent work here. However, the keyboard navigation does not work on the rating. Also, after I selected a rating, the state did not update/show any thank you message.
0 - @RiscloverSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Whew - I put a bit of effort into this one! Some of the things I did or paid attention to during the development of Hangman:
- Added some subtle animations to make the app a little more lively/fun. Nothing major. For example, on the 'How to Play' page, each of the 'How to Play' steps zooms onto the page on load, and on the main game page, when the player loses a life, the life meter animates instead of jumping lives.
- Added keyboard accessibility: Users are able to completely use their keyboard if they wish, including pressing
Escto open the Pause menu, pressingEnterto start the game, and pressing letter keys to play a letter. I had to use a menu focus package to ensure that, when the user tabs through the pause menu, the tab focus stays on the menu buttons only (rather than going off into the rest of the app behind the menu). - Error message when category is out of words: When the current category runs out of words and the player tries to play that category again (i.e. by pressing 'Play Again' or by clicking that category's button), a message appears telling the player that the category is out of words, and to either choose a different category or to refresh the game to start fresh. When the player presses the 'Ok' button, they are taken to the Categories page to choose a new one.
- Replaced 2 categories: 'Sports' and 'Animals' were just a little too boring for me. I replaced them with 'Difficult Words' (which has words that are notoriously difficult to play in Hangman), and 'Wizarding World' (which is a Harry Potter-themed category that includes names, quotes, and phrases).
- Close design match: I had access to the Figma design files, and I put them to good use, getting the designs as close as possible across all 3 screen sizes.
- Word duplication rules: The winning word/phrase doesn't get played again if a) the word/phrase was just played, or b) the player has already won with that word/phrase.
- Line separations: I utilized a function to ensure that the winning word/phrase fits, no matter the screen size, by splitting the words up under certain conditions.
- Tests: I added automated tests for all of my components and hooks.
- CSS Variables: I utilized CSS variables to assist with colors that were used multiple times.
I also did my best to pay attention to best practices, including utilizing 'Separation of Concerns' by separating logic into custom hooks, adhering to 'DRY' and 'Single Responsibility Principle', using barrel imports, organizing my files with a folder structure, and more.
Feel free to check out my code and critique it - I'm always down to hear how I can improve!
@mrvicthorPosted 4 months agoHi @Risclover, brilliant work here. However, while testing the app, all letters appear to be hidden. Hence, no hint on what the actual word/phrase may be. Can you investigate this. Thanks
0 - @samuel-aduSubmitted 7 months ago@mrvicthorPosted 7 months ago
Fantastic work here Samuel. Looks really good and it's also mobile responsive.
1 - @saul-gustavoSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am very happy to have finished this project, it is the first landing page I have made with the mobile first method.
Estoy muy feliz de haber terminado este proyecto, es la primera página de aterrizaje que hago con el método mobile first.
What challenges did you encounter, and how did you overcome them?The mobile first method
What specific areas of your project would you like help with?I have to improve on adapting it to mobile devices.
Tengo que mejorar en adaptarlos a dispositivos mobiles, responsive desing
@mrvicthorPosted 7 months agoI have just had a look at your solution and it looks awesome. It's also mobile responsive.
Marked as helpful1 - @samuel-aduSubmitted 10 months ago
