Skip to content
OverviewSolutions
47
Comments
95
P

markus

@markuslewin2,640 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Nezer Ekunke•50
    @dBillionaireDev
    What are you most proud of, and what would you do differently next time?

    This is the first React-based website I built, and I'm really proud of how much I learned through the process. I designed it to mimic a simple e-commerce shopping experience, with core features like a dynamic product listing and a functional cart system that lets users add, remove, and view selected items.

    One of the things I’m most proud of is that I didn’t just make a static site. I actually got to handle real React concepts like state management, props, conditional rendering, and component structure. It also taught me how to manage routing, user interactions, and organize files in a clean and scalable way.

    Beyond the development part, I went through the full process of building, optimizing, and deploying the site using Vercel, which gave me a good sense of how real-world React apps go from local code to a live website.

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

    Challenges I Encountered While building this project, I faced quite a few challenges that really helped me grow as a React developer:

    Understanding State Management One of the biggest hurdles was figuring out how to manage state between different components, especially for the cart system. Making sure the cart updated in real-time whenever a product was added or removed took a lot of trial and error before I fully understood how useState and props worked together.

    Component Reusability and Structure At the beginning, I wrote a lot of repeated code, and I struggled to separate layout from logic. It wasn’t until I refactored that I started thinking in terms of reusable components, which made the code cleaner and easier to maintain.

    Dynamic Routing and Conditional Rendering Setting up routes and making sure the correct component loaded based on the URL was confusing at first, especially handling things like the cart display or error pages. Learning react-router-dom and how to conditionally render content based on state was a key challenge.

    Deployment Issues When I deployed the site to Vercel for the first time, the images and some assets didn’t load because I was referencing paths the same way I did locally. Understanding the difference between src/assets and public/ paths in production took some research to solve.

    These challenges really helped me understand how React handles data flow, component reusability, and deployment — and they pushed me to write better code and structure my projects more professionally.

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

    Clearing the image border, when items are removed directly from the cart and also whn order is confirmed.

    Product cart using React.js

    #accessibility#react
    1
    P
    markus•2,640
    @markuslewin

    Should the border be displayed only when the item is in the cart? Could you remove activeItems, and instead reuse the check you wrote to toggle buttons?

    const Cart = () => {
  return (
    <img
      style={{
        border: cartItems.some((cartItem) => cartItem.id === item.id)
          ? "3px solid hsl(14, 86%, 42%)"
          : "none",
      }}
    />
  );
};
  • Deji-Hb•80
    @Deji-Hb
    What are you most proud of, and what would you do differently next time?

    I got to learn the specific use of the differrent html tags instead of just repeating divs for each container. From this project i understood how to effectively use media queries and use javascript to make the media queries reponsive.

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

    The major issue i faced was with the positioning of the links in the navigation menu and also how differently the elements behave for desktop and mobile devices for example i think the hover for desktop gets converted to click for mobile devices. i ended up having to disable the hover for dropdown for my media query and increasing the width of the containers to properly modify the elements inside.

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

    I have an issue with the javascript when i click on features to enable its dropdown menu. on clicking features it brings out the dropdown but when i click it again the dropdown doesn't disable until i click the company link to enable its dropdown then the features dropdown start working properly.

    responsive navigation menu using css and Javascript

    #accessibility
    1
    P
    markus•2,640
    @markuslewin

    I think company_dd is intended to be features_dd on line 24!

    Marked as helpful
  • Nikhil K Patel•110
    @Nikhil-786
    What are you most proud of, and what would you do differently next time?

    implement leafleft and IP tracker logic for first time. organizing the code

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

    responsive design is the challenge . i have started learning and implementing hope to get better for each project

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

    responsive design is still what i am learning .

    .env file is not working for me in vite environment so would need help on it when i am creating key with name is VITE_API_KEY and importing in my app component its showing me undefined have tried to find the solution and tried to resolve but was not able to resolve. i have posting in help channel is discord but no reply. kindly help if any know about this

    Responsive design , Visual studio

    #react#typescript
    1
    P
    markus•2,640
    @markuslewin

    How are you setting the key? It works for me when I create a file .env that looks like this:

    VITE_API_KEY=my api key

    Note that the API key will be visible in the browser. If you want to keep the key a secret, you have to set up some server function for the app to call, and then have the server function make the call to ipify!

  • Austin Donovan•200
    @Iskarr
    What are you most proud of, and what would you do differently next time?

    building out my backend api, next time I will probably build out the backend to work first instead of building out the design

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

    hosting the URL shortener was hard because it didn't want to work with my Node server and Vercel. Luckily, I did get it to work after some tinkering with my code and changing the way that I handled routing in Node.js.

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

    Probably would like to know a more efficient way to handle getting the API call for the shortly link because building an entire node server for this might not be the most efficient way to build this.

    Shortly Responsive

    #next#node#tailwind-css#axios
    1
    P
    markus•2,640
    @markuslewin

    Next actually supports creating those types of request handlers in the same project as the rest of the app. They're called Route Handlers. It'd look something like this:

    // /src/app/api/shorten/route.ts
