Skip to content
OverviewSolutions
10
Comments
43

BrunoMoleta

@brunomoletaCuritiba/PR | Brazil700 points

Graduated in Architecture but found greater joy in web development. Enjoy giving feedback in other people's code to enhance learning :) I'm a full Stack Developer that uses React | Vue.js | Next.js | Node.js

I’m currently learning...

Angular | Quality Assurance using Cypress.js and Vitest.js

Latest solutions

View more solutions

Latest comments

  • P
    Marcos Valenzuela•710
    @Dantalian5
    What are you most proud of, and what would you do differently next time?

    This project was developed using Next, Tailwind, and Postgres (PRISMA). While I tried to maintain the original idea offered by Frontend Mentor, as I progressed towards a more developed and functional full-stack application, I had to change certain aspects of the application, as well as add certain functionalities that wouldn’t exist otherwise. I am proud of how I used Next’s Server Actions to replace the use and creation of an API, as well as the integration with Postgres and the handling of data in the database. Special attention was also paid to accessibility and responsiveness.

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

    The configuration of authv5 was especially difficult, mainly because it forced me to switch from using Postgres directly to using Prisma (due to issues with the edge runtime and certain modules that the pg library used). Additionally, not involving an API made it challenging to adapt the way form behaviors and data loading were handled at the beginning. Also, to avoid radically changing the behavior and original data provided in the project, some actions are executed with a bit of ‘brute force’ to mitigate certain behaviors that would conflict with the new additions as a full-stack project. And, of course, naming things

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

    All help, feedback , advice, and critiques are welcome! Especially regarding the authorization and database management parts. :)

    Frontend Feedback App | by MV ( Next.js - postgreSQL )

    #next#postgres#tailwind-css#jest
    1
    BrunoMoleta•700
    @brunomoleta

    Ciao Marcos,

    I forked you repo locally, and the first issue that I ran was:

    after setting the local DATABASE_URL at .env, running prisma generate and starting the app, The moment where you try to register an account, the app returns:

    
