Skip to content
OverviewSolutions
7
Comments
20
Fernando A. Malfavón
@Wlfernando

All comments

  • P
    Michael•180
    @michael-schlueter
    What are you most proud of, and what would you do differently next time?

    I'm most proud of getting the app to work as expected with tools I've never used before. I also tried to do a bit of extra work in creating and validating schemas for the API responses. That worked quite well.

    I neglected the styling aspect a little bit and took some shortcuts. Next time I probably would come up with some ideas for better loading / error indicators or a custom Not-Found page. I focused mainly on the functionality of the page.

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

    The main challenges were working with TanStack Router and TanStack Query in this project. I haven't worked with those tools before, so it took a bit of time to get familiar with them. Reading the docs and look at some exemplary implementations definitely helped.

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

    I had trouble with displaying the names of the border countries. The API only provided the country-codes for the border-countries. I thought about fetching the data for all countries to get the country name with the help of the respective country-code but that seemed rather exhaustive. An alternative would be to make multiple API requests for the specific border countries (one for each country) to get the country name that way, but that also didn't feel right. In the end I used the data file which was provided to get the country name that way. That's problematic because of possible (future) inconsistencies between the API data and the static data in that file. So I don't know what the best approach would've been here.

    I also tried to implement infinite scrolling for displaying all country cards but that got way over my head. So I decided not to pursue this for a project of this scope. But I may revisit this challenge again.

    REST Countries API with Color Theme Switcher

    #react#tanstack-query#tailwind-css#zod#typescript
    1
    Fernando A. Malfavón•370
    @Wlfernando

    Hi! it seems you had tough with the API. I also did this project and I can say by consulting the doc of the API that you only need to make a second call to this endpoint that I marked in the link adding "fields" and "codes" to get only de names of the borders. An example be: https://restcountries.com/v3.1/alpha?fields=name&codes=AUT,BEL,CZE. Each code become a country filtered by only the names.

    If you are interested in checking my solution, I left all the calls in one file named src/lib/api.tsx in my project

    Marked as helpful
  • Adán Maidana•270
    @AdanMaidana
    What are you most proud of, and what would you do differently next time?

    I liked how my final design turned out, it's very similar to the original image. I also managed to replace some images by using code and designing them as closely as possible because I thought it looked better that way. I also used Figma to create a prototype of how I had to build the entire site, and I feel that it turned out quite well for being the first time I used it.

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

    I didn't know how to use Grid, so I learned it from scratch with YouTube tutorials and ChatGPT.

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

    I'd like to know how to make some rows smaller and others larger so I can customize each element to my liking without making the grid layout look bad. For example, I'd like to make the first div smaller so that the fourth div can take up a bit more height, but I always end up messing up the entire grid.

    Responsive Landing Page using CSS Grid

    1
    Fernando A. Malfavón•370
    @Wlfernando

    grid-template-rows: 30px 100px 50px; make three rows; the first one become 30px height, the second one is 100px and the last 50px. If you need in this example a div with 130px height, declare in that div grid-row: 1 / 3, grid-row-start: 1; grid-row-end: 3;, or use grid-areas to declare the corresponding space. If you wonder why is 1 / 3, is because it consideres the lines that wraps the rows.

    Good job! the Devtool seems clean

    Another thing before I forget, the divs that are numbers "uno, dos, tres, cuatro..." should be section elements or articles; and the container should be a main element. Use semantic HTML. ^^

    The "button" have a bug when hover, try to declare the hover with the div, not to the button or wrap the pointer within the button and make it position: relative and the pointer position: absolute.

    Marked as helpful
  • Rustom0•110
    @Rustom0
    What are you most proud of, and what would you do differently next time?

    learned lot about Grid

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

    am having problem with mobile version i don't know what to do need help.

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

    i would like help for responsive caus everything am tryin its not working and i don't even know why its not working

    Bento Grid solution

    1
    Fernando A. Malfavón•370
    @Wlfernando

    I don't gonna lie, it seems a little convoluted. So I going to share with you this grid game and a guide.

    • The height with vh unit in body is causing trouble
    • The fr unit refers to fractions so use it preferably with integers. Example: 1fr 1fr means 1/2 for each unit; 3fr 1fr 1fr means 3/5 1/5 1/5 as well.
    • You don't need to wrap within box2 the box2-2, box4, and box5.
    • For each row you can use px in grid-template-row to define the space, like if you use height for each element

    With the declaration you have I made a close solution, so you almost there. Just remember that % is related to the measure of parents, vh-vw to the viewport, px is a fixed size, and fr use the available space; you can combine these units in grid-template. Grid is an awsome tool that helps you to avoid wrapping with a lot of divs where the colums is the width and the rows is the height, keep that in mind.

    I also did this challenge so you could go and check it with the devTools of your navigator.

    Marked as helpful
  • Fernando A. Malfavón•370
    @Wlfernando

    Great job! There's one thing that picked my attention: Why do you declare that many rows?

    You could declared grid-template-rows: 250px 75px 175px 250px; adding to your declare on

    grid-template-areas:
   "box7 box1 box1 box4"
   "box7 box2 box3 box4"
   "box8 box2 box3 box4"
   "box8 box6 box5 box5";

    or declare:

    grid-template:
  "box7 box1 box1 box4" 250px
  "box7 box2 box3 box4" 75px
  "box8 box2 box3 box4" 175px
  "box8 box6 box5 box5" 250px