export async function POST(request: Request) {
  const { url } = await request.json();

  // todo: fetch(cleanuri)
  console.log("Shorten", { url });

  return Response.json({
    success: true,
    shortUrl: "<shortUrl>",
    originalUrl: url,
  });
}

// In component: const response = await fetch("/api/shorten", ...)

    You could also use the newer Server Actions. They're essentially functions that get compiled to server endpoints:

    // /src/app/actions.ts
"use server";

export const shorten = async (url: string) => {
  // todo: fetch(cleanuri)
  console.log("Shorten", { url });

  return {
    success: true,
    shortUrl: "<shortUrl>",
    originalUrl: url,
  };
};

// In component: const result = await shorten(url);
    Marked as helpful
  • Jenny Eikens•250
    @Jenny-Eikens
    What are you most proud of, and what would you do differently next time?

    I am most proud of the filtering functions I wrote for this project, as this is an essential functionality that I assume will be needed often working on real websites.

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

    When I was scaling the company logos down for mobile screens, I ran into the issue that the images seemed to longer be left-aligned, i.e. they seemed to have some margin or padding on the left that I couldn't figure out how to get rid of. I learned that this happened because scaling always happens from the center, so the image will shift visually. I learned to prevent this by applying the CSS transform-origin property (in my case, transform-origin: left).

    I also, for some reason, wasn't able to color in the free spaces of the mobile background svg. To solve this, I eventually resorted to adding a <rect> element to the svg to overlay it and thus fill in the previously white spaces.

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

    There is one thing I wasn't able to figure out: on mobile screens, when adding filters, they get squished once they wrap onto a new line. I worked around this by giving them a min-height, but I feel that there has to be a better solution. I don't understand why this behavior happens, the container can grow in height to accommodate for new lines as I didn't limit its height anywhere. So if anyone has an explanation for this, I'm all ears!

    Job listings with filtering built with Next

    #accessibility#next#typescript#tailwind-css
    1
    P
    markus•2,640
    @markuslewin

    How would the browser know you want the filters to be 40px, though? 🤔

    When the filters are on one line, the Clear button is the tallest child of the .skills container. The default behavior of flex is to stretch the flex items to fill the container. In this case, it stretches the filters until they're the same height as the button. When the filters wrap, the filters container is larger than the Clear button, and so the items no longer need to stretch to fill the .skills container. (Now the Clear button is stretched instead, to fill the space created by the filters).

    I think min-height sounds like a good solution! You could also use padding to set an "implicit" minimum height, like you did for the Clear button.

  • P
    Feng•380
    @niuguy
    What specific areas of your project would you like help with?

    I put the images to be imported in the public folder , I understand the best practice is to put in src/assets, but I didn't find a good way to import a batch of images. If someone can share with me how you manage image importing in Vite, I would be appreciated.

    vite+tailwind4.0

    #vite#tailwind-css
    1
    P
    markus•2,640
    @markuslewin

    You should be able to go:

    function TestimonialCard({ testimonial }: TestimonialCardProps) {
  const firstName = testimonial.name.split(" ")[0].toLowerCase();
  const imageName = `image-${firstName}.jpg`;

  return <img src={new URL(`./assets/${imageName}`, import.meta.url).href} />;
}

    From Static Asset Handling!

    Marked as helpful
View more comments