What's the modern way of making front end for a small project?
9 pointsby pkrzysiek2 days ago11 comments
  • matt_s2 days ago
    You state you have to make things for uni projects. Without knowing the potential restrictions around using AI for your University, I would say go on youtube and take a TailwindCSS fundamentals course and have the docs handy. Just focus on the concepts and work thru the examples. TailwindCSS is more of a set of shorthand syntax for actual CSS. If you have a plugin for your editor, it should show you the actual CSS for the Tailwind syntax.

    Then pick a component library, like DaisyUI (or another component lib), that uses tailwind under the hood. Use tailwind for your layout, grid, etc. and DaisyUI for things like cards, accordions, forms, etc.

    Once you understand the concepts and fundamentals then for personal projects use AI to help you generate the code.

    • aqueueaqueuea day ago
      Tailwind is one of those things you should use once you feel the pain that it solves. Start with CSS. Should be enough!
  • AymanJabr2 days ago
    You have the fast approach and the really fast approach.

    1) Use libraries like ShadCn that give you all of the functionality that you need for the components. Use Tailwind or other frameworks, to change the styling of these components to fit your application theme. Using the components and theme, let Claude 3.7 design the apps for you, it is good enough to get you to pretty decent and custom pages that do (mostly) work. If there is a specific page that you don't like, then you can redesign it.

    2) Do the designs in Figma, and then use Builder.io to convert the designs directly into code, use Cursor to fix anything that builder has broken.

    Of course, the 2 methods above can be mix and matched, this is what I have personally used in both startups and more established company projects.

  • ale_jacques2 days ago
    I'm still using Bootstrap 5. Not that "modern" but it gets the job done fast.
    • hiAndrewQuinna day ago
      I'm also still on the Bootstrap bandwagon, mostly because it was what I picked up while I was learning the ropes of Django a few years ago. The highest praise I can give for it is that the design recedes into the background letting me focus on what I actually want to do.
  • brokegrammer2 days ago
    Claude 3.7 Sonnet can generate your page layout and styles for free.
  • rawbytes2 days ago
    tailwind simplifies web design for beginners and experienced developers
  • chistev2 days ago
    Vanilla css
  • hilti2 days ago
    Claude is also really good at Tabler Admin HTML if you‘re looking for a SaaA application frontend.
  • dtgmzac2 days ago
    component libraries that you can reuse - shadcn, daisyUI

    modern styling - tailwind css

    generating pages - haven't tried these but heard of bolt.new , v0.dev being popular

  • ai_coder422 days ago
    Vibe Coding. Use LLMs to do it for you. That's the easiest (and free) way of doing it!
  • ranscendental502 days ago
    I know I'll get downvoted for this -- but if can use AI, ask it to use VanillaJS and no libraries (if possible).

    Consider that any libraries you load (ReactJS, etc) already use JS built into the browser anyways. So creating a project like this will be WAY more understandable and easy to reason about.

    After you can load up on any libraries you need, but understanding the basics is key.

    • pkrzysiek2 days ago
      Thanks, I know that, I've been learning pure CSS and Bootstrap in the meantime and took whole Odin Project course.

      I just wanna get info about the current tools and standards of making things in a more modern approach.

  • mattl2 days ago
    rails scaffold will get you pretty much there, you might add in a stylesheet.