/ 1fr 1fr 1fr 1fr;

    (Notice that I didn't use the function repeat here because is invalid with this short-hand).

    Also, your declaration with grid-auto-rows: repeat(10, 60px) is invalid, be careful with that. You can know it by opening the devTools of your navigator.

  • Fernando A. Malfavón•370
    @Wlfernando

    You almost got it. There's unreadable text between 900px and 767px on the section "social media" and "create schedule quicker".

    I liked the DOM with semantic HTML. The only "complain" (for say it in some way) I have, it is not necessary to wrap the img in a div.

    Overall, great job!!

    Marked as helpful
  • ianwilk20•450
    @ianwilk20
    What are you most proud of, and what would you do differently next time?

    I'm most proud of this being my first project using tailwind styling. I learned a lot and it'll be even easier to use Tailwind next challenge!

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

    I found a little issue with the increment and decrement pill. Each time I would increment or decrease the quantity of an item, the pill would resize slightly. My hunch was that this was happening because the pill would resize to accommodate the changing quantity of text. After some research, I learned how to prevent that. By adding a fixed, ex. 0.75rem, to the quantity text the pill no longer resizes when incrementing or decrementing the quantity.

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

    Any feedback is welcome!

    Product list with cart

    #tailwind-css
    1
    Fernando A. Malfavón•370
    @Wlfernando

    hi! I saw the DOM and I recommend to use less divs and use more semantic HTML, you could use: <ul>, <li>, <section>, <aside>, <article>, etc. Its a theme of accessibility. Or use the attribute role and aria-* on the divs.

    Also, relate the code to the repository for the project, please.

  • Eric Aguayo•1,125
    @EAguayodev
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the grid-template: repeat(4, auto) / repeat(1, 16rem), which uses this method to bring the desktop design closer to the original.

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

    I encountered grid-template: repeat(4, auto) / repeat(1, 16rem) not adapting to mobile when adjusting the property for mobile, and I solved it using Flexbox.

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

    I would like to know why the following code grid-template: repeat(4, auto) / repeat(1, 16rem) Didn't work when I adjusted the 16 rems to adapt to screen sizes to mobile stacking in a column. I had to use Flexbox instead of mobile to accomplish it.

    Bento-grid-solution

    1
    Fernando A. Malfavón•370
    @Wlfernando

    I had the same problem with the short-hand grid-template using the function repeat(). It just say is invalid. You also encounter the same problem so I investigated it. It says in mdn: Note: The repeat() function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the "ASCII art". So, if you want to continue using repeat, use grid-template-[rows or columns] or omit the function in the short-hand grid-template.

  • Michael Adebumiti•120
    @Mike-Kay
    What challenges did you encounter, and how did you overcome them?

    Styling the radio inputs was a bit difficult, as the styles that can be applied to default radio input are limited. I had to learn how to create keyboard accessible custom radio buttons.

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

    I tried to search for help on how to format the input values(numbers) to show the commas, but i could not find a perfect solution. I would like to know how i can solve that, and also, is it possible to customize number inputs that allows users to enter values instead of the default one? I would really appreciate corrections and feedbacks on how i can better improve. Thank you

    Mortgage repayment calculator - HTML, CSS, and JS

    2
    Fernando A. Malfavón•370
    @Wlfernando

    hi! about your question, I introduce the instance Intl.NumberFormat() this one helps to your problem on commas. The second question I don't completly understand, do you refere on the options that apear on the tooltip? if that's the case, you can relate lists to inputs by using tag <datalist />; if it not the case, let me know.

    Marked as helpful
  • P
    Michael•180
    @michael-schlueter
    What are you most proud of, and what would you do differently next time?

    I learnt quite a lot in terms of accessibility in relation to forms. I didn't know you could announce certain things via a screenreader.

    The input validation and error handling for the different input fields were quite exhaustive. I get why people opt for certain libraries to manage more complex forms.

    I can still improve in planning the app beforehand. This time I focused mainly on the markup and styling of the app and got that done quite quickly. But there were certain details I overlooked which is why I had to adapt the markup and styling over and over again. The same goes for implementing the calculating logic. Just taking more time and takingsthose things into consideration beforehand would probably end up saving a lot of time in the end.

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

    Styling the focus states of the different input fields got a bit hairy at some point. I used different techniques (CSS only with the :has selector or the peer utility, JS with the help of additional React state) and got to know the advantages / disadvantages. In a real-world project I would probably opt for one coherent approach but I left it this way in this project.

    I also got to know some limitations of using Tailwind when I needed to style the radio button. But I got it working with the help of some custom CSS.

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

    I ran into a bit of trouble formatting the user input (just like in the design file). Displaying 300,000 instead of 300000 is just not possible in an input field of type number. But it felt somewhat wrong to use an input field of type text for a number input. You would have to add a bit more of input validation to make sure the user doesn't put in any text. Additionally you'd have come up with additional state to separate between the value you are displaying (formatted) and the value you are calculating the result with. In the end I decided that it's not worth it to implement the formatting in such a small project. Maybe I'll revisist it later on or find another approach.

    I also didn't know if I should give the user additional feedback that only numbers could be put into the form fields. There is no error message popping up, there user is simply unable to put anything other than numbers into those fields. I thought it was kind of self-explanatory in an app like this.

    Responsive mortgage repayment calculator

    #react#tailwind-css#typescript#vitest#react-testing-library
    1
    Fernando A. Malfavón•370
    @Wlfernando

    I recommend to use the input with type text and inputMode numeric (this one only make appear the board for numbers), you could make the validations or use a library. I also did this project so you could go to see it, the name is src/components/InputNum.tsx

    Marked as helpful
  • Techkie Creations•510
    @Techkie-Creations
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that i was able to update the code respository to a more cleaner and efficient code, one that is more responsive

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

    I still had an issue with the name of the countries because it would not wrap so as an alternative I reduced the font size of the names in such a way that they still stand out but do not go out of bounds save for one country's name.

    Anyone with a way to solve this issue, please share.

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

    I need help with the word wrapping, I tried all the CSS options from overflow-wrap to word-wrap but no luck.

    REST Countries API v1.0.1

    #react#bootstrap
    1
    Fernando A. Malfavón•370
    @Wlfernando

    hi! If you only want a one line text, use text-wrap, overflow, and text-overflow. Or if you want a fixed lines use display: -webkit-box, white-space, and -webkit-line-clamp. Here a video: https://www.youtube.com/watch?v=Jdkvmq8MtJY&t=35s. And I recommend use the svg when the user click one of the cards.

  • Fernando A. Malfavón•370
    @Wlfernando

    hi! I see you have struggled with the position of your elements below 800px. Because you used flex, use the property order in the sons and that would fix it.

    Marked as helpful
  • Elizabeth Sotomayor•230
    @elizabethrsotomayor
    What are you most proud of, and what would you do differently next time?

    I'm most proud of working with a new framework (React.js) and learning more about CSS selectors like ::before and ::after. Going into this project, I had some familiarity with React but had not tried building a project on my own so this was a great way to brush up and learn some new skills. Next time I would try to better plan out how the app would be structured because I had an idea of how everything would work together but didn't fully write out my plan.

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

    A major challenge I encountered was with managing the state in both the and components. In order to fetch the values inputted into the calculator, I had to handle the state in the parent component (``) and pass both the values and set state functions as props to the child components. Using the React documentation helped illustrate this concept more clearly and helped me understand how this is implemented.

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

    I would like help with rendering custom error states as shown in the mockup. I made the input fields required but aside from that it doesn't change the color of the labels when a field is empty.

    React.js Responsive Mortgage Calculator App

    #react#vite
    1
    Fernando A. Malfavón•370
    @Wlfernando

    it depends how deeply you want to implement the solution. An easy try is use the pseudo-class :user-invalid. This one works with those that need to be filled, but not like radio or checkbox. Other is to retrive the value of validationMessage using useRef and update the state of the field with validitySate (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState). Or use the library react-hook-form, I never use it but I heard is fine.

  • Carlos Maracara👷👨‍💻•800
    @MaracaraCarlos
    What are you most proud of, and what would you do differently next time?

    I had a lot of fun making this App, I also took the opportunity to use Reactjs and React Hook Form.

    Built with:

    • Semantic HTML5 markup ✨
    • Flexbox 🤸‍♂️
    • CSS Grid 🌐
    • React ⚛️
    • React Hook Form
    • Sass 🎗️
    What challenges did you encounter, and how did you overcome them?

    The basic use of React Hook Form

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

    Any suggestion will be welcome.

    Responsive Mortgage Calculator

    #react#sass/scss
    1
    Fernando A. Malfavón•370
    @Wlfernando

    looks fantastic. I suggest to use more html semantics and review the dimensions 481px to 900px, it is hard to fill some inputs.

  • Okoro Joshua Osinachi•220
    @Joshua65676
    What are you most proud of, and what would you do differently next time?

    What am I proud of?

    I’m proud of how the space tourism website turned out. One of the highlights for me was successfully implementing a responsive design that looks great on both desktop and mobile devices. This was my first time using Tailwind CSS extensively, and it made styling so much more efficient and enjoyable. Additionally, I managed to integrate interactive elements like the destination selection and crew details, which enhanced the user experience significantly.

    What would I do differently next time?

    Next time, I would focus more on optimizing the website's performance. While the site functions well, I realized some images and assets could be better optimized to improve load times. Lastly, I would spend more time on accessibility to ensure the website is usable for everyone, including those with disabilities.

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

    One of the significant challenges I faced while building the space tourism website was managing the state and navigation in Next.js.

    To overcome this, I turned to Bing Chat AI for assistance. The AI provided clear and concise guidance on how to implement state management using React hooks and context. It also helped me understand how to set up dynamic routing in Next.js, which was crucial for navigating between different pages of the website. Additionally, Bing Chat AI offered valuable tips on optimizing the performance and accessibility of the site, which greatly improved the overall user experience.

    Thanks to the support from Bing Chat AI, I was able to resolve these challenges efficiently and enhance my understanding of advanced React and Next.js concepts.

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

    Navbar active view

    Space Tourism Website by JoshDev using Next TSX, and Tailwind CSS

    #next#typescript#tailwind-css
    1
    Fernando A. Malfavón•370
    @Wlfernando

    I see you have commented the NavBar in the layout, I recommend to erase all other NavBars and decomment that in the layout. You should fetch the value in URL with usePathname to know what link is active. Here is the sheet: https://nextjs.org/docs/app/api-reference/components/link#checking-active-links

    Marked as helpful
  • P
    Ryan McGuire•280
    @mackieva
    What are you most proud of, and what would you do differently next time?

    I'm looking to move from CMS work to the React/Next.js world career wise so I thought this would be good practice. I also wanted to mess with tailwind a little more, along with a chance to work with framer-motion to do some small animations.

    I didn't want to use any pre-made components for UI and I'm pretty happy with the final result. Moving forward I'll probably look to sand off the rough edges, and one other thing I'd like to do is add gesture controls for the sliders instead of the pagination, looking forward to dive into that with framer-motion.

    Next.js build with tailwindcss and framer motion

    #motion#next#tailwind-css
    1
    Fernando A. Malfavón•370
    @Wlfernando

    I like it. I should add that the media queries are to high

  • Filip Stojkov•550
    @thentrsfs
    What are you most proud of, and what would you do differently next time?

    I am proud of this whole project, it was not easy at all.

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

    Biggest challenges were to make website seem as identical as i can.

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

    I would like help and reviews about anything that someone sees but especially about images and how to make them responsive and have good quality. Thanks

    Space Tourism Website using Quasar

    #pinia#vue
    1
    Fernando A. Malfavón•370
    @Wlfernando

    hi! you could use a mask-image on the crew to give a parcial opacity, I use it in mine. In the case you use the element img, try with object-fit, subsecuently it depends on what are you using display on parent to make fit into it (grid, flex, block, etc). In general, but not the only way, try with % on the img width and height or % width with aspect-ratio. These are some approaches.

    Marked as helpful
  • Isiak Quadri Opeyemi•200
    @Quadrial
    What are you most proud of, and what would you do differently next time?

    it is a good project to learn with

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

    mapping issue

    Space-Frontend

    #tailwind-css#vite#react
    1
    Fernando A. Malfavón•370
    @Wlfernando

    hi! I see the design doesn't work responsibly, keep it up. Need any help with something?

  • Alejandro Cañon•260
    @alecanonm
    What are you most proud of, and what would you do differently next time?

    • I am proud to built this page with different technologies and made it totally functional and responsive

    • I would do differently put the JSON data in a base data like mongoDB or Postgres to put more information if the customer wish it

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

    i didn't find something that had could be a challenge

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

    I would like to know if i built the project in the right way with the technologies that i used, and also i would like to know if the hooks and my solution are right and if there's a better way to do it i would like to know it

    Product List built with NextJS and tailwind and typeScript👨🏻‍💻

    #next#tailwind-css#typescript
    1
    Fernando A. Malfavón•370
    @Wlfernando

    I watched you images deformed when shrinking the viewport. I recommend give them a static width and height adaptaded with media queries or use the element <picture> to prevent this behaivor. Also the popup isn't like the displayed in the design: for the text in it, you could meet text-wrap and text-overflow; and for the dimension of the popup, you can work with media queries. I worked this one with nextjs, too. If you want to read my code, here is my solution: https://github.com/Wlfernando/Product-list-with-cart

    Marked as helpful