Skip to content
OverviewSolutions
16
Comments
16
P

Antoine

@super7ramp330 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    toshirokubota•1,340
    @toshirokubota
    What challenges did you encounter, and how did you overcome them?

    It took a while for me to come up with the 'state-machine" of the game. I did it in a ad-hoc way and I wonder if there is a simpler and cleaner way.

    There was an issue with a grid layout with 3 items using tailwind. I had to handle this case (# of players being 3) separately.

    As always, I had a hard time implementing responsive layout and designs that look exactly like the Figma design.

    What specific areas of your project would you like help with?

    Any feedbacks to improve the design/code is highly appreciated. Any comments/encouragements are also welcome!

    memory game with React

    #react#sass/scss#tailwind-css#typescript#vite
    1
    P
    Antoine•330
    @super7ramp

    Nice job!

    The game works well overall and looks similar to the Figma design 🙂

    Here are a few remarks on your solution. Hope you'll find them useful!

    Look and feel

    • Player has to click after the second tile has been opened for the game to continue: It would be more user-friendly if the game would continue after a small timeout 😉
    • When the modal menu is active, one may still click the tiles below, which is a bit confusing 🤔
    • Tile contents do not scale with their containers. It might be less fluid but simpler to scale both content and container at certain breakpoints using media queries.
    • Concerning your issue with the grid layout using Tailwind, I cannot say since I haven't tried Tailwind yet 🙄 In any case you may get back to implementing the grid by hand with e.g. grid-template-columns 👩‍🎨

    Code

    • Good job at identifying that the game logic may be implemented with a state machine 👍 You may simplify its implementation by using objects (see this example) or by using a dedicated library like XState.
    • You may consider extracting the logic from the MemoryGame component, e.g. to make it testable or just to simplify the component.
    • At last, I would try to avoid the useEffect hook if possible: All the game state changes are triggered by a simple user click so useEffect shouldn't be necessary, except for the timer cleanup ⏲
  • Korney Chervonenko•1,080
    @KorneyChervonenko
    What are you most proud of, and what would you do differently next time?

    Instead of rendering the entire list of countries it renders only the countries within viewport. Adding and removing country card in viewport can be done by mouse wheel rotation. Also I use memoization for country card. In addition it fetches countries data from gzip-archive.

    REST Countries API with color theme switcher

    #fetch#react#react-router#redux#sass/scss
    1
    P
    Antoine•330
    @super7ramp

    Preview site is currently labeled as unsafe, see report.

    It's unfortunate because it looks there were interesting ideas put in this project 🥲

  • P
    Antoine•330
    @super7ramp

    Nice work :)

    Solution works flawlessly!

    A few minor remarks on appearance:

    • Field height is a bit small compared with the design
    • Number fields have their up/down arrows, I'm not sure it was intended in the design
    • Hovering "Repayment" / "Interest Only" make them grow a little which "moves" the page a bit

    Hope it helps!

  • OlgaMinaieva•80
    @OlgaMinaievaWebDev
    What are you most proud of, and what would you do differently next time?

    How to implement modals with React portals for better UI layering

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

    How to manage state globally using React Context for cart items and quantities

    React Context API - For global state management of cart data

    #react#tailwind-css
    1
    P
    Antoine•330
    @super7ramp

    Nice work 🙂

    I find your approach with React Context interesting. It could be really useful for large projects with lots of components and shared states. Thanks for sharing this!

    I learned the existence of React Portals thanks to you 🙂 As an alternative, you may consider using the native <dialog> element with a useRef to manage the modal:

    import {useRef} from "react";

function App() {
    const modalRef = useRef(null)
    const showModal = () => modalRef.current?.showModal()
    const closeModal = () => modalRef.current?.close()
    return (
        <>
            <button onClick={showModal}>Show modal</button>
            <dialog ref={modalRef}>
                <h2>Hey!</h2>
                <button onClick={closeModal}>Close modal</button>
            </dialog>
        </>
    )
}

export default App

    Concerning the logic, implementation works as expected, expect for one bug: Items in the confirmation order modal are removable, whereas they should not. Once it's ordered, it's ordered 😉 It leads to a confusing behavior:

    1. Add an item to the cart → item is added to the cart
    2. Confirm order → confirmation modal appears
    3. Remove the item from the cart → the modal disappears 🤔
    4. Add any item to the cart → the modal reappears with the new item, without clicking on the confirm order button 😮

    Concerning the appearance, I find your approach interesting again, code is really compact with Tailwind!

    There are some details that could be improved though:

    • Dessert in the grid should have a solid outline when added to the cart
    • There are differences in colors and button sizes compared with the design.
    • The '-' and '+' buttons are not exactly centered in their circles
    • Buttons are missing hover effects
    • Modal is missing an open/close animation

    Overall, kudos for your work and thank you again for sharing it 🙂

  • P
    Antoine•330
    @super7ramp

    Nice work!

    Implementation is close to the design. Plus the animations are cool :)

    Just a minor remark: You moved the data from data.json inside a data.js, is there a reason? If no, I think it's possible to simplify a bit and just import the data from the json file as an object like this:

    import results from "data/data.json";

    Thanks for your work anyway, I found it inspiring!

  • P
    Alexwz89•480
    @Alexwz89
    What are you most proud of, and what would you do differently next time?

    After around 8 hours struggle, I managed to complete this task. Very happy to review the Grid knowledge and get familiar with asynchronization function.

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

    The major challenges:

    1. How to stagger the placement of the background layer in each task's dashboard dialogue box, as well as the preceding dialogue box.
    2. After using asynchronous fetch function fetch, how should I refresh the DOM after fetching the data.
    What specific areas of your project would you like help with?

    I'm trying to figure out what form the subsequent dialogue box should take after clicking "...", Is there an example of this on the web, or a screenshot. Thank you very much!

    Time tracking dashboard using asynchronized fetching

    #less
    1
    P
    Antoine•330
    @super7ramp

    Very nice work :)

    Implementation works as expected: Timeframes are filtered correctly according to the selector. There is almost no difference with the design, the page is responsive.

    The approach to keep in DOM only the data for the selected timeframe is interesting and the code is readable.

    Just a minor remark: The default selector "Week" is not highlighted when page opens.

View more comments