Developers January 17, 2020

Easiest Web App UI

Simon Le Pine @Lakebed_io

I would greatly appreciate people's opinions on the fastest way to build a web app UI. I can write all the code and plug UI components into backend functionality. I have written UIs but am not great at it and am not current on more modern UI dev.

Is there any easy React UI builder or I was thinking maybe a premade bootstrap theme.

Thanks very much,

  1. 5

    Word of advise, make sure if you really need a library like React. It's not the case that they are bad, they are just too fascinating. Sometimes vanilla javascript and Bootstrap are enough for good UI. Once the product is consistent or stable, you can switch to any tech you want.

    1. 1

      Such valuable advice, currently working on my MVP with React and Django backend - wish I had just focused on SSR with the default Django templating. I'm pretty much done now after a bit less than 2 months of part-time work, which is not too bad but I feel like I could've save possibly 1 month just doing everything with templates.

    2. 1

      Totally agree! For this new project I want to go with a microservices back-end and completely decoupled front-end just to build some new skills and the resume. The back-end is going to have to be Django anyway so if I'm doing something new on the back I might as well do it on the front too...

  2. 2

    https://divjoy.com is what you want. It gives you a full Bootstrap React UI and has a built-in editor for customization.

    1. 2

      Thanks Gabe, I had come across DivJoy a while back during research but had forgotten the name.

      1. 1

        Ping me if it looks like a good solution for you. Happy to give you the Indie Hackers discount 😉

        1. 1

          Is the IH discount better than the $59 current price?

          1. 2

            Yup, would be $49 instead. Here you go: https://divjoy.com/?promo=indiehackers

  3. 2

    In my last (current) project I've used quasar - it's a very rich and flexible components library and framework for vue.js with material style.

    I was also looking for something that will allow me rapid development. I found the learning curve to be really fast (also the learning curve of vue itself is fast), their cli is awesome so you can have your initial app ready literally in minutes. It comes ready with everything you need to pack your app for production (webpack and all), you can pack it as pwa if you want. It's preintegrated with scss and stylus, and I've found it really easy to add any library that I wanted.

    If you are willing to "flow" with it's UI style then you're going to be able to build your app really fast.

    I did both mockups and actual development with it, in iterative cycles, since it was so easy to play with the UI without paying high price for changes.

    Definitely recommend it.

    1. 1

      Awesome! Thank you for taking the time.

  4. 2

    Definitely Flutter

    https://flutter.dev/

    Here is a course that will quickly get you up to speed building the widget tree and all the logic:

    https://www.udemy.com/course/flutter-bootcamp-with-dart/

    1. 1

      Thank you, I have to admit I don't think I've heard of dart before.

      1. 2

        Definitely not. Their web implementation is still super experimental.

  5. 1

    Try NoCo.io, I've been looking for some developers to test out our code ejection feature.

    It generates React/Material UI front end that looks great without much design and a nodeJS/Express back end.

    1. 1

      Can we fetch data from rest api with noco?

      1. 1

        So each app has it's own REST API (with swagger/OAS 3.0 API docs) based on the data models you define.

        Right now the NoCo database (mysql) is the source of truth, so external API call flows currently look like.

        External API Call -> Call NoCo API -> Data Available to your app.

        You could use either a lambda, cloud function, zapier, etc to make that api call and put the data into the database.

        What's your use case? If it's compelling, I could build it for you.

        1. 1

          My usecase is pretty straight.

          I’m nodejs dev who is comfortable with server part alone but not any ui/frontend.

          I have rest api ready and looking for a tool which can create the ui easily where it allows me to connect my rest api and fetch data from it without any major coding.

          1. 1

            ok interesting you're looking for a kind of front-end as a service. I've thought about this use case before but never come across someone that needed it.

            NoCo can't support this use case today. TBH I'm not sure if the developer angle is worth pursuing. If it is, I think we will eventually support this use case but I just can't get a good sense of how common your use case is or if people will pay for it.

            I could see enterprise customers liking this concept to build internal business apps.

            1. 1

              This is a very generic usecase as we always find it difficult to add ui to rest api. This usecase is almost a must for any who is making rest api.

              1. 1

                Yep, totally understand. Out of curiosity though why not just make the REST API with NoCo(or some no-code product) + lambdas/cloud functions (for custom stuff)?

                1. 1

                  I already built rest server with cloud functions.

                  Do you mean with noco rest service i can connect to my server to fetch data?

                  Can you share some docs to get an idea?

                  1. 1

                    so the data flow currently must be:

                    NoCo REST API -> NoCo front end

                    what im suggesting is that you do whatever you need to do with cloud functions, etc. then push that data to the NoCo Rest API so it will be available to the front end.

                    It's closest to this example where I:

                    Update Google Spreadsheet -> Use Zapier to make api call to NoCo REST API -> Data is available in the UI.

                    In your case you wouldn't need Zapier. Your cloud functions could call the NoCo api directly.

                    https://blog.noco.io/noco-zapier/

                    Basically I'm suggesting that you create a separate data model in NoCo for the UI and just push data to it.

                    1. 2

                      Got it!

                      So if i got it correctly, i need to call rest api of NoCo from my cloud functions so that the data on noco will be updated.

                      However with this it has additional steps instead of using my own existing rest api to fetch the data.

                      But, i see it as a better alternative as you suggested.

    2. 1

      Thank you, will try this weekend!

      1. 1

        ping me at [email protected] when you do so I can remove some restrictions for you. We've been forcing everyone to do a one-on-one tutorial so they don't get lost in the app but if you just take 5 minutes and go through this playlist for example you should be fine.

        https://www.youtube.com/watch?v=CrB0RYJv--c&list=PLVP8KNnyqh7aAJNLgKl7U7O8i4gofgYhq