ClientFetchError: There was a problem with 
the server configuration. Check the server 
logs for more information. 
Read more 
at [https://errors.authjs.dev#autherror]
(https://errors.authjs.dev/#autherror)

    Which ends up at the page: http://localhost:3000/api/auth/error

    Good job setting this error page, because it's not rare that people don't think about the case where the server is off.

    I want to know how you went about this integration with the server. It feels strange for a "normal dev" in the sense that when I saw the error, I wanted to test the API at Postman, but then I read the code a bit more and noticed that it's all Next.js. I did not know this was possible.

    So please explain how this integration works if you'd like.

    Marked as helpful
  • BrunoMoleta•700
    @brunomoleta

    Hello Sara,

    I spent some time going through your code, for I'm learning Vue.js and it's not every day you see a more robust project done in this framework around here as you did.

    First, I would advise you to make incremental commits as you sent only a "first commit" and this way, it's not possible to understand how you progressed with your project.

    Also, I believe it would be more organized if you set all your states at a useStore.ts file. This post by Alex Bruno is relevant for providing a state manager with Composition API.

    I cloned your repo and went to do some refactoring.

    When we have to separate the form from the part on the right where it renders the result of the mortgage, it gets messy. If you'd like, take a look.

    Furthermore, it might be a better option instead of:

    const mortgageAmount = ref<number>()
const mortgageTerm = ref<number>()
const interestRate = ref<number>()
const mortgageType = defineModel<string>('mortgageType')

    To go with reactive object. Again, for better readability.

    The app looks nice and works well, though.

    Congrats on the effort. Best regards from 🇧🇷

    Marked as helpful
  • Eduardo Poot•440
    @EduardoPoot-dev
    What challenges did you encounter, and how did you overcome them?

    Hello, this is my solution for this challenge.

    This project was made in React + Typescript. The API I used is bitly's. To consume the API I used axios, as it makes this task quite easy. To validate the information coming from the API I used Zod. For the global state, Zustand was used, an excellent option to do this activity. For styles use normal CSS

    Url shortening - React, Typescript, Zod, Zustand

    #react#zod#zustand#typescript
    1
    BrunoMoleta•700
    @brunomoleta

    (Please check the Pull Request at your Git hub repo)

    Hello Eduardo, how have you been?

    I took some time to review your project.

    The most important advice for you is to make the React components shorter. You can also divide the CSS into multiple smaller files as it gets easier to read and edit.

    The HTML structure shall be

    <header>...</header>
<main>...</main>
<footer>...</footer>

    But the code provided had a main with only a few lines and many elements 'loose' directly at the body.

    Also, at the header I changed it to two separate nav tags instead of one large one.:

    <header className="header">
      <div className="header__container">
        <div className="header__navbar">
          <img src="/logo.svg" alt="logo" />
          <MenuButton />
          <Nav />
          <NavForm />
        </div>
      </div>
    </header>

    I also created a data.ts file where all data can be stored, where the marketing team would fill, in a real scenario, and the components can stay the same wherever the change, please see MenuMobile.tsx.

    Adjusting the components broke part of the layout, and changes in the css would be necessary.

    Congrats on the project, and keep up the effort.

    Best regards from 🇧🇷

    Marked as helpful
  • BrunoMoleta•700
    @brunomoleta

    At the ul id=previews alignment with the elements above "our creations" and below "loop studios" is more important than a specific distance between cards. So instead of hard coding the column-gap, you can set a justify-content: space-between.

    The same issue happens using the mobile visualization of this list. There's no need to inline-size because the cards will take as much space as necessary horizontally. At this screen size, no need for flex-wrap.

    Also, font sizes are better off with "em" or "rem" instead of "px". I always use "rem".

    Don't set your styles directly at the HTML tags. Always use them at the class or the id. See the Code review at Git Hub. I changed a few HTML tags, and the layout crashed.

    Please document the "making of" your project with a README.md so it's easier for a reviewer to understand.

    Also, check the index.html at the Pull request on GitHub because you used a lot of role. It's better to use the native HTML tags. Such as when you did

    <li role="button">
	<div class="clickable-image" id="deep-earth"></div>
	<span>DEEP EARTH</span>
	</li>

    It's preferable to write:

    <li>
                <button class="clickable-image" id="deep-earth">
                    <span>DEEP EARTH</span>
                </button>
            </li>

    And I suggest you start using the Git bash instead of uploading the project. It might feel weird at first, but over time, you will sense how much better it is because you will be able to see the evolution of the project.

    Best regards from Brazil, Bruno

    Marked as helpful
  • Joseph Reyes•440
    @JreyIV
    What are you most proud of, and what would you do differently next time?

    i was able to make the html and CSS quite easily and felt like I did a good job with the responsiveness. Next time I will try to make the scroller infinite less buggy and more smooth.

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

    The infinite scrolling was giving me trouble. I was able to use chat gpt to help me out but it is still buggy.

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

    How can I write cleaner code. Any redundancies? any tips on the infinite scrolling? mine is buggy

    Single Page Design Portfolio

    1
    BrunoMoleta•700
    @brunomoleta

    Hello Jrey,

    Overall, the first thing I did was to split the code into smaller chunks so it's easier to read. You will see multiple CSS and JS files.

    I also installed the Prettier dependency so that when you run npm format it will format the whole project.

    There's a few HTML tags that you may adjust such as the project's list using

        <div>
        <img/>
    </div>

    You can make it more semantic with an unordered list <ul>[...]</ul>

    Also, it's better to use different heading levels such as <h3>, not only one <h1> and multiple <h2> tags as happened in the services file. You could make the section headings h2 and the highlighted items inside it h3.

    In the CSS code, you hard-coded the values inside the grid.

    You may define the height and width only for the parent element. The children will have the space defined at the grid-template-areas, I made a few tweaks, so please check the services.css file. Also, this reference around CSS Grid is sound.

    Also, the media query should use rem not px. For one, I use a font size twice as big compared to the default user, and it often happens that the layout does not fit properly on my screen even on websites like Linkedin. To learn more about the topic, please check Josh Comeau's blog.

    If you find this review useful, please give it a "helpful" vote.

    Keep up the hustle, Joseph :)

    Best regards from 🇧🇷

  • BrunoMoleta•700
    @brunomoleta

    Hello Korney,

    I cloned this repo of yours to take a closer look and these are the things I believe you can improve at:

    When you do a media-query it's better to write:

    section.basket {
  [...]
  @media (min-width: var(--min-width)) {
    [...]
  }
}

    Writing the code this way, you first set the mobile styles and lastly handle the desktop layout. And the properties that apply to both sizes remain on all screens.

    • divide your less files into multiple ones so that it's easier to maintain your codebase. For example:
    • reset.less
    • dashboard.less
    • modal.less
    • and so on;

    As your css file had more than 1.200 lines, it's hard to find what we are looking for.

    it's also not a good practice to make this many styles anchored to their parent directly on the tag, such as you did here:

    section.about {
  align-items: flex-start;
  row-gap: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.4rem;
  color: grey;

  > h2 {
    font-size: large;
    font-weight: bold;
  }

    we're better off setting this h2 with an ID and then relating the style with the id as the html tag might change over time.

    About the html: I had not seen the menu tag, so I asked GPT about it. It said: It's deprecated. On the internet, I found a human saying: In practical terms, it can be considered half-dead now, as it is only implemented in Firefox. so we better off with nav.

    Also, review your use of the </hr> as you used it plenty in improper places. It should signal a change of scene in a story or a shift of topic within a section..

    Furthermore, every input needs to have a related label, consider looking at that too.

    I sent you a PR on a new branch on GitHub. The code broke unintentionally, but please look as I did a bit of CSS reorganization, it might be helpful for your learning experience.

    Oh, the JS is neat, congrats.

    Best regards from Brazil: :)

    Marked as helpful
View more comments