Skip to content
OverviewSolutions
5
Comments
8
P
Geo A
@Geo-Bold

All comments

  • Stevan-Dev•420
    @Stv-devlSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I present to you the Link-sharing app solution. Developed using Next.js, TypeScript, Zustand, Node.js, MongoDB, and Tailwind CSS. This app has been created as a full-stack application utilizing the Next.js router API and a MongoDB database. If you would like to review it and provide feedback, you are welcome to do so.

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

    Building the store was interesting. I needed to create a local store to track real-time updates in the DOM, and then push the changes to the backend when the user clicked "save." It was also interesting to create a component that allows the user to upload their profile picture and to integrate it in cloud storage

    Link-sharing-app Solution - full-stack - next.js, node.js

    1
    Geo A•230
    @Geo-BoldPosted 2 months ago

    Congratulations on completing this project!

    Allow me to suggest adding a development login to allow other people to check out your project without making the commitment of creating an account. Also, the logo is crammed against the top of the create account form; consider decreasing the margin inside the form or centering the form container inside the window.

    Aside from these small tweaks, great job!

    Geo

    Marked as helpful
    0
  • Geo A•230
    @Geo-BoldPosted 2 months ago

    Hi Ilya,

    Your implementation is both clean and responsive! I am unsure as to whether this was an intentional design choice, but the inputs in the Currency section appear to be left justified instead of centered. Additionally, the position of the "Clear All" button is not easy to spot on mobile devices. Perhaps consider moving it to the bottom of the form and add styling to make it more noticeable.

    Aside from these QoL improvements, I'd like to commend your for a job well done!

    Geo

    Marked as helpful
    1
  • Kingdavid Christian•150
    @ChristianKayceeSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I learnt how to create a toggle switch here

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

    I had issue with the price updating when I toggle yearly

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

    The final price has an issue whenever I toggle yearly

    Responsive Multi-Step form

    1
    Geo A•230
    @Geo-BoldPosted 4 months ago

    Hi David,

    Congratulations for submitting this challenge!

    After interacting with your UI, I discovered that the section steps container overflows after the form has been submitted and the user clicks on one of the previous steps. Some possible solutions include checking the container margin after submission or even prevent the user from accessing these steps after the form has been submitted.

    Hope this helps,

    -Geo

    0
  • GabrielRodrigo10•10
    @GabrielRodrigo10Submitted 4 months ago
    What specific areas of your project would you like help with?

    The images didn't load when I tried using vercel or github pages. I also had difficulties with the active stats when the user hover above the image, it worked in very specific resolutions, but is not responsive as it could be.

    HTML, CSS and git

    1
    Geo A•230
    @Geo-BoldPosted 4 months ago

    Hi Gabriel,

    Congratulations for submiting a solution!

    The reason your images aren't being loaded is because of invalid file paths. A file path tells the browser where to retreive the asset you wish to load and this can be done in one of two ways. If you want to load your images relative to the root of your project, you can use the following format:

    /images/icon-view.svg

    The first "/" represents your root directory which in your case is the "nft-preview-card-component-main" project directory. Another method is to create a file path that is relative to the file that is attempting to load the asset. In this case you can use "./" to reference the parent directory or use "../" to move up a directory. Using this format, you could use the following:

    ./images/icon-view.svg

    This can be confusing when you first start using it, but some practice and LTW can help alleiviate these growing pains.

    Hope this helps,

    Geo

    1
  • rtoddm•80
    @rtoddmSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of my use of JavaScript form validation in this project. I had to review several things and learn even more.

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

    The challenge that I encountered was learning and applying JS form validation. I consulted several online resources especially MDN Docs.

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

    Three Quick Areas:

    1. Is there a better way to use "rem" in my CSS (best practices) that I failed to implement?
    2. Does my JS form validation adhere to "best practices" or have I implemented that functionality in an eccentric or "hacky" fashion?

    Newsletter Signup Page built with JavaScript

    1
    Geo A•230
    @Geo-BoldPosted 4 months ago

    Hi Todd,

    Congratulations for completing this challenge!

    To answer your first question, you should keep in mind that a "rem" is simply a root defined "em" unit and will not change unless the root font size is changed. Think of them as substituting any fixed unit of measurement inside a variable; their values only change if you redefine the root font size. Your use of "rem" is fine, but you should be aware that you can use pixels for precision, "em" units for component-based scaling, percentages for responsive layouts, and the "vw/vh" for viewport based design.

    As for your second question, your use of the defualt browser form validation is sufficient for this project. That being said, it is only a basic level of validation and cannot be relied on to validate all possible valid email formats according to the full specification of email addresses. For example, the following email addresses are considered valid:

    For more comprehensive client side authentication it may be useful to look at regex expressions, althought this is just a mere bandaid compared to proper server side authentication with email verification.

    Well done and I hope this helps!

    Geo

    Marked as helpful
    0
  • Carson Haskell•120
    @Carson-HaskellSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Implementing the Figma designs precisely, as I'm just learning how to use it.

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

    HTML/CSS is still pretty straightforward for me; mainly it's just working with Figma and implementing the designs.

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

    I could not figure out how to dynamically change font-size without using media queries. I normally use TailwindCSS, which makes something like that a piece of cake. Couldn't figure out how (and I don't know why you would even do it without media queries) so I just ended up using media queries. Would be curious to hear the solution though!

    Blog Preview Card

    2
    Geo A•230
    @Geo-BoldPosted 4 months ago

    Hi Carson,

    First let me say well done with your implementation. The solutions looks very similar to the design file. To answer your question about variable fonts, you should look into using the clamp() function. This allows you to change a value from between a minimum and maximum value using a prefered value. For example:

    font-size: clamp(16px, 2vw, 32px);

    It is important to note that the middle preffered value must be responsive in order to have the font size change as the screen width changes. Hope this helps!

    Good luck,

    Geo

    0
  • elisabed-coder•60
    @elisabed-coderSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing the multi-step form using Angular Material stepper. I started the project with a rough idea and found a design on Frontend Mentor that inspired me. Despite not having access to Figma Design, I managed to create a functional and visually appealing form.

    However, I learned that planning is crucial. Instead of jumping straight into the functionality, I would take the time to plan out the entire project next time. This would include sketching the design, breaking down the functionality, and creating a roadmap. Planning would help streamline the development process and prevent potential issues.

    In summary, I'm proud of the final product and the skills I developed, but I recognize the importance of proper planning and preparation for future projects.

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

    Customizing the Angular Material stepper's styles was challenging. The default styles didn't match my design, and changing them was complex. I overcame this by thoroughly exploring Angular Material's documentation, experimenting with CSS classes, and using Angular's encapsulation features. Persistence and research helped me achieve the desired look and feel.

    What specific areas of your project would you like help with?
    1. Functionality:

    Is the form intuitive and user-friendly? Are there any issues with validation or form submission? Does the stepper handle edge cases effectively? 2. Components:

    Are the components well-structured and modular? Is the code clean and maintainable? Are there any best practices or improvements I could incorporate?

    Angular Material's stepper.

    1
    Geo A•230
    @Geo-BoldPosted 4 months ago

    Hi!

    I think your design is clean, responsive and close to the solution. Unfortunately there is an issue with the number formatter preventing the user from progressing through to the other pages in the form. I would revisit the logic so that more people can appreciate the effort you put in.

    Hope this helps :)

    -Geo

    Marked as helpful
    0
  • Jon D•190
    @jcad57Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I think I could probably have used more "shared styles" between the two 'states' since it's really only the content inside the box changing.

    Interactive Rating Component - vanilla JS

    1
    Geo A•230
    @Geo-BoldPosted 5 months ago

    Allow me to congratulate you for creating a solution that looks extremely close to the mockup. Additionally, your stylesheet is both clean and organized. Well done!

    0