Kelvin Maiangwa• 740
@Lifeofkelvin
Submitted
Mahmoud Elagamy
@Mahmoud-ElAgamy
All comments
- Mahmoud Elagamy• 740
@Mahmoud-ElAgamy
Posted
Great job on the project so far! However, I noticed an issue when navigating from the homepage to the destination page. Everything works fine initially, but if I try to reload the destination page after navigating to it, I consistently encounter a 404 error. This could be related to your routing configuration, especially if you're hosting on Netlify, as it may not be handling dynamic routes correctly. Consider checking your route settings or adding a _redirects file to handle these cases. Keep up the good work!
0 - Raphael• 160
@CosMo578
Submitted
What are you most proud of, and what would you do differently next time?
What I am Proud of
I am proud of the fact that I was able to complete this project and learn new concepts while building it.
What I would do differently I would try to improve my speed while building any other project
What challenges did you encounter, and how did you overcome them?
I wasn't able to link the border countries to each other at first, but then I did it.
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
I thoroughly enjoyed exploring your Rest Countries API app. The implementation is both innovative and user-friendly, particularly how you’ve opted to store the application state in the URL. This approach allows for easy sharing, bookmarking, and seamless navigation—something that enhances the overall user experience. That said, I noticed a couple of areas where the app could be improved.
Container Width Scaling:
Observation: The container of the app does not have a defined max-width, which causes it to continuously expand with the screen size. On larger screens, this can affect readability and layout.
Suggestion: Setting a max-width for the main container can help maintain a consistent and aesthetically pleasing layout across all screen sizes, ensuring the content remains visually balanced.
404 Error on Country Details Page Reload:
Observation: When visiting the country details page and reloading, I encountered a 404 error. This disrupts the user experience, especially if someone is trying to revisit a specific country's details via a direct link or after refreshing the page.
Overall, your app is highly functional and provides a smooth, interactive experience. By addressing the issues with container scaling and handling page reloads, the app can become even more robust and user-friendly. I look forward to seeing your future updates!
1 - Brian Marete• 70
@brianmarete
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
I’ve had the opportunity to explore your multi-step form application, and I appreciate the effort you’ve put into creating a smooth user flow. While the app has a solid foundation, there are a few areas where I encountered challenges that could benefit from improvements. Below are some observations and suggestions to enhance the user experience.
-
No Data Persistence Between Steps:
- Issue: When navigating between steps, the form data isn't persisted. This creates a challenge if I want to revisit a specific step and modify the input data; the data isn't retained, leading to a poor user experience.
- Suggestion: Implementing state management (e.g., using React Context or local state) to persist form data between steps would greatly enhance usability. This way, users can freely navigate between steps without losing their progress.
-
Form Validation Across Steps:
- Issue: It’s possible to navigate through the steps without filling in the required fields or selecting necessary options, which could lead to incomplete submissions.
- Suggestion: Adding validation logic that checks for required inputs before allowing the user to proceed to the next step will improve the flow and ensure the form is completed correctly.
-
Page Reload and 404 Error:
- Issue: When reloading the page on any step, I encounter a 404 error, which disrupts the user experience.
Overall, the app has a solid structure, but addressing these issues would significantly improve the user experience and reliability of the form. I’m confident that with these adjustments, the app will become even more effective and user-friendly. Keep up the great work!
Marked as helpful
0 -
- Lawrence Afriyie• 140
@LorryAfriyie
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
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(17/9/2000). The result displayed 24 years ,1 month, and 15 days instead of simply 24 years.
Marked as helpful
0 - Toluwani Somade• 150
@Adesmith001
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
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(17/9/2000). The result displayed 23 years 12 months instead of simply 24 years.
0 - Daniel-san8• 140
@Daniel-san8
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
Not really because I have encountered the same probleming although i am deploying on netlify.
Here is how you can address this problem:
When you're using React Router in a Single Page Application (SPA), routing is handled entirely on the client side. This means React Router controls which components to display based on the URL, without reloading the page or requesting new HTML files from the server.
However, when you reload a page or try to directly visit a route like /about, the browser sends a request to the server asking for that path.
The problem is that the server doesn’t know about your client-side routes. It looks for a file at /about (or any other route), and since no such file exists on the server, it returns a 404 error. How to Solve It: To fix this, you need to configure the server to always return the main index.html file for all routes. This way, React Router can handle the routing logic on the client side.
If you're using Vercel as your hosting platform, here's how you can configure it:
Create a vercel.json file at the root of your project (next to package.json).
Add the following configuration inside the vercel.json file:
{ "rewrites": [ { "source": "/(.*)", "destination": "/index.html" } ] }This tells Vercel to rewrite all requests to serve index.html regardless of the URL path.
Deploy your project to Vercel, and the issue will be fixed.
Why This Solution Works: By using the rewrites configuration, all requests to your app (like /about, /contact, etc.) are redirected to index.html. Once the browser loads index.html, React Router takes control of the routing and renders the appropriate content based on the URL.
0 - Rahmonbek• 250
@Rahmonbek-0001
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
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(15/9/2000). The result displayed 25 years instead of simply 24 years.
1 - AhmedTx• 230
@AhmedTxl
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
The Rest Countries API app is well-designed and functions smoothly. However, I encountered a couple of minor issues:
404 Error on Reload: When visiting a country's details page and then reloading the page, a 404 error appears.
Missing Max-Width: The container element lacks a maximum width, causing the content to grow indefinitely as the screen size increases. This can make the layout appear cluttered on larger screens.
Overall, these are relatively easy fixes that would significantly improve the user experience.
Thank you for your excellent work on this project.
Marked as helpful
1 - Daniel-san8• 140
@Daniel-san8
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
Great work! However, after navigating from the homepage to destination page, I consistently encounter a 404 error if i reload the page.
0 - Ibrohim• 20
@IbrohimJumayev
Submitted
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
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(15/9/2000). The result displayed 24 years, 3 months, and 16 days instead of simply 24 years.
Marked as helpful
0 - Mahmoud Elagamy• 740
@Mahmoud-ElAgamy
Posted
Hey, I've been using your Rest Countries API and have encountered few issues that I believe could be addressed to enhance the user experience:
- 404 Error on Reloading Details Page: Upon reloading a country's details page, a 404 error is returned.
- Missing Max-Width: The container element lacks a maximum width, causing the content to grow indefinitely as the screen size increases. This can make the layout appear cluttered on larger screens.
Marked as helpful
1 - abdulsalam11-alao• 150
@abdulsalam11-alao
Submitted
What are you most proud of, and what would you do differently next time?
Solution Retrospective What are you most proud of?
Dynamic Step Navigation: I’m particularly proud of how the steps in the multi-step form were linked dynamically using React Router. This allows users to navigate between steps smoothly and provides a clear, structured flow. Styling: The design of the form, especially the sidebar, came out great using Styled Components. It feels modern and clean, and the flexibility of this styling method made it easy to implement responsive designs. Error Handling and Form Validation: Implementing basic validation checks to ensure users can’t skip important fields helped make the form more robust and user-friendly. What would you do differently next time?
Use a More Robust State Management Solution: While React’s built-in state management worked fine for this project, I would consider using a more robust solution like Redux or React Context API for larger, more complex multi-step forms. This would make managing the state across multiple steps and components easier and more efficient. Add Animations and Transitions: Next time, I would add smooth transitions between form steps to enhance user experience. This would provide a more engaging feel as users move through the form. Improve Error Boundaries: Handling errors with more detailed error boundaries and alerts would give users clearer feedback if something went wrong. Implement Backend Integration: While this form collects user data effectively, integrating it with a backend API or service for persistent storage or sending the form data would complete the form’s functionality. Would love to hear feedback on the potential enhancements and suggestions for improving the state management!
Mahmoud Elagamy• 740@Mahmoud-ElAgamy
Posted
Thank you for your hard work on this project. I've been using the application and have encountered a few issues:
- 404 Page Errors: When reloading the app during any step, I consistently encounter 404 page errors. This can disrupt the user experience and lead to confusion.
- Data Persistence: When I navigate to a different step and then return to a previous one, any changes I've made are not saved. This can be frustrating, as it requires me to re-enter information. It would be beneficial if the application could automatically save user input as they progress through the steps.
Marked as helpful
0
