Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
32
Curtis
@webguy83

All comments

  • Curtis•930
    @webguy83
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the successful integration of the Minimax algorithm to create a challenging AI opponent in the Tic Tac Toe game. This accomplishment highlights my ability to apply complex algorithms in a real-world application, ensuring that the computer opponent is both challenging and fair. It was a significant achievement to see the algorithm not only function correctly but also provide a gaming experience that truly tests the player’s strategic thinking. The seamless user interface that adapts across various devices and screen sizes is another aspect I take pride in, as it demonstrates my commitment to user-centric design.

    For future projects, I would aim to implement a more modular and scalable architecture from the start. While the current implementation works well for a relatively simple game like Tic Tac Toe, a more modular approach would facilitate easier updates and feature additions. I would also explore more advanced state management solutions, such as using Redux or Context API in combination with custom hooks, to handle the application's state more efficiently and avoid some of the complexities encountered with local state management.

    What challenges did you encounter, and how did you overcome them?

    A significant challenge I faced was managing state persistence across sessions to ensure that the game state, including the board configuration and scores, was saved accurately in local storage and restored correctly upon refreshing the page. This required a robust mechanism to handle state updates and side effects effectively. Initially, I encountered issues where state values were not persisting as expected, leading to inconsistencies in the game’s state after a page reload.

    To overcome this, I developed and refined custom hooks specifically designed to manage interactions with local storage. These hooks were instrumental in encapsulating the logic for reading from and writing to local storage, ensuring that the state was consistently synchronized with the stored data. I implemented mechanisms to detect changes in the game state and update the local storage accordingly, which helped maintain the integrity of the game state across sessions.

    By centralizing the state management logic within these custom hooks, I was able to simplify the overall state handling and reduce the complexity of the codebase. This not only resolved the persistence issues but also improved the maintainability and scalability of the application. The solution allowed for a seamless user experience where the game state was reliably preserved, providing a consistent gaming experience even after a browser refresh or reopening the game.

    Tic Tac Toe AI Challenge: React, TypeScript, and Minimax Algorithm

    #react#typescript#sass/scss
    1
    Curtis•930
    @webguy83
    Posted 12 months ago

    Love to hear feedback on this. Can you beat the CPU? Used the minimax algorithm and it's mighty tough. I haven't been able to!

  • Elisabeth Erkekoglou•180
    @elic4vet
    Submitted almost 2 years ago

    Rating app

    3
    Curtis•930
    @webguy83
    Posted almost 2 years ago

    Using React for this kind of simple widget is definitely way beyond overkill. A much more simple approach to this can be to make a simple HTML form with 5 radio buttons along with a submit button and using css to style them. The only JavaScript you'd need is an submit button handler to detect the value selected. This functionality is already done for you using radio buttons.:). No need to bring React in to complicate it.

  • yassine-ramla•520
    @yassine-ramla
    Submitted almost 2 years ago

    Connect-Four-game using just html, css and js.

    1
    Curtis•930
    @webguy83
    Posted almost 2 years ago

    Good approach to this :). I find it would be cool to maybe delay the CPU putting its peg down right after the player animation done. So far I haven't lost to the CPU yet! 4-0 😁. I will try the desktop version when I have the chance.

  • Bassey Akan•230
    @hamzabell
    Submitted almost 2 years ago

    Responsive Web app using react and scss

    #react#redux#sass/scss#redux-toolkit
    1
    Curtis•930
    @webguy83
    Posted almost 2 years ago

    Hi Bassey I am testing this on my mobile but nothing seems to work when I try to create a board. The columns button also seems broken too. Did you test on mobile or desktop mainly?

    Marked as helpful
  • Parth Manhas•340
    @parthmanhas
    Submitted almost 2 years ago

    Invoice App Angular, Tailwind CSS, RxJS

    #angular#tailwind-css
    1
    Curtis•930
    @webguy83
    Posted almost 2 years ago

    Hi Parth, good effort on this beast of a project. Don't worry about the need for NGRX as it's only needed when RXJS solutions aren't good enough. This happens when applications get to enterprise level. Usually then it's best to look into NGRX so need to pursue it on these challenges.

    I just finished doing this project too and I wanted to share some things I noticed when seeing your app:

    • on my mobile device the layout breaks pretty bad especially when displaying the card. Text is crashing into each other

    -it also breaks on the detail invoice view. If you see the Figma they do something quite different on mobile. Perhaps look at a responsive solution for that. In Angular I would advice you use the Breakpoint service to dynamically inject classes on breakpoints. You can look it up in the docs.

    • I didn't even see a Mark as Pending button on mobile view as it was cut off completely. This was only visible on desktop. A mark as pending button isn't needed anyway. Anytime a user saves and submits a form it goes to pending always.

    • they mention ids on the cards should be 2 numbers followed by 4 letters. Using the index array value isn't a good solution for ids and can be a real source of bugs

    • when the slidenav section is out it creates two scroll bars one on it and one behind. I even saw the header scroll down and the content behind the slideout nav was showing from behind it. Very visible from mobile view.

    • in your form instead of Payment Due you can just use Payment terms selection box and it to the invoice date to calc the payment due. On a sidenode for your Angular Material calender you can inject your colour themes into it. I recommend using Angular Material theming for the colours. It is amazing.

    • your form needs validation messages for invalid email, forms not having content, etc

    • I also noticed tons of vw being used on widths as well. This could be the source of your issues on mobile device. It's always best to avoid using vw for pretty much everything and never use hard coded widths at all like px, rem, em, etc.

    You can look up Kevin Powell on YouTube as he has some amazing tutorials on fixing responsive issues. All the best!

    Marked as helpful
  • lsh•160
    @SH-Lee2
    Submitted over 2 years ago

    typescript + react.js + tailwind css + context API

    #react#typescript#tailwind-css
    1
    Curtis•930
    @webguy83
    Posted over 2 years ago

    Looks really good and you did a good job matching up the Figma graphics! I just noticed that in your settings the decrement arrow is now lowering the value in all of your form fields for the time. Other than that looks pretty solid.

  • Brendan•1,120
    @OneManBanned
    Submitted over 2 years ago

    Calculator app solution

    #bem#sass/scss#accessibility
    1
    Curtis•930
    @webguy83
    Posted over 2 years ago

    A lot of the calculator is cut off on my mobile device. I haven't taken a look at your CSS yet but I suspect you are using widths for your elements. Be sure to look at Kevin Powell's responsive tips as setting widths on elements is a very bad idea and should be the last resort. As far as the functionality goes it seems to work as expected :). The theme picker at the top also has issues when I try to change it. Maybe it's also only on mobile but it's difficult to change it.

    Marked as helpful
  • AbdeRaouf Zemmal•680
    @abdraoufx
    Submitted over 2 years ago

    Responsive Rock Paper Scissors Bonus Design With React TS & Tailwind.

    #react#sass/scss#tailwind-css#typescript#animation
    2
    Curtis•930
    @webguy83
    Posted over 2 years ago

    Looks like a good start. :). I noticed when you resize the browser from desktop to mobile dimensions though the modal off the screen comes shooting up suddenly from left to the top of the screen. The modal itself on mobile just seems a bit off. Great work!

    Marked as helpful
  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline
    Submitted almost 3 years ago

    Fylo landing page with two column layout

    7
    Curtis•930
    @webguy83
    Posted almost 3 years ago

    Looks great overall! I will say it does break a bit when you scale the viewport > 1500 pixels and upwards to 2000 and beyond. The area above the "Stay productive, wherever you are" text seems to break apart and there is a white area behind it. Mobile view appears to be pretty solid. Gj!

    Marked as helpful
  • Janos Takacs•230
    @JT1974
    Submitted almost 3 years ago

    Rock-paper-scissors game built with React styled components

    #react#sass/scss#styled-components
    1
    Curtis•930
    @webguy83
    Posted almost 3 years ago

    Looks pretty solid overall on my mobile device. Haven't tested it on my desktop yet but great so far and closely resembles the mockups. For a heading to fix the accessibility issue you could probably wrap one around the logo image at the top. Only other thing I would mention is instead of the outer glow around the winner would be to try and create they fading ripple effect from the mockups. Quite a bit more challenging, at least for me it was :D. Also is it not possible to get a tie? I tried over and over haha😂.

    Marked as helpful
  • Ollie•580
    @ohermans1
    Submitted almost 3 years ago

    Pomodoro Timer | React

    #bem#react#sass/scss
    1
    Curtis•930
    @webguy83
    Posted almost 3 years ago

    On my mobile the navigation bar does not work when you try to toggle on the other options. Also the model doesn't seem to expand the full width of the device I am using. I have yet to check the desktop version though. Also I believe the timer is supposed to count down from the values instead of up but its not too bad the way you had it. Your font options don't seem to update the application state either.

    Marked as helpful
  • omared250•150
    @Omared250
    Submitted almost 3 years ago

    Responsive country-render page, HTML5, CSS3, Vanilla JS.

    #accessibility#styled-components#fetch
    2
    Curtis•930
    @webguy83
    Posted almost 3 years ago

    There are a few issues here:

    I tried filtering any country and it's broken and doesn't yield any results even if I type in a country correctly. When I am on the broken results screen and in dark mode it doesn't extend all the way to the bottom of my screen. When you are at the broken screen there is no way of getting back the countries unless you use the Regions dropdown and manually load in more

    Header bar should extend the full width of the users screen accroding to the mockup. Font size is off on the header text Since you load your api call with all the countries at the beginning of the app there shouldn't be a need for further api calls when you filter the region (big performance implications) You have JavaScript errors in our console Look at Macau and you see it has a capital of undefined

    These here are my opinions: Having a modal screen you have to be careful with them. They generally work with as little data as possible but if you look at the requirements for this project it has a lot more data to be shown which would be too much for the modal to handle and in this case it makes sense to have a details page. The buttons also in your modal for the Border Countries don't really look like buttons at all, just simple text.

    Also look into the report with the accessbility and html issues too. Hope it helps!

  • Farhan Kolad•320
    @farhankolad12
    Submitted almost 3 years ago

    Rock Paper Scissor Game Using HTML, CSS, Vanilla JavaScript

    #vanilla-extract
    1
    Curtis•930
    @webguy83
    Posted almost 3 years ago

    A few things:

    I only viewed this on mobile so far so I will comment on that. Your game pieces are not aligned properly on the background triangle. They don't the same look and feel as the mockups. You forgot to add the Rules modal popup to display the rules. When the player loses you are supposed to subtract 1 point from the score. The background radial gradient of the app should be top centered as shown on mockups. In fact you didn't even make a radial one it looks linear to me.

    Marked as helpful
  • Carlos Damian Perez•1,930
    @caarlosdamian
    Submitted about 3 years ago

    React Typescript + Scss application

    #typescript#sass/scss
    1
    Curtis•930
    @webguy83
    Posted about 3 years ago

    Doesn't appear to be responsive on my mobile and when you type in an amount of $66 with a 10% tip for example the layout breaks quite a bit. Seems like your are close though!

  • Kyaw Soe Han•100
    @Kyawsoe40
    Submitted about 3 years ago

    Rock-paper-scissors game TWICE ver using HTML,CSS,JS

    1
    Curtis•930
    @webguy83
    Posted about 3 years ago

    A few things:

    Some html accessibility and validator errors in your report.

    When you lose you are supposed to lose one point. Also on mobile devices the modal should be full screen with the close button in it at the bottom and the Rules button centered at the bottom of the app on mobile. The other thing I would add is the radial gradient background starting from the top of the app.

    Creative visual effects I must say! Good work.

  • Ramesh Kumar Munjal•580
    @rameshkmunjal
    Submitted about 3 years ago

    VanillaJs

    3
    Curtis•930
    @webguy83
    Posted about 3 years ago

    Yeah it's very broken on my mobile device too. Be sure to never make fixed widths and heights in pixels unless you absolutely have to. I see in your CSS you have a lot of that.

  • chiziivictor•60
    @Chiziivictor
    Submitted about 3 years ago

    ReactJS, styled-components, react-router, loading-skeleton...

    #react#react-router#styled-components#fetch
    1
    Curtis•930
    @webguy83
    Posted about 3 years ago

    Hmm you have some errors going on when I paginate through. Like I go navigate around and search a country it seems to break the app as the country I typed in does not show up. Also when you navigate after detail view back to the main view by clicking the button I don't see any of the other countries to select. Saw some api error calls in the network tap, looks like some invalid path. Also you have some console.log statements to remove as well.

    If you move your browser window up and down you will see the back button get hidden behind the toolbar at the top when you make it smaller.

    In my opinion paginate usually works best when dealing with data tables and lots of tabular data. Not sure it works well in this case.

    Marked as helpful
  • Jakub Krwawicz•320
    @kerminek
    Submitted about 3 years ago

    Rock Paper Scissors App with awesome animations using react-spring

    #react#tailwind-css#typescript#accessibility
    2
    Curtis•930
    @webguy83
    Posted about 3 years ago

    Thanks for reviewing mine and yours looks pretty great too. Love all the animations from start to finish as well! These are things I could probably do a lot more of.

    Just a few minor things I noticed:

    -The background image you have it as a linear gradient when I think the screenshot had it has a radial centered on the top.

    -in desktop view the modal stretches the full length of the viewport. I think in the requirements it had it as a smaller modal window on desktop version if I recall

    -there is a bug if you are on your desktop and play your game in the mobile breakpoint view then click Play Again, then stretch out your window into desktop view the pegs will be off aligned from the background triangle.

    Love the use of React Spring. I will take a look at this framework too. :D

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub