Skip to content
OverviewSolutions
47
Comments
97
P

markus

@markuslewin2,680 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

  • Utkarsh9571•520
    @Utkarsh9571
    What are you most proud of, and what would you do differently next time?

    well this is my first project with any framework, its first project with REACT and tailwindcss, using these frameworks was not problematic itself but they include some steps which are a headache for me maybe because of my old pc.

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

    Oh man, this was a mess, creating react app using vite did not creates tailwindcss.config.js and postcss.config.js files, which according to all ai's will not made the styles from tailwind stay if the project is deployed and if it deploys, i need (dist) folder to do that which these config file will make,

    my pc does not run npx command, it won't run npm run build, i got confused how to merge these two folders (starter and react) together to make it work.

    i deleted everything and recreated with adjustments 5 times, then deployment issues, finally its done after 3 days of torcher.

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

    tell me, when we install tailwind using vite by the process on their website, then why do we need to install other things like config.js files.

    why does the tailwind states half the process, if it won't applies styles after deployment.

    i need to disable my anti-virus, delete node and reinstall it putting various commands in windows powershell, vscode and git terminals, still it won't run npx command to create config.js files. the gemini also bashing its virtual head to a virtual wall.

    Result summary component

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

    I don't know the exact problems you experienced, but I can definitely see AIs having problems distinguishing between v3 and v4 of Tailwind. This project looks like a hybrid of those two versions.

    If I:

    1. Remove the @tailwind directives from index.css (but keep the @import "tailwindcss")
    2. Remove postcss.config.js and tailwind.config.js
    3. npm uninstall @tailwindcss/postcss

    The project still works as expected, and it no longer uses any of the old features of v3!

    The upgrade from v4 was actually pretty large. It might be worth checking out Changes from v3.

    Marked as helpful
  • Venu G Soganadgi•120
    @V24039
    What are you most proud of, and what would you do differently next time?

    I used NextJS for the first time. I have started to learn Next and took this challenge to create my Next project, I faced some issues but at the end I was able to complete the project.

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

    Faced challenge while utilising Leaflet with Next and due to which I was not able deploy it, will try to fix it and deploy.

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

    Resolving the error window is not defined for map, I tried multiple things but ciuld not resolve it. The issue is happening bcoz of creating icon usin core leaflet I have added the return null condition for when window is still undefined but could not resolve it. If somebody could help with this, it would be great.

    IP address tracker using Next

    #next#react#typescript#tailwind-css
    1
    P
    markus•2,680
    @markuslewin

    Hey!

    The dynamic import of Map is correct. The problem is that /src/app/components/index.ts also imports Map whenever AddressBar and SearchBar get imported. It's that Map import that causes the error.

    export { default as SearchBar } from "./_searchBar";
// export { default as Map } from "./_map";
export { default as AddressBar } from "./_addressBar";
    Marked as helpful
  • Nezer Ekunke•50
    @dBillionaire-Dev
    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,680
    @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,680
    @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,680
    @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,680
    @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
View more comments