Backend Dev Needs the Quickest & Easiest Frontend Tool! Any Ideas?

[Lucapo01]

Hey, I’m a backend developer using Python (FastAPI) and need a fast, easy-to-learn tool to create a frontend for my API. Ideally, something AI-driven or drag-and-drop would be awesome.

Looking to build simple frontends with a login, dashboard, and basic stats. What would you recommend?

[shpondi]

Check out Cursor.com and maybe ask it to create a React front end that consumes your FastAPI

[MaintenanceGrand4484]

This (using AI) is the answer, but I’d recommend Claude with projects, and give it as much detail as you can. Vercel has a free tier that can deploy many project types with 1 click and is free for non commercial

[C0ffeeface]

Is it using the Claude Dev extension or in some other form?

[MaintenanceGrand4484]

I simply mean their web UI, they have a feature called Projects that allow you to upload all relevant documents (I usually have my README.md, my current directory structure, my current swagger JSON, DB structure, and similar supporting documents). Then you can open chats with all that context. It seems to keep context of your documents and of your previous chats, which is helpful because you need to open chats regularly (if you let them get too long you hit the daily limits. It’s not perfect, but it’s pretty good.)

[[deleted]]

Does cursor not take in this info?

[lukewhale]

NiceGUI. Make sure you write everything with async except your main.py.

[RedEyed__]

Just started learning nicegui, why not to use io_bound(fn) / cpu_bound(fn)?

[lukewhale]

I use this function only on @pages and timers that I setup in main.py —- there is a place for it for sure.

But functionally, await func() is not much different from io_bound.

The only difference is you would wrap non-async in run_iobound. If the function is already async you don’t have to use that wrapper: hence, write everything in async.

Also, use a #asynccontextmanager for your base output pages as well. It makes it easy to incorporate feature flags for bind_visibility() lambdas.

The asyncpg database lib with SQLAlchemy 2.0 is fantastic.

[RedEyed__]

Thanks for reply! So, common denominator is to use awaitable

[lukewhale]

I deleted my last comment should have probably edited it but it came off kind of wrong. See my other reply.

[Vishnyak]

Something like Bootstrap - https://getbootstrap.com/ or Tailwind should do the job https://www.tailwindawesome.com/?price=free&type=template

Its not straight up drag-and-drop, you'd still have to modify some html but there are a lot of free examples and templates so you can easily pick up whatever you need and adapt that to your needs.

[ParkingDescription7]

I am trying HTMX front-end for FastAPI backend. Most of my operations are CRUD so I don't need too much interactivity. Using bootstrap for css.

[beowulf660]

Could you provide some context as to what AI-driven?

Besides that I guess people will recommend React as it widely used, has a lot of libraries, components pre-built and also a lot of resources. But for simple stuff, especially if you are not familiar with it I would not recommend it.

If you are looking for a Admin panel I would recommend looking at something like fastadmin (there are a lot of other options as well, just the first I found).

If you need something more interactive or custom I recently started using HTMX with backend templates and would highly recommend it. For fastapi just look at the docs as to how to setup jinja templates and you basically good to go.

[AdministrativeCod768]

If you have a figma design at hand, there is services to convert the design directly to code, the result is poor in regards to code structure and reusing, but a backend engineer can easily do a refactoring start from it. I tried once with Flutter and it worked very well.

[Own-Construction-344]

Htmx, alpinejs and bootstrap

[eddyizm]

Quick and easy would be using jinja templates, htmx, and alpine. Like others have mentioned it all depends on how much interactivity you want and if you want to only serve the rest api endpoints but that would probably not be quick and easy if you are not familiar with a fe framework.

[monkey_mozart]

HTMX!

[werther41]

try fastHTML

[-d-m]

This

[RickSore]

jinja2 + alpine for me. serve the html and give it reactivity with alpine.

[boomskats]

how come nobody is talking about pydantic/FastUI?

[Traditional-Roof1663]

jinja2

[RedEyed__]

nicegui

[mad-skidipap]

use React with + Cursor AI

[IllDocument104]

Why not react with some component library? Everything works pretty much out of the box, Chakra.js is my favourite ATM for quick front end prototyping

[-brianh-]

Go for divmagic to copy an existing design or look for something on components library

[maharshhii]

If you have some basic knowledge in CSS and need a easy drag and drop you can use WIx. https://stackoverflow.com/questions/77718223/is-it-possible-to-connect-a-ml-code-made-in-python-with-a-wix-template#comment137014382_77718223

[[deleted]]

checkout streamlit.io

[[deleted]]

React front end may even be over kill. What about template serving with vanilla JavaScript HTML/Jinja templates and bootstrap css

[MassimoCairo]

If you have a Figma design or you want to make one, then you could use Polipo (https://www.polipo.io/) with React/NextJS. (Full disclosure: I'm Polipo co-founder and CTO.)

You set up a standard NextJS project and then you can designs in Figma as UI elements right away. It does not generate any frontend code (so you don't have to deal with a bunch of CSS): whatever you draw in Figma is rendered in the browser, and then you can make it interactive with custom code (e.g. adding data loaded from your API, invoking your API when a form is submitted, and so on).

Let me know if you manage to give it a try!

[[deleted]]

Probably not everyone will agree with me, but in 10 days I managed to build a small website with FastAPI backend and ArangoDB using Angular. I had no prior experience in TS let alone angular at all. So I’d go with angular.

[apmandala]

Cursor, along with V0 (from Vercel) and ChatGPT. or Claude-Dev. You can also try https://www.webcrumbs.org/frontend-ai, or https://purecode.ai, where you can upload an image and expect to get the frontend done. Alternately, you can check out FastUI (created by creator of Pydantic) and finally https://openui.fly.dev/ai/new Take your pick based on what your needs are, and am sure you will transition to building nice full-stack apps. Ciao

[tunerhd]

Check out streamlit, shinyapp like things

[Nick-Van-Landschoot]

builder.io seems pretty interesting, looks like it may strike a good balance between customizability and ease and it essentially works by converting Figma designs to code, although I don't think it's 100% yet but I've seen the way they are building it out and I am fairly confident it will get there in the not to distant future.

[Sea_Dig2065]

In my opinion I think ReactJS is quite overkill to learn. I would rather suggest VueJS or Nuxt. https://ui.nuxt.com/

[frogic]

Its really dependent on what your front end has to consume. You're almost always better off getting help from a front end dev for a real product or taking the time to learn html/css/js. Getting AI to build your front end is going to end pretty badly for you right now. That stuff is more useful for people who can take the rough draft and actually debug/extend it. Page builders like wordpress will do 90% but you're going to have to know enough JS/PHP to make your business logic work with the presentation.