Skip to content
OverviewSolutions
60
Comments
5
Abel Muro
@AbelMuro

All comments

  • Abel Muro•1,890
    @AbelMuro
    What are you most proud of, and what would you do differently next time?

    I am most proud of making this app into a full-stack app. I used the MERN stack, react, redux, express, node.js and mongoDB

    I also used framer-motion for the dialogs that pop up in the app. I used a bit of animation to improve the user experience.

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

    The biggest challenge is implementing correct client-side routing. Of course, I used React-Router-Dom to do just that. But this app really tested my knowledge of using this library in ways I never thought of before. I learned of how to use nested routing to display certain components at the right time

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

    This is a rather large project. If anyone takes the time to read the code, I will be more than happy to learn from their constructive criticism.

    Note taking full stack app with React, Node.js, and mongoDB

    #express#mongodb#node#react#redux
    1
    Abel Muro•1,890
    @AbelMuro

    If you have any issues with logging in, please let me know. Logging in with google is creating some inconsistent issues.

  • Abel Muro•1,890
    @AbelMuro
    What are you most proud of, and what would you do differently next time?

    I am most proud of making the website as responsive as possible. The website will look good on any device. I also used framer-motion to add a bit of animation to the project images. When you hover over the images, it will animate a dark overlay over the image and fade-in two buttons. What I would do differently next time is use GSAP to add scrolling animation to the website, it has been a while since I've used that library

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

    The biggest challenge was making sure the website was fully responsive on all devices. I overcame this challenge by using my own knowledge of CSS and @media queries. I may have used more @media queries than I should have, but the end result was worth it

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

    I don't think I needed any help with this project, but I'm always open for advice and constructive criticism.

    Single Page developer portfolio with React

    #react
    1
    Abel Muro•1,890
    @AbelMuro

    There was an issue with the developers photo in the website. For some reason, adding the alt attribute to the img tag was causing the photo to enlarge exponentially. I removed the alt attribute from the tag and it fixed the issue.

  • Abel Muro•1,890
    @AbelMuro

    For the circles in the background, one thing I can recommend is using position: absolute and z-index: 1 to position the circles on the page. You can also use the universal selector and apply the properties below..

    * { position: relative , z-index: 2}

    The selector above will ensure that all elements on the page will be on top of the circles, and so the circles will not interfere with the other elements on the page.

    Hope this helps!

  • Abel Muro•1,890
    @AbelMuro

    Hmm, I'm not sure why the screenshot that is generated doesn't fill up the entire page. I know that I set height: 100vh on the body tag selector so I'm sure that the app SHOULD fill up the entire page. And this is proven when you follow the link for the app. Maybe its a bug with the screenshot generator? I'm not sure.

  • Abel Muro•1,890
    @AbelMuro

    The solution looks nice, but it looks nothing like the design that was given to you. The whole point of these front end mentor challenges is to make a website/app that closely resembles the design.

    Marked as helpful