Skip to content
OverviewSolutions
16
Comments
16
P
Antoine
@super7ramp

All 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.

  • P
    Antoine•330
    @super7ramp

    Nice work :)

    Form validation works well and design is responsive.

    A few remarks:

    • When reducing window width to switch from desktop to mobile mode, gap between text and image reduces a bit too much and there is an overlap
    • In mobile mode, image is not centered
    • The email input outline should not appear according to the design

    Things that you may want to try:

    • Set the list item icon using CSS li::before's content, instead of repeating it in the HTML
    • Use the dialog element for the success message
    • HTML email input validation
    Marked as helpful
  • P
    Antoine•330
    @super7ramp

    Good job :) The social media share links is shown correctly when one clicks on the share button, for both desktop and mobile.

    A few remarks:

    • When window is resized while share button is toggled, the share menu doesn't change correctly: There is a mix between desktop and mobile versions of the menu;
    • To simplify logic, I'd suggest to minimize JavaScript code to only toggle classes and manage the rest with CSS;
    • Some <div>s may be replaced with more semantic HTML elements
  • lucigarpe•110
    @lucigarpe
    What are you most proud of, and what would you do differently next time?

    I have not been able to code the responsive correctly

    meet-landing-page

    1
    P
    Antoine•330
    @super7ramp

    Good job :)

    There are a few minor points where implementation slightly differs from the design:

    • Font weight (black is 900)
    • Background color
    • Version color in violet download button

    For the responsive aspect, I find that challenge a bit difficult. I would suggest to follow the mobile-first approach: Implement mobile version then iterate to implement tablet then desktop: It's not a perfect method but it's usually simpler!

  • usman frontend 360•180
    @Tech-Badhead
    What are you most proud of, and what would you do differently next time?

    I am proud of how i tackle the project and with the way my files were structured. I just want to continue on improving and honing my web development skills

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

    I had issues developing the desktop version which requires working with two dimensional grid layout, i overcome it by staying persistent and a lot try by error.

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

    The bottom space on Daniel Clifford and Patrick Abrams is too much on the desktop version and i have tried severals ways to reduce it but it is still not working yet, hence why i need help in that area.

    Responsive testimonial grid section

    1
    P
    Antoine•330
    @super7ramp

    Good job :)

    A few remarks:

    • Regarding the bottom space, you may try grid-template-rows: 1fr auto instead of 1fr 1fr;

    • I would reduce the number of columns from 6 to 4 in desktop version, to get closer to the design;

    • Semantic HTML was not the main focus of this challenge but you may consider using <blockquote> elements for testimonials instead of plain <div>s.

    Marked as helpful
  • P
    Antoine•330
    @super7ramp

    Good job, the switch to display grid on desktop works :)

    Can't inspect code: Only generated js and css are present in repository. So a few remarks on visuals only:

    • "Team Builder" and "Supervisor" border colors are inverted;
    • Card top border widths is larger than on design;
    • Background color doesn't match with design;
    • Padding and font sizes don't correspond to design as well

    Hope it helps!

  • P
    Dexter Niles•140
    @dexterniles
    What are you most proud of, and what would you do differently next time?

    Getting the images to switch based on size was a real uphill battle. Also making sure i'm using the right CSS selectors and rules at the right times. I am more or less happy with how it turned out but I definitely have a lot of learning to do.

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

    Getting the site to respond well to viewport size changes was a bit of a doozy. It took me a lot of time and a lot of google searches to figure it out but i got there for the most part. I think next time i'm going to try less hard coding things and let the sizes change a little more. I think my HTML syntax is all out of whack on this one too.

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

    Everything pls. This code is undoubtedly riddled with mistakes and I am very much looking for pointers here.

    Reactive Product Preview Component with HTML and CSS

    1
    P
    Antoine•330
    @super7ramp

    Good job :)

    A few remarks:

    • "perfume" should be in uppercase
    • The button should change color when hovered
    • Line height seems not to match the design
    • Image in mobile view seems a bit streched.

    Suggestion: Avoid hardcoding width/height, set max-width instead.

    Regarding HTML, it doesn't look as bad as you suggest! Kudos for trying <picture> :) Maybe favour classes over ids.

  • George•180
    @GeorgeGit1

    css

    1
    P
    Antoine•330
    @super7ramp

    Good job :)

    Some remarks:

    • Each instruction should start with bold
    • Text of the nutrition table should be vertically aligned
    • Image is too big on desktop and doesn't resize correctly on mobile
    • Fonts and text colors don't match exactly with the design

    Hope it helps!

  • Mori•170
    @MoriNo23
    What are you most proud of, and what would you do differently next time?

    I discovered that if you add a paragraph element and box-sizing is enabled, then the paragraph element takes up all the available height sometimes.

    modify media queries

    1
    P
    Antoine•330
    @super7ramp

    Good job :)

    Good point for using nav!

    A few remarks:

    • There is no change of color when hovering links;
    • Sizing differs from the design
  • P
    Antoine•330
    @super7ramp

    Good job :)

    Font scales well, maybe a min-width could be added to avoid the card to be reduced too much!

    Marked as helpful
  • Farid_Danilo•140
    @FaridDanilo
    What are you most proud of, and what would you do differently next time?

    I'm proud to have completed this first challenge with Git and GitHub. It's a very interesting topic, but I know there's still a lot to learn, and next time I hope to have a better understanding of these more advanced topics.

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

    The remaining challenges are getting the divs and labels to align correctly as I wanted them to appear in the example design, so I kept tweaking and changing the code until I got the alignment I wanted to show.

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

    I still have a lot to learn and improve in CSS and knowing how to use the correct properties. I hope to learn a lot and I'm willing to be corrected to improve.

    QR-Design-Responsive

    2
    P
    Antoine•330
    @super7ramp

    Good job :)

    Remarks:

    • The "Outfit" font is not downloaded
    • It looks there is an issue with spacing around text. In Figma design, there is:
      • 40px between text and the card bottom
      • 16px lateral padding for the text