Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions20Comments19

All comments

  • Tri D Nguyen• 20

    @tdnguyen04

    Submitted

    What are you most proud of, and what would you do differently next time?

    My first project on Frontend Mentor. I am so happy that it looks so neat. Any suggestions on how to improve this further is greatly appreciated.

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

    I am setting the width of the container box quite manually. I will try to come up with a way to make this more logical (something like the width of the box should be the original width of the image inside * 1.2 for example).

    Design Blog-preview Card

    2

    Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @tdnguyen04 I can add to that, you can make the image take the full width and see this for the nested corners

    Marked as helpful

    0
  • Tamuno• 150

    @Tam-BobManuel

    Submitted

    My challenge was implementing client -side routing, I'm unsure of line 29 to 32 in my routes/Details.tsx, I don't think I followed best practice there.

    Country API with Vite + react + TypeScript

    #chakra-ui#react#typescript#vite#react-router

    1

    Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    The details page is not responsive

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    You have done a good job 👏

    • I opened an issue in your repo
    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @HanSeongLee one little note the background image doesn't take the full height if a scrollbar appears you will find that happens.

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @PriyoBROTO04 It looks fantastic one tiny change make the label disappear when all the notifications are read.

    0
  • Valeh Ismayilov• 140

    @vlhsmylv

    Submitted

    1. What did you find difficult while building the project?

      • I didn't find this project difficult at all, but I stuck sometimes when I tried to make it responsive, because of profile pictures.

    2. Which areas of your code are you unsure of?

      • Clean code - Did I write code understandable? Can others understand the classes I defined and used?

    3. Do you have any questions about best practices?

      • No.

    Notifications Page with HTML, CSS and TailwindCSS

    #tailwind-css

    1

    Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @vlhsmylv are you still developing because the notification content clipped when the height shrinks?

    Marked as helpful

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @aemrobe you have done an amazing job, You can change the animation I think you can do something better than the current animation yk.

    1
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @wendyhamel I opened the page but didn't find anything other than the header?

    0
  • P
    Ed• 720

    @EdwinSch

    Submitted

    update: Thanks to some great suggestion I was able to fix my previous problem (or rather take another approach to create that functionality). The project is now fully functional.

    Hi everybody!

    I'm almost done with this challenge but in my final step I'm running into a problem and really hoping somebody can help me figuring it out.. much appreciated :)

    The problem: In my project the notifications can be marked as 'read' either by clicking on a single notification or marking them all at once by the "mark all as read" button. These functions trigger a filter which returns the (new) number of unread messages and should update the state of the notifcations amount in the little blue box. But the latter is not happening at once, only when you click another post as read (so basically re-triggering this functionality) it updates. Simply put: the number of unread messages is always 1 behind for some reason. I'm definitely overlooking something here.. but I just can't seem to figure it out :(

    Notifications Page with React + CSS

    #react#vite

    1

    Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @EdwinSch try this instead define a single state for unread count and decrease it by one if clicking one item and set it to zero if marking all of them as read. and the initial value is 3 or whatever depending on your requirement.

    Marked as helpful

    0
  • IRASUBIZA-Elyse• 40

    @IRASUBIZA-Elyse

    Submitted

    -using the filter region to be on top of the countries is still not working as requested -after filtering not able to display countries content as requested when clicked on

    country arrangement using css flex

    #fetch

    1

    Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @IRASUBIZA-Elyse You should break down complex problems into smaller subproblems it is a great strategy to tackle challenges more effectively. By addressing each subproblem individually, you can simplify the overall task and make steady progress. Keep up the good work, and feel free to continue seeking guidance as you work through each subproblem! 💪🔍🧠

    Marked as helpful

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @ToniHunter274 You do it in the wrong way you shouldn't use absolute path this is wrong

    href="file:///C:/Users/user/Documents/FrontEndMentor%20solutions/Planet%20Projects/neptune.html"

    Try using a relative path instead.

    Marked as helpful

    0
  • Ana-Niko-byte• 110

    @Ana-Niko-byte

    Submitted

    I'm still quite new at coding so getting my head around reactive values is a work-in-progress. I tried a harder challenge earlier but decided to take a step back and work up. Would appreciate any/all feedback/crit on code structure!

    P.S. it probably looks a little different visually - I was only doing this for functionality so please ignore the aesthetics :)

    SvelteKit, Reactive Values, Typescript.

    #svelte#typescript#accessibility

    1

    Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    @Ana-Niko-byte It's quite impressive to see how well things are going for someone who has just begun this fantastic job!

    1
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    Just added drag-and-drop functionality to my project! 🚀

    Overcame a few challenges, especially with the filters.

    Thrilled to share that I cracked the puzzle and it's working seamlessly.

    😄 Now, wondering if I can sprinkle in some animations for that extra polish. Any suggestions? #React #DragAndDrop #ReactBeautifulDnd

    0
  • rushinstuffin• 380

    @kyle-barry-apps

    Submitted

    I built this in React and used Redux for task management. A lot could be improved here, and a lot of new functionality could be added (e.g. drag and drop, validation, server side/database integration, etc.), but I'm happy with what I've put together. It took a long time and a lot of trial & error to make everything work properly.

    Full-scale task management application in React and Redux

    #react#redux

    1

  • Mahmoud Tarek• 650

    @mahmoudAcm

    Submitted

    Adding draggable functionality and keyboard controls to improve accessibility. By assigning a tabindex value to interactive elements such as buttons and links, they can be included in the tab order of the page, enabling keyboard users to navigate through the page in a logical order. These changes make it easier for users with disabilities to interact with the application.

    Responsive Kanban Task Management App

    #material-ui#react#redux-toolkit#typescript#vite

    1

    Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    🚀 Exciting News: Upgraded the Kanban Task Management App from Frontend Mentor Challenge into a Fullstack Marvel! 🚀

    Hey LinkedIn fam! 👋 I'm thrilled to share a major achievement – I've taken the Kanban Task Management App project from Frontend Mentor Challenge and transformed it into a fully-fledged Fullstack Application! 🎉 With a lot of hard work, dedication, and a dash of innovation, I've added some powerful features that take the app to the next level.

    🔥 Key Highlights:

    🔹 Fullstack Power: The app is now not just about the frontend! I've integrated robust backend functionality that takes the user experience to new heights.

    🔹 Authentication Excellence: The authentication system is now powered by Clerk.com, adding an extra layer of security and seamless user experience. 🛡️

    🔹 Performance Upgrades: I've optimized and fine-tuned the app for a smoother user journey. Your tasks, now managed with even more grace and speed!

    🔹 Call to Action: I invite all of you, my esteemed connections, to test drive the application! 🚗 Your feedback is invaluable to me. If you notice any slowness in the application, please keep in mind that I've integrated third-party services using their free plans. A shoutout to Clerk.com and planetscale.com for their fantastic services on the free tier! ⚡

    I'm beyond proud of the result and can't wait for you to explore the app. Try it out, play around, and let me know what you think! 🌟 Your feedback will be a crucial part of making this app even better. If you find any issues, drop a note below – your insights are gold!

    👉 **App Link

    Thank you for your unwavering support, and I can't wait to hear your thoughts. Let's continue creating, learning, and growing together! 🌱

    #FullstackDevelopment #Innovation #AppDevelopment #ClerkAuthentication #UserExperience #FeedbackWelcome

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    It would be great to disable the autoComplete of the input.

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    try to make it responsive.

    Marked as helpful

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    The thank you page doesn't show up I opened the console and showed this error: Uncaught SyntaxError: Unexpected end of JSON input

    0
  • Mahmoud Tarek• 650

    @mahmoudAcm

    Posted

    Samll change you can do, in the detail page you can leave the width as it is for the flag but make the height to fit the content of the image coz you want to see the full flag details in the detail page itself but it is not very important for the home cards as if you won't see the full flag then you can see the full flag in the detail page.

    0