Skip to content
OverviewSolutions
5
Comments
97
Mahmoud Elagamy
@Mahmoud-Elagamy

All comments

  • Girma•300
    @Girma3Submitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    I'm new to react so basically it was nice learning process overall and I would like to use better method to manage state next time.

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

    Integrating data that comes from local json file when fetching fail from outside using api call was challenging for me because the object properties are different and I use separate state to mange where the data comes from .

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

    Hi Everyone 👋,If you have any feedback, as React is new to me, you are welcome to share it. Thanks in advance for your time!

    Rest-Countries-Api

    1
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 11 days ago

    Hey, I found a few areas that could be improved:

    1- 404 Error on Reload: When I reload the details page of a specific country, a 404 error occurs.

    2- Region Filter Dropdown: The dropdown menu for filtering by region could be improved by automatically closing when a region is selected and highlighting the active region for better UX.

    3- Search Bar Behavior: After searching for a country and clearing the input field, the results remain filtered. It would be more intuitive if clearing the input automatically reset the results to display all countries.

    4- Softening Shadows: The shadows on the header, region filter button, back button, and border countries could be softened a bit for a more subtle and modern look.

    5- Layout: You might want to consider using a container with a max-width to keep the content from growing indefinitely and ensure a more consistent layout on all screen sizes.

    Great job overall! These small tweaks could make your app even more user-friendly.

    Marked as helpful
    0
  • Samiullah•440
    @samir-DeveSubmitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    ...

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

    ...

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

    Although I checked for bugs and found nothing but if you encounter any please let me know of it !

    React.js & CSS

    1
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 11 days ago

    Awesome job on your To-Do app! Everything works as expected, and the design is clean. I noticed a few areas that could enhance the user experience:

    1- Data Persistence: The app doesn’t seem to save tasks after a refresh. Adding data persistence (e.g., using localStorage) would make it even better!

    2- Max-width for Container: The content container doesn’t have a max-width, which causes the width to increase on larger screens. Adding a max-width would help maintain a more consistent layout.

    3- Task Count Update: After marking a task as completed, the task count doesn’t update. You might want to make sure the count reflects only active tasks or completed tasks, depending on your intended behavior.

    4- Minor UI Issue: I also noticed a stray semicolon (;) showing up by mistake. Fixing this would help clean up the UI.

    Great work so far, and I hope these tweaks make your app even better! Keep it up!

    0
  • Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 11 days ago

    Hey, great job on your project! The design and functionality look solid overall. I did notice one small issue regarding the search bar and form size:

    Search Bar Size in Dark Mode: In dark mode, the search bar appears smaller (140px), while in light mode, it’s larger (400px). This inconsistency in size could affect the user experience, especially when switching between themes. Consider adjusting the width of the search bar in dark mode to match the size in light mode for a more consistent design.

    Marked as helpful
    0
  • Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 11 days ago

    Hey, great work on the project! The design is clean, and the functionality is coming together nicely. I have a few suggestions that could help improve the user experience:

    • Current Theme Text: I noticed is that the theme text always displays ‘Dark Theme’ regardless of the current state. It might improve the user experience if the text updates to reflect the active theme (e.g., ‘Light Theme’ when in dark mode).
    • No Search Results Handling: When searching for a country while the active region filter is set to a different continent (e.g., searching ‘Kenya’ while the region is set to Asia), I noticed that a blank page is displayed. Adding a message like ‘No countries found’ would be helpful to guide users.
    • Container Usage for Layout Control: I noticed that when zooming out, the content stretches beyond the viewport, making it difficult to read. Implementing a max-width container could help maintain a consistent and readable layout.

    These tweaks could make your app even more user-friendly. Great work so far!

    Marked as helpful
    0
  • FredHimselfDev•100
    @FredHimselfDevSubmitted 11 days ago
    What specific areas of your project would you like help with?

    Hello,

    Here's my solution to this challenge. Any feedback would be appreciated.

    Thanks.

    Multi-Step Form

    1
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 11 days ago

    Hi Fred,

    Overall, the multi-step form is well-designed and easy to navigate. However, I noticed that the active state for the selected plan isn't visually distinct enough. It would be beneficial to enhance the visual indicator to make the user's choice more apparent.

    This small improvement would significantly enhance the user experience by providing clearer confirmation of their selection.

    Marked as helpful
    2
  • figueroaignacio•50
    @figueroaignacioSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    Country Data API - Frontend Mentor Challenge

    This project is a solution to the Frontend Mentor challenge that involves displaying data from a country API. It was built using React, Tailwind CSS, and React Router to create a fully responsive and interactive front-end application.

    Technologies Used

    • React: A JavaScript library for building user interfaces.
    • Tailwind CSS: A utility-first CSS framework for rapid UI development.
    • React Router: A library for routing in React applications.
    • RESTful API: Fetching data from a public API to display information about countries.

    Features

    • Country List: Displays a list of countries with details like name, population, region, and capital.
    • Search Functionality: Allows users to search for countries by name.
    • Filters: Filter countries by region (e.g., Africa, Americas, Europe, etc.).
    • Country Details Page: When a user clicks on a country, they are taken to a page with more detailed information about that country, including languages, currencies, and borders.

    REST Countries API with color theme switcher

    2
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 12 days ago

    Firstly, I want to commend you for creating a functional and clean app with a user-friendly interface—great work! I really enjoyed navigating through it and exploring the countries’ details. To make this impressive app even better, I have a few suggestions for improvement:

    404 Error on Page Reload:

    I noticed that reloading a country’s detail page results in a 404 error.

    Active Region Styling in Light Mode:

    The UI is polished and consistent, but I did observe that in light mode, the active region lacks distinct styling compared to dark mode.

    User Feedback for Searches Across Regions:

    When searching for a country that isn’t part of the currently active region (e.g., searching for a country in Africa while the Asia region is active), the results section appears blank. To enhance user experience, displaying a friendly message like “No results found in the selected region.

    Overall, this app already stands out with its clean design and functionality. By addressing these enhancements, you can take it to the next level and offer an even more seamless experience for users. Keep up the great work—I look forward to seeing your app continue to evolve!

    1
  • Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 13 days ago

    Hi ElsaD,

    The to-do app is impressive and works well overall, showing great promise! One area for improvement is data persistence. Right now, when tasks are added and the app is reloaded, all data resets to the initial state.

    Implementing a solution like local storage could be a helpful next step for ensuring data is retained between sessions. It's beginner-friendly and straightforward to integrate.

    For example, you could use localStorage.setItem() to save tasks and localStorage.getItem() to load them when the app starts. Adding this feature would make the app even more reliable and enhance the user experience.

    Marked as helpful
    1
  • Aymen developer•620
    @aymenthedeveloperSubmitted 13 days ago
    What challenges did you encounter, and how did you overcome them?

    doing drag and drop functionality for both desktop and mobile

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

    I would like any feedback on my code :)

    Todo app

    1
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 13 days ago

    Hi Aymen,

    The to-do app is impressive and works well overall, showing great promise! One area for improvement is data persistence. Right now, when tasks are added and the app is reloaded, all data resets to the initial state.

    Implementing a solution like local storage could be a helpful next step for ensuring data is retained between sessions. It's beginner-friendly and straightforward to integrate.

    For example, you could use localStorage.setItem() to save tasks and localStorage.getItem() to load them when the app starts. Adding this feature would make the app even more reliable and enhance the user experience.

    Marked as helpful
    1
  • Fardin•430
    @FardindevmSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    I'm pleased with how I managed React state and smoothly handled it in child components. I implemented error states effectively for phone numbers, names, and emails. By utilizing the react-phone-number-input library, I was able to seamlessly incorporate international calling codes and dynamically display country flags based on the inputted country code.

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

    I am here to offer any help I can.

    Responsive Multi-step-form Made with Html,Css,React,Tailwind

    2
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 13 days ago

    Or what about keeping the current logic and instead of the built in popup message, you create a customized one matching the app's design language for a more user-friendly approach.

    2
  • Mohammed Aljbalai•60
    @mohammed-aljablaiSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my ability after thanking Allah.

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

    The check is the most one take my time, considering that there were easier way to solved it but I followed the hard because the challenge want that.

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

    Actually every thing is OK, but I want to edit the opration of age calculation.

    LifeClock

    1
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 13 days ago

    Hi Mohamed,

    I've been using your calculator app, I did encounter a small issue that I thought you might want to know about.

    I recently used the calculator to determine my age by entering today's date as my birthday(9/11/2000). The result displayed 24 years, and 6 days instead of simply 24 years.

    Marked as helpful
    0
  • Fardin•430
    @FardindevmSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    I'm pleased with how I managed React state and smoothly handled it in child components. I implemented error states effectively for phone numbers, names, and emails. By utilizing the react-phone-number-input library, I was able to seamlessly incorporate international calling codes and dynamically display country flags based on the inputted country code.

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

    I am here to offer any help I can.

    Responsive Multi-step-form Made with Html,Css,React,Tailwind

    2
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 13 days ago

    The app is well-built and functions smoothly for the most part. The multi-step form implementation is intuitive, and the layout is clean and easy to follow. I appreciate how each step is clearly delineated, and the user flow is logical.

    However, there is one aspect that needs improvement: when interacting with the steps from the sidebar, clicking on a step allows you to proceed to the next step even when required inputs are missing or invalid. This behavior can be confusing, as users might expect to be prompted to fill out any required fields before advancing.

    It would be ideal to add validation checks before allowing navigation to the next step. This way, users would be prevented from skipping important fields, improving the overall user experience and ensuring that the form is filled out correctly.

    Marked as helpful
    1
  • Sean Hill•240
    @seanhillwebSubmitted 18 days ago
    What are you most proud of, and what would you do differently next time?

    This is my solution for the REST Countries API application. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, Next.js, TailwindCSS, React Hook Forms, Axios, and Next Themes.

    Technologies Used:

    • React
    • React Hook Forms
    • Next.js
    • TailwindCSS
    • Next Theme

    I am most proud of the display and interactions that I added to the project. It feels snappy and responsive!

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

    My initial struggle was getting the search and region filter working as expected. Once I settled on an approach, I was able to accomplish that relatively quickly.

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

    I had trouble implementing the filters and using their respective API endpoints. I think the best way to manage that would be setting up a Context Provider and Reducer. Does anyone have a good resource for this approach?

    REST Countries API Solution

    1
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 16 days ago

    Thank you for developing the Rest Countries API app! It has a lot of useful features, but I noticed a few areas that could enhance the functionality and user experience:

    404 Error on Reloading the Details Page:

    When I navigate to the details page of a country and then refresh the page, a 404 error occurs. This issue interrupts the user experience, especially for those who might reload the page by accident or out of habit. It would be helpful if the app handled page reloads on country detail pages without showing an error.

    Search Functionality Within Regions:

    I observed that after selecting the Asia region, if I search for a country in Africa, no results are displayed, which is expected. However, displaying a message like "No results found" or a similar notification could improve the UX by clarifying why no countries appear in the search.

    Dark Mode Text and Icon:

    When switching to Dark Mode, I noticed the theme updates correctly, but the button text and icon remain as "Dark Mode." Updating these elements to reflect the active mode (e.g., switching to "Light Mode" with a corresponding icon) would make the toggle more intuitive and consistent for users.

    Thank you for considering this feedback! I’m looking forward to seeing these improvements in future updates.

    0