Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
96
Mahmoud Elagamy
@m-elagamy

All comments

  • Girma•340
    @Girma3
    Submitted 8 months 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

    #react
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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
  • Samiullah•490
    @samir-Deve
    Submitted 8 months 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

    #accessibility#react
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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!

  • Tamara K.C•250
    @Tamar86
    Submitted 8 months ago

    Responsive Countries Page using Vite, React, React-Router, CSS-modules

    #react#vite#react-router
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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
  • Dadci•200
    @Dadci
    Submitted 8 months ago

    Countries app

    #react#redux-toolkit#tailwind-css#vite#react-router
    2
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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
  • FredHimselfDev•100
    @FredHimselfDev
    Submitted 8 months 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,100
    @m-elagamy
    Posted 8 months 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
  • ElsaD- Ahmed•560
    @InKABuser
    Submitted 8 months ago

    todo-app-vanilla js

    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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
  • Aymen developer•750
    @aymenthedeveloper
    Submitted 8 months 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,100
    @m-elagamy
    Posted 8 months 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
  • Fardin•430
    @Fardindevm
    Submitted 8 months 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

    #react#tailwind-css
    2
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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.

  • Mohammed Aljabali•90
    @MoAjabali
    Submitted 8 months 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,100
    @m-elagamy
    Posted 8 months 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
  • Fardin•430
    @Fardindevm
    Submitted 8 months 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

    #react#tailwind-css
    2
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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
  • Sean Hill•240
    @seanhillweb
    Submitted 8 months 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

    #accessibility#react#tailwind-css#axios
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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.

  • Ahmed•430
    @AhmedLebda
    Submitted 8 months ago
    What specific areas of your project would you like help with?

    I'd love to hear your thoughts! Your feedback is greatly appreciated and helps me improve.

    Space tourism website

    #react#react-router#typescript#tailwind-css
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months ago

    Hello Ahmed,

    I’ve been exploring the Space Tourism app, and it’s visually impressive and engaging! However, I noticed one small usability issue on mobile that affects the user experience:

    Mobile Menu Drawer: When I open the menu drawer on a mobile device and select a page, the drawer stays open instead of closing automatically. This requires the user to manually close the menu after each selection, which can impact the overall UX by adding extra steps. It would be great if the drawer could close automatically once a page is selected, allowing users to view the selected content immediately.

    Thank you for your hard work on this app! This small change could make a significant difference in the flow for mobile users.

    Marked as helpful
  • RegnoCranium•290
    @RegnoCranium
    Submitted 8 months ago

    REST Countries API with color theme switcher solution

    #react#react-router#tailwind-css#typescript
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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.

    Marked as helpful
  • xharlessnow•130
    @Ekekwecharles
    Submitted 8 months ago

    React Typescript StyledComp Redux ContextApi, React query/router/icons

    #tanstack-query#react-router#redux-toolkit#styled-components#typescript
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months 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.

    Marked as helpful
  • AlirezaAhmadiyan•70
    @alireza-turk
    Submitted 8 months ago

    Age Calculator App with Reactjs and Context API

    #react#accessibility
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months ago

    Hello, I’ve been using the Age Calculator app and appreciate its overall functionality, but I noticed a few areas where it could improve accuracy and usability. Here are some specific points I encountered:

    Calculation Accuracy: I entered the date 6/11/2000, and the app returned an age of 23 years, 3 months, and 5 days. However, it should have calculated the age as 24 years, as the birthday has already passed this year. It would be great if the app could verify date calculations for accuracy to provide users with precise results.

    Responsiveness on Mobile Devices: When accessing the app on a mobile device, some elements did not adjust correctly to the screen size. This affected readability and ease of use, especially on smaller screens. Making the app responsive would enhance the user experience for those on mobile devices, allowing them to access and interact with the app seamlessly.

    Thank you for considering this feedback. I’m looking forward to seeing these improvements and continuing to use the app!

    Marked as helpful
  • iperezdev04•90
    @iperezdev04
    Submitted 8 months ago

    rest-countrie-api

    #react#typescript
    2
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months ago

    The Rest Countries API app is well-designed and functions smoothly. However, I encountered a minor issue:

    I've noticed an issue on the Country Details page. When I visit the details page of a specific country, the page loads correctly at first. However, if I reload the page, it results in a 404 error, indicating that the page can’t be found.

  • zee•380
    @zeenox-stack
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    will add a custom feature that i think the site needs, like this one

    Age Calculator

    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months ago

    Hi there,

    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(3/11/2000). The result displayed 24 years, and -1 month instead of simply 24 years.

    Marked as helpful
  • Benedict Jr.•350
    @The3rdChief
    Submitted 8 months ago

    Age Calculator React

    #tailwind-css
    1
    Mahmoud Elagamy•1,100
    @m-elagamy
    Posted 8 months ago

    Hi there,

    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(3/11/2000). The result displayed 24 years, and 6 days instead of simply 24 years.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub