Skip to content
OverviewSolutions
4
Comments
16
Stephen Addae
@Stephen-Adom

All comments

  • Stephen Addae•270
    @Stephen-Adom

    @jadetrue, you forgot to implement the mark all read action

  • Stephen Addae•270
    @Stephen-Adom

    Hello @jadetrue, the app looks good on tablet and desktop screens but not mobile. With tailwind utilities, you can easily design the mobile version of this app.

  • Stephen Addae•270
    @Stephen-Adom

    You can use redux or local storage but redux is more effective since any updates is reflected on the UI Component. With localstorage, you have to fetch the data whenever you update the store with the scores

  • Stephen Addae•270
    @Stephen-Adom

    Hello Jorge, I don't know if you have checked but on the desktop and mobile view, the page overflows off the screen, hiding the page title and make all read link. Its okay on tablet screens though

  • Stephen Addae•270
    @Stephen-Adom

    Hello blackbott, the rules button text is not centered in the button container and also the button is not centered horizontally on mobile screen. Change the text color of the selected tiles and the score title to white to make it more readable The header must show the current score when the user navigate to the home page as well. You can also apply transition to the hover effect on the tile to make the effect more natural.

    Marked as helpful
  • Stephen Addae•270
    @Stephen-Adom

    The total amount and the tip amount value have to be updated whenever there's a change in bill field and no of people field. Also where do you get this error "must be greater than zero message".

  • Stephen Addae•270
    @Stephen-Adom

    Hello Abdul, you forgot to implement the mark all as read toggle functionality. Also, you have to work on the mobile screen size. With the responsiveness, you can use bootstrap or tailwind

    Marked as helpful
  • Stephen Addae•270
    @Stephen-Adom

    Hello shikoto, the height of your card grid must be of the same height. You can do that by setting the height of the card to 100% and add margin to the column sections. Also the image icon on the back button is not rendering On the view section, the should be some padding for the border countries list to be full display. You can increase the padding around the border countries label and add flex-wrap to the list if it overflows

    Marked as helpful
  • Stephen Addae•270
    @Stephen-Adom

    Hello EryX, your site looks good on desktop screen need a little work on tablet and more work on mobile screens

    Marked as helpful
  • Stephen Addae•270
    @Stephen-Adom

    Hello @Emmanuel, a single page web design like this has to have the design fit the user's viewport. I'm not sure if you have knowledge in css flexbox and grid but those can help you with your design and responsiveness. You can set the body height to 100vh to give you some constraint and set the image with using percentage to make the image size responsive across all device width

  • Stephen Addae•270
    @Stephen-Adom

    @Shuliii Great work on the tip calculator. The bill amount field and number of people input does not update the value when there's a change in their inputs. You can apply the change event you used on the custom field on both the bill and people no inputs to recalculate the total bill.

    Marked as helpful
  • Stephen Addae•270
    @Stephen-Adom

    hello @RobertoBaiochi, great work on your project, looks good on all device. The nav link seems to break or they are not working. With a single page website like this, I would suggest linking the nav links to their respective section on the page to implement the smooth scrolling effect when a user navigate your site.

    Marked as helpful
  • Stephen Addae•270
    @Stephen-Adom

    Nice design. I like your font and your theme implementation

  • Stephen Addae•270
    @Stephen-Adom

    Hello David, just checked your site it looks good on desktop as well as mobile. The router link breaks when I refresh the page and also the user has to know which page he/she is on so you need to highlight the nav links as well. For the routing issue, I think you should define your routes in your index.js file and use outlet tag in your app.js file to define your root outlet path for your site pages

    So your app.js file will look like the function below;

    function App() { return ( <div className="App main-layout"> <Wrapper> <Overlay /> <Navbar /> <Outlet /> <Footer /> </Wrapper> </div> ); }

    And your index.js file will be as

    root.render( <React.StrictMode> <Provider store={store}> <PersistGate persistor={persistor}> <BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route index=true element={<Home />} /> <Route path="category/:categoryName" element={<Category />} /> <Route path="product/:productSlug" element={<Product />} /> <Route path="checkout" element={<Checkout />} /> </Route> </Routes> </BrowserRouter> </PersistGate> </Provider> </React.StrictMode> );

    Hopes this helps :)

    Marked as helpful
  • Stephen Addae•270
    @Stephen-Adom

    It does looks good on devices from 320px to 375px but not from 390px to 414px (Iphone 11 pro max, iphone 11 and iphone 12 pro max). I have an extension I use in chrome that helps me to check for most screen sizes. The link is right below. Hopes it helps you greatly. https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk

  • Stephen Addae•270
    @Stephen-Adom

    hello @Andree Rojas, checked your app and it looks good on desktop but not on mobile. You have to consider mobile first implementation when designing your app. You can use media queries adjust your styles based on device width. You can check w3schools (https://www.w3schools.com) for more in-depth content. Bootstrap can also help if you have knowledge in that