Skip to content
OverviewSolutions
6
Comments
21

Sophie

@ippotheboxerUnited Kingdom430 points

Full-stack developer using React, Typescript, Tailwind, Node, Express, Prisma, PostgreSQL

Latest solutions

Latest comments

  • Sophie•430
    @ippotheboxerPosted 18 days ago

    Hi there, nice solution! Here are some suggestions for what you could improve:

    • I think a loading text/animation would be helpful for the user, when nothing happens it's a bit unclear whether it worked or not.
    • The America region doesn't work: this is because the REST Countries API accepts Americas as a region, not America.
    • If you select a filter and then click on the country, the filter gets reset. I think it would be a bit better if the filter region remained.

    Hope this helps!

    Marked as helpful
    0
  • Sophie•430
    @ippotheboxerPosted 28 days ago

    Hi there, nice solution! It looks great with good animations.

    Certain countries are giving an error: for example, Antarctica: Antarctica has many fields missing in the Rest Countries API, such as: no official currency, language, native name or capital. Make sure to check that if the response for fields is undefined, then just set a message such as "No official currency/language".

    Kosovo also doesn't work: it doesn't have a tld (top-level domain) so you will also need to handle this case.

    Also when you search for countries I feel like it would be good if you had an error message, for example "No countries found" if they searched something that has no results, I think it would be a bit more clear experience for the user.

    Hope this helps!

    Marked as helpful
    0
  • Sophie•430
    @ippotheboxerPosted about 1 month ago

    Hey there, nice solution! It looks great and works well. One thing is that I can write a future date and it will still work - the year can't be in the future, but the day and month can be. Make sure to check the month and day against the current date, and if either is later, to raise an error since it's an invalid date. Hope this helps!

    Marked as helpful
    0
  • Felicia Udosen•150
    @LiciacodesSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Most Proud Of: Implementing dark mode toggle with persistence using Local Storage. Handling dynamic routing to display country details. Ensuring a responsive and accessible UI with Tailwind CSS.

    What I’d Do Differently: Optimize API requests for better performance. Improve error handling for API failures. Add search debounce to enhance user experience.

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

    Dark Mode Reset on Refresh

    Challenge: The dark mode state would reset after a page refresh. Solution: Used Local Storage to persist the user's theme preference. Dynamic Routing for Country Details

    Challenge: Ensuring correct data fetching and handling page reloads. Solution: Used React Router’s useParams to fetch country details dynamically. Styling & Responsiveness

    Challenge: Making the UI look clean and accessible on all screen sizes. Solution

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

    Right now, my project is complete, but I would appreciate feedback on:

    Accessibility & UX – Is the dark mode toggle intuitive? Are there any improvements for a better user experience? Performance Optimization – Are there ways to improve API handling or reduce unnecessary re-renders? Best Practices – Any suggestions on improving my React code structure, state management, or component organization?

    rest-countries-api-with-color-theme-switcher

    #react#react-router#tailwind-css
    1
    Sophie•430
    @ippotheboxerPosted about 1 month ago

    Some bugs I noticed:

    • Light and dark mode don't work. The whole app is essentially staying in dark mode, only the region filter and search get changed when I toggle the mode. You're using local storage to store darkmode, even when I change it to false, it doesn't change to light mode. I think this could be because local storage sets everything as text, so maybe true is being read as "true" rather than a boolean. For example, you do:
    const [darkMode, setDarkMode] = useState<boolean>(() => {
    return localStorage.getItem('darkmode' ) === "true"
  });

    But you should check localStorage.getItem('darkmode' ) === true, since it's a boolean. Also instead of returning it like this, just set useState<boolean>(false), and you could use useEffect to detect if the darkmode in local storage changes. You're basically always returning dark mode as true instead of reading it.

    • On dark mode, I can hardly read the text. On dark mode the text is supposed to be white, using a black and dark grey text makes it pretty hard to read, and when you search, I can't see the text that I'm writing.
    • Between the large and small screen sizes, there's a sudden jump to 1 per grid then to 3. So when it first changes to 3, the height is way too high for the flags and all the flags don't contain the whole flag, just a small zoomed-in portion of the flag (this can be fixed with object-fit). I think it would look better if it switched to 2, and then 3.
    • I feel like using local storage to set the theme could be a bit overcomplicated: I think it would be better to use a context to store the theme, and maybe if it changes you could then write to local storage.
    0
  • abdalla shaker•140
    @abdalla-shakerSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    making a custom hook and implementing some new things in my code such as modal component and forwardRef and many other things I don't remember TBH.

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

    Opening the modal using context api was a pain but i cancelled that idea as the code didn't work asynchronously so i went back to prop drilling (well it's not prob drilling because i passed the functions to one component only) and i was gonna use useReducer instead of useState but the state updating functions was not complicated so I canceled that idea.

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

    Any feedback is appreciated

    REST Countries API

    #react
    2
    Sophie•430
    @ippotheboxerPosted about 1 month ago

    Hey there, nice solution!

    First of all, you mentioned how using a modal was complicated: a modal is brought up when pressing on a country, but I think it would indeed be less complicated if you used react-router and instead took the user to a new page (e.g. /:countryName) when they press on a country, and then fetch the country name using useParams and then hitting up the API.

    Also, searching for a country doesn't work when a filter is applied. This is because you have done it like this:

    if (filterRegion) {
    FILTERED_COUNTRIES = countries.filter(
      (country) => country.region === filterRegion
    );
  } else if (searchRegion) {
    FILTERED_COUNTRIES = countries.filter((country) =>
      country.name.common
        .toLowerCase()
        .includes(searchRegion.toLowerCase().trim())
    );}

    Filtered region takes precedence over the search, so search will only work if there is no filter. Here is how you can do it so that both work:

    let FILTERED_COUNTRIES = countries;

if (filterRegion) {
  FILTERED_COUNTRIES = FILTERED_COUNTRIES.filter(
    (country) => country.region === filterRegion
  );
}

if (searchRegion) {
  FILTERED_COUNTRIES = FILTERED_COUNTRIES.filter((country) =>
    country.name.common.toLowerCase().includes(searchRegion.toLowerCase().trim())
  );
}

    I see that you have your filter and search context separated, but I feel like it's fine to have them both together in context, since they are both directly manipulating the countries that are being shown

    Marked as helpful
    1
  • Sophie•430
    @ippotheboxerPosted about 1 month ago

    Hey there, nice solution! The UI looks clean and is responsive.

    When I click on the confirm order, it's meant to clear the current order so that the user can restart their order and make a new one: however the cart data doesn't change at all and still displays the same products. Make sure that the data gets reset when the user presses "close" after the order was confirmed.

    Also when you press on the small X by a food item in the cart, if you go and hover on the food item you removed, it still shows the quantity that was added. And if you keep pressing the decrease button to get the product quantity to 0, it still shows up in the cart with 0, but it's meant to disappear from the cart. Pressing X when this happens doesn't work either.

    0
View more comments