Skip to content
OverviewSolutions
10
Comments
43
BrunoMoleta
@brunomoleta

All comments

  • Marcos Valenzuela•710
    @Dantalian5Submitted 4 months ago
    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 )

    1
    BrunoMoleta•700
    @brunomoletaPosted 4 months ago

    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
    0
  • BrunoMoleta•700
    @brunomoletaPosted 4 months ago

    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
    0
  • Eduardo Poot•360
    @EduardoPoot-devSubmitted 5 months ago
    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

    1
    BrunoMoleta•700
    @brunomoletaPosted 5 months ago

    (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
    0
  • BrunoMoleta•700
    @brunomoletaPosted 5 months ago

    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
    1
  • Joseph Reyes•440
    @JreyIVSubmitted 6 months ago
    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
    @brunomoletaPosted 5 months ago

    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 🇧🇷

    0
  • BrunoMoleta•700
    @brunomoletaPosted 6 months ago

    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
    1
  • BrunoMoleta•700
    @brunomoletaPosted 6 months ago

    Hello NiLoBol,

    Please check the Pull Request at Github. I reviewed specially the html and Vue architecture of the project.

    I divided the components into smaller parts and refactored your Button component so there was no repetition, and it's easier to read.

    Please check the commits to understand the HTML semantics I put in there. You only used divs, which carry no semantic meaning. I changed them to form, section, header, main, and footer.

    Also, I removed the raw strings from the components and put it all in .json files.

    The hook you created for the Testimonials is neat. I had not yet seen that, congratulations.

    Best regards from 🇧🇷 :)

    Marked as helpful
    1
  • BrunoMoleta•700
    @brunomoletaPosted 6 months ago

    Check the PR I sent you, please :)

    This code review relates specially to the Code overall organization.

    I separated the CSS into multiple files so it's easier to read and find what we need.

    Also changed how grid-template-columns behaves using the dynamic value: repeat(auto-fill,(min-max(10rem,1fr) test the responsivity to check it out.

    Also, there were a lot of divs that I changed for more semantic tags.

    Please check the commits to see what I changed in your code.

    Please mark the review as helpful if you find it so.

    Best regards from 🇧🇷 :)

    Marked as helpful
    0
  • Luciano Lima•1,290
    @LucianoDLimaSubmitted 10 months ago

    Custom dictionary website. All feedback and criticism are welcome!

    Hi all! Been a while since I last submitted a challenge, and I learned a lot the past few months! I decided to modify the challenge, so you will notice my design is slightly different. And I used styled-components because I had never used it before, so I wanted to have the experience!

    For starters, I decided to remove the single play-audio button and added a smaller one with the phonetic writing and accent/origin between it. It also renders multiple buttons if there is more than one pronunciation provided. I also tried to add a small animation to the antonym/synonym buttons.

    Another change I made, I added a new button right next to the search box, since we're dealing with fetching data, I decided to make so it will not fetch data as you type, as that can be troublesome. There's a way around it by memoizing but I still thought it was better this way, since it's how the other big dictionaries online did it.

    One difficulty I've had was the typescript in the useDictionary context. I had to leave the useDictionaryContext() with any as I couldn't figure out what I did wrong.

    Custom Dictionary app made with React.js

    1
    BrunoMoleta•700
    @brunomoletaPosted 7 months ago

    Hello Luciano,

    I cloned your repo to do a Code Review.

    This is the first PR, I plan to do at least one more, because this was more of a first contact with the project.

    The main thing that's hard to understand is how someone who hasn't done the project is how things are going in Search.tsx.

    It has several functions and as much as they are commented out, it's a bit confusing.

    The first thing I did was to fix the initial state of validation using:

    const [validation, setValidation] = useState<ValidationType>({
    isEmpty: true,
    isValid: false,
    isLoading: false,
    currentWord: “”,
  });

    You were using undefined if I'm not mistaken. But it's either Empty or not, Valid or not. So the state starts Empty and not Valid [...].

    At the moment the App is broken, but I'll send you the PR anyway so you can follow my line of reasoning.

    In the worst case, if another PR isn't sent and you don't want to merge, which is perfectly acceptable,

    I suggest reviewing the way this state was initialized and simplify the Search.tsx component.

    You would then have to adjust several things.

    Best regards from Brazil, Bruno

    Marked as helpful
    1
  • Marcos Valenzuela•710
    @Dantalian5Submitted 10 months ago

    This is my first React-Typescript project, and it was quite an interesting journey filled with lots of new learning opportunities. It took some time to get everything in place.

    Weak Points:

    • The use of react-router in this specific case was a bit confusing when navigating through the page, which made me doubt whether it was the right solution or not.
    • Using TypeScript made many things easier and eliminated a lot of potential errors along the way, but I realize that the indiscriminate use of 'any' wasn't the best choice in some cases, and in others, the type declarations could perhaps be improved.
    • After analyzing more advanced projects from others, I could see that maybe a more appropriate organization of the project structure and components in general could have been applied.

    Despite everything, it was a lot of fun, as always. I look forward to your advice and feedback, and thank you in advance ;) .

    Devjobs web app solution | by MV

    1
    BrunoMoleta•700
    @brunomoletaPosted 7 months ago

    Buona sera Marcos,

    I've reviewed this project of yours also with a PR and everything. First, do not feel obliged to accept the pull request.
    Unfortunately, I ended up breaking the filter feature :(.

    I wanted to clean up the action prop that was hard to understand.

    And I know it's unnecessary to have that, though I couldn't go around it. But please check out the Git commits, as I made an effort to make each as specific as possible.

    The main thing I did was to organize the states using Zustand state manager. Also, your Button component had a reserved word "type" at your prop. I changed the name to isLink with the boolean type since it is a link or not.

    Please also check the initial color setter function. I believe it got cleaner.

    The feat you did at filtering the form as the user types is swell. Congratulations on developing it.

    Best regards from Brasile, Bruno

    Marked as helpful
    0
  • Ruben•250
    @rugarcia25Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I have learned a lot about how to manage flexbox and grid, I think that despite being a junior, it has been very entertaining to get the vast majority to follow the same flow and design, although obviously, it is not perfect.

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

    Without a doubt, managing the inside of credit cards and being able to adjust them in position while maintaining their aspect ratio in the vast majority of resolutions.

    In the end I managed to "solve" it by trying and making a lot of mistakes.

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

    Especially in the CSS part since, in the end, it has been very difficult for me to move the cards to a position without breaking the form part in different resolutions.

    Responsive Interactive Card Details Form

    1
    BrunoMoleta•700
    @brunomoletaPosted 7 months ago

    Hola Ruben,

    I suggest some adjustments to your code. I've cloned it from Front End Mentor and made a PR at Github.

    It involves retrieving the values from the form at the Card when the user refreshes the page and the overall architecture of the Javascript part of the project.

    I also removed the placeholder from the inputs, as it's not a good design practice.

    I know it was in the proposed design, but placeholders fool the user, as described by the UX designer Adam Silver.

    Please check the commit history, as it might be easier for you to follow how I thought your project through.

    Also, I removed the "required" you put on the inputs. The idea is to use a library such as Joi, Zod, or Yup to give the user a helpful message when they don't fill up the form as we expected.

    (The red line below the form when trying to submit the wrong data).

    The warning from HTML is far from ideal. I didn't do it here cause, to be honest, I don't know how to do it in VanillaJs, I've done it only at React.js.

    The way you named your variables is very organized, so kudos on that. It's no small thing, for real.

    Keep up the hustle, amigo :)

    Saludos de Brasil

    Marked as helpful
    0
  • BrunoMoleta•700
    @brunomoletaPosted 7 months ago

    Hallo Aydan,

    I cloned your project locally to see it closely and give you a more precise feedback.

    It took a while to understand the project's code, as the files are long and accomplish multiple things.

    For example, the details.js file has the HTML component and the function that fetches a country's info. Try to make each separate so it's easier for people to read your code and contribute.

    The same goes for creating a file for the dark mode handler, separating the function from the header component.

    Also, it would be more performant to make several API requests so that we don't end up with a large object containing all the countries. And perhaps the landing page could fetch a few random ones instead of every country.

    And when filtering the continent, there would be a new fetch request to the back end, not a filter at the large object.

    About the CSS, I noticed you used object-fit: cover at the flags. Perhaps that's not the best alternative because there is no "cropped flag".

    So you may be better off using object-fit: contain with a background behind the flag to distinguish the background of the app from the one of the cards.

    Also, the div you used to handle the dark mode should be a button. In this case, the Tab key would be available.

          <div id="color-switcher">
        <i class="bx bx-moon" id="icon"></i>
        <span id="mode" @click=${onModeChange}>Dark Mode</span>
      </div>

    I also advise you to test different font sizes on the browser, as components got very large on my screen. In my local environment, I use a default font size of 24px. I imagine you tested locally with a smaller font, and things looked ok, but the components here got disorganized, and the layout misplaced.

    If you are interested in learning about suiting different font sizes better, please check this post from [Josh Comeau] (https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/) :)

    You did a terrific job using 'id' frequently in the tags. It makes life easier for people who test it. So I suggest you keep doing so :)

    Keep up the great effort Aydan.

    I'm sure that you are a better programmer since the time you did this project, but I got interested in reviewing it for it is a nice challenge.

    Best regards from Brazil, Bruno

    Marked as helpful
    1