Ask HN: How do I build a website as a backend engineer?

I like superkuh’s suggestion to serve the spreadsheeets directly, so you don’t need to worry about converting the “calculators” to another language.<p>If you do want to go through the trouble of converting to another language, JavaScript would be the natural choice because it can run directly in the browser with just “a few static assets to host”. A template like the following would probably work fine as something simple and functional. (This should be a working example if you save the files to a directory and load <i>foo.html</i> in the browser.)<p><i>foo.js</i>:<p><pre><code> function foo(a, b, c) { &#x2F;&#x2F; do calculations and return output return a + b + c; } </code></pre> <i>foo.html</i>:<p><pre><code> &lt;!doctype html&gt; &lt;meta charset=utf-8&gt; &lt;title&gt;Foo Calculator&lt;&#x2F;title&gt; &lt;link rel=stylesheet href=https:&#x2F;&#x2F;cdn.simplecss.org&#x2F;simple.css&gt; &lt;main&gt; &lt;h1&gt;Foo Calculator&lt;&#x2F;h1&gt; &lt;label for=a&gt;A&lt;&#x2F;label&gt; &lt;input type=number id=a&gt; &lt;label for=b&gt;B&lt;&#x2F;label&gt; &lt;input type=number id=b&gt; &lt;label for=c&gt;C&lt;&#x2F;label&gt; &lt;input type=number id=c&gt; &lt;label for=z&gt;Z&lt;&#x2F;label&gt; &lt;output id=z&gt;&lt;&#x2F;output&gt; &lt;&#x2F;main&gt; &lt;script src=foo.js&gt;&lt;&#x2F;script&gt; &lt;script&gt; &#x2F;&#x2F; calculate output when any input changes a.oninput = b.oninput = c.oninput = function () { z.value = foo( Number(a.value), Number(b.value), Number(c.value), ); }; &lt;&#x2F;script&gt; </code></pre> <i>a</i>, <i>b</i>, <i>c</i>, <i>z</i>, and <i>foo</i> will be global variables in <i>foo.html</i> so make sure they have unique names.<p><i>simple.css</i> could also be replaced with other classless CSS frameworks.

As a backend engineer you should be familiar with the concept of files and the file systems. You can make a website by installing nginx from your repositories and making an index.html file (&lt;html&gt;&lt;head&gt;&lt;title&gt;Calculators&lt;&#x2F;title&gt;&lt;&#x2F;head&gt;&lt;body&gt;...&lt;&#x2F;body&gt;&lt;&#x2F;html&gt;) and transferring it, and your spreadsheet files, to your distro&#x27;s www directory. Link the files in your index.html like, &lt;a href=&quot;&#x2F;spreadsheetone.xls&quot;&gt;Calculator for tax&lt;&#x2F;a&gt;. Then forward port 80 on your router to the port 80 on the internal LAN IP address of your computer running nginx.<p>Providing the actual spreadsheet files directly will be of far more use to other people than trying to turn them into an inferior website.

My suggestion.. avoid using a framework for now and learn CSS. Become comfortable with it. Then decide if you need a framework and what framework fills that need.<p><a href="https:&#x2F;&#x2F;css-for-js.dev" rel="nofollow">https:&#x2F;&#x2F;css-for-js.dev</a> is a good course.

I’d use observable. Here is an example of a mortgage calculator <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@observablehq&#x2F;modeling-in-observable" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@observablehq&#x2F;modeling-in-observabl...</a> . And you can create a page to collect all your calculators (other observable pages).

Little bit unconventional, but try writing your front end in Elm, and use the elm-ui library to avoid writing html or javascript.<p>It compiles to javascript and will generate an index.html for you if you want.<p>Elm is highly opinionated… maybe you’ll love it, or maybe you’ll hate it, but it’s a good fit for what you want to do.<p><a href="https:&#x2F;&#x2F;elm-lang.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;elm-lang.org&#x2F;</a>

If it were me I&#x27;d serve it as a basic HTML page with some inline vanilla JS &#x2F; JQuery scripts.<p>You can use Bootstrap (or similar) for some minimal theming. No CSS knowledge required - just apply the classes as described in the docs.<p>Alternatively you might be able to find a similar project online that you can modify to fit your needs? There are a lot of simple single-page form based apps on Github.<p>Just found this one on YouTube for example: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=CGftYT6KcrM" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=CGftYT6KcrM</a> <a href="https:&#x2F;&#x2F;github.com&#x2F;kaizhelam&#x2F;BMI-Calculator" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;kaizhelam&#x2F;BMI-Calculator</a>

I would try to start simple and go the HTML + CSS + Javascript route. Accept an ugly site at first and handle the calculations with Javascript. In case Javascript turns out to not be numerically powerful enough, consider compiling Rust to WebAssembly. Due to your back end experience, you’ll probably find Rust much more enjoyable than Javascript.<p>Also, I would stay far away from any Javascript package manager. Your calculator should be working for 10 years at least since HTML, CSS, plain Javascript, and Rust will most likely still work in 10 years and math doesn’t change either.

Assuming no backend as you describe and based on everything else you’ve said I would go with React or another similar library&#x2F;framework (even Elm like someone else posted but that’s going to be a bit harder in terms of support and learning curve).<p>I also suggest react because after extensively using multiple frameworks I can say without a doubt the react ecosystem stands out far above the rest. There’s many high quality graph and table libraries for React. And having also dealt with integrating these sorts of libraries into component frameworks, it’s just not the sort of thing you want to waste time on.<p>As for language I would highly recommend just embracing TypeScript and skipping JavaScript. This will certainly help eliminate a whole class of potential frontend-typical problems like strings being interpreted as numbers due to developer error.<p>For styling I would use tailwind (although if using react styled-components is another approach, but tailwind definitely gets out of your way). This will easily get you past the styling problem you mentioned.<p>For hosting I would use Vercel. I would have suggested Netlify and really both are good but I’m considering migrating my sites to Vercel because netlify appears to load CSS files in a weird order, but that’s not too relevant to the discussion here I suppose.<p>Happy to answer anymore questions or help you get started with the code and implementation - contact links in profile! I hope this advice has been practical.

I can&#x27;t help but to laugh. OP: I really don&#x27;t like CSS People in this thread: You should learn CSS<p>My suggestion would be webflow or some other no code that lets you just write backend stuff.

Surprised nobody’s mentioned streamlit yet.<p>Maybe I’m misunderstanding your use case, but if you want to create web apps out of your backend work, streamlit may be your ticket for “easy to understand on the back end, hyper-simple front end.”<p>At least worth giving it a look.<p><a href="https:&#x2F;&#x2F;streamlit.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;streamlit.io&#x2F;</a>

The least amount of friction would probably be a public google spreadsheet.

Just make a website like we did in the early 2000s for fun. Get an HTML file with form elements. When you click submit on the form, it calls your calculator scripts. Or you can rewrite the file calculators as JS, and do it all right on the client side, and just serve the file from the box. You can then put that html file on a linux box and point the web server to it. Talking about frameworks and css and all of this is massively over complicating things.

I use a simple serverside framework such as ExpressJS or FlaskJS, which routes URL requests to HTML page responses.<p>Served by NGINX on a Linux server. I host with DigitalOcean for $6&#x2F;month<p>I use a CSS Framework template. I like Bulma for its simplicity: <a href="https:&#x2F;&#x2F;bulmatemplates.github.io&#x2F;bulma-templates&#x2F;" rel="nofollow">https:&#x2F;&#x2F;bulmatemplates.github.io&#x2F;bulma-templates&#x2F;</a><p>Summary of things to google:<p>- simple Serverside framework for &lt;language&gt;<p>- Digital ocean nginx tutorial<p>- CSS Framework Template<p>Also, one of my favorite websites for learning to build websites &amp; webapps is: <a href="https:&#x2F;&#x2F;roadmap.sh&#x2F;" rel="nofollow">https:&#x2F;&#x2F;roadmap.sh&#x2F;</a><p>It guides you through some of the common steps involved in building the skills, for frontend, backend, phone apps, and devops<p>___________<p>Regarding presenting tabular data on a website for editing and downloading, I highly recommend this ReactJS framework: React Bootstrap Table v2<p><a href="https:&#x2F;&#x2F;react-bootstrap-table.github.io&#x2F;react-bootstrap-table2&#x2F;" rel="nofollow">https:&#x2F;&#x2F;react-bootstrap-table.github.io&#x2F;react-bootstrap-tabl...</a><p>That said, a prerequisite for using it is learning ReactJS.<p>For that, I recommend <a href="https:&#x2F;&#x2F;udemy.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;udemy.com&#x2F;</a>

Take a look at Streamlit or maybe Dash.<p>They are meant for putting simple UIs on top of (Python) data apps, which I think is what you really have here. You focus on the logic and don&#x27;t have to deal with the frontend directly.<p><a href="https:&#x2F;&#x2F;streamlit.io" rel="nofollow">https:&#x2F;&#x2F;streamlit.io</a><p><a href="https:&#x2F;&#x2F;dash.plotly.com&#x2F;introduction" rel="nofollow">https:&#x2F;&#x2F;dash.plotly.com&#x2F;introduction</a>

If you don’t actually care about this being a website, and you mainly care about the calculations, documentation and delivery, this really sounds like a job for a Jupyter[1] and Voila[2]. Write your calculations locally, and then present them on the web automatically.<p>I do understand this doesn’t meet your static site need. But if you’re in this for knowledge transfer and improving the state of the calculators you created perhaps opening up the code to those that could collaborate could be useful. Perhaps you could write the canonical library for those calculations. Keeping the presentation away from the business logic like this is a stated goal…<p>[1] <a href="https:&#x2F;&#x2F;jupyter.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jupyter.org&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;blog.jupyter.org&#x2F;and-voilà-f6a2c08a4a93" rel="nofollow">https:&#x2F;&#x2F;blog.jupyter.org&#x2F;and-voilà-f6a2c08a4a93</a> has a pretty good demo that would be effectively what you need to create an interactive calculator.

Backend guy here. I&#x27;ve been looking for something like this as well.<p>Google Sheets, Zoho Calc, Airtable and Streamlit offer functionality I like but I want something that will work in a local browser without a cloud link. Ideally something that could be served statically as you describe from Vercel or perhaps a webserver on the user&#x27;s local machine.<p>I couldn&#x27;t find anything so I started playing around with Pyodide, Elm, Typescript, XState and Tauri before discovering Yew and WebAssembly. I like the idea of a small interactive calculation engine in Rust with a customizable table&#x2F;spreadsheet interface that a user could load and run entirely in their browser.<p>CSS is indeed a beast. I tried avoiding it but eventually decided to see how far I can go with just Bulma, CSS media queries and CSS grid-template-areas. I&#x27;ve started making mockups with Zola to figure out the subset of CSS that will work for me. Then I hope to port or incorporate the Zola templates in my Yew application.

Is your goal to turn your calculators into web interfaces? Are you wanting to learn how to do that?<p>If the goal is purely providing something functional to others on the internet, just create a simple page. Describe your calculators. Add links to download your calculators as excel spreadsheets.<p>No need to over complicate and build a spreadsheet in a browser.<p>If you don’t want to do that, just create some HTML pages with forms and use some JS to chain together input boxes and spit out a calculation.<p>Many of the suggestions here will take you the route of complicated layers of abstraction. Unless your goal is to learn these abstractions, you can avoid that complexity.

&gt; For context, I’m a software engineer working in FAANG as a backend developer in distributed systems and Linux kernel for many years<p>From this I am assuming you will be comfortable with C++.<p>&gt; I just really dislike dealing with anything frontend-related and I’m utterly incompetent in it<p>May I then suggest Wt[0] to you?<p>[0] <a href="https:&#x2F;&#x2F;www.webtoolkit.eu&#x2F;widgets" rel="nofollow">https:&#x2F;&#x2F;www.webtoolkit.eu&#x2F;widgets</a>

I think looking for a &#x27;least friction&#x27; route to create these custom components is probably how the other examples you have found ended up looking wonky and slapped together.<p>If you have some front-end developers that you are close with, I would ask for some guidance and an occasional push in the right direction once you get started. If you really do dislike front end, I would try to reframe how you approach this problem, because it will just end up being a slog for you :(

If you want to build an offline calculator that doesn&#x27;t require dynamic content or multiplayer, you can use webassembly and embed it into a website like I do here: <a href="https:&#x2F;&#x2F;dublog.net&#x2F;blog&#x2F;rust-2&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;dublog.net&#x2F;blog&#x2F;rust-2&#x2F;index.html</a><p>I&#x27;m not sure what the best tool for a calculator app is, but there are probably many options

For styling, if your interface is focused on tables and forms, as opposed to bespoke components, you might try a minimalist CSS library like Pico or Milligram.<p>As for functionality, if you&#x27;re &quot;just&quot; doing some calculations and presenting it like a spreadsheet, you probably don&#x27;t need a framework. Some plain Javascript onChange event listeners for your various input fields might be all you need.

I&#x27;ve had some success converting spreadsheets to web calculators with Knockout.js, which is very old, probably not maintained anymore, but very easy (no build step) to use and reactive.<p>That said, to convert spreadsheet formulas (which often depend one from another) look for something reactive. Svelte might be a good choice if you can figure out its model of reactivity.

What I want to know is, what is your goal? Do you have an end result in mind? Eg. Learning? Sharing the sheets? Making online calculators for fun? Or do you want to turn this into a business?<p>Can you share example links for what you have in mind?<p>Without a clear goal you will get as many suggestions as there are developers in this thread.<p>Best of luck with whatever you end up doing

Bootstrap with python flask will probably be the easiest way to write the ui code, imo. If you then add in one library - htmx - then you can have an idiom where the server handles all the rendering and you can avoid using javascript.<p>I think these tools should work for someone coming in without prior experience and figuring it out from the docs.

You could pay a front end dev to use a preexisting template.<p>Or, you could Google “classless CSS”, if you’re OK writing some HTML.<p>I made a plug and play CSS library here for those that don’t want to write CSS: <a href="https:&#x2F;&#x2F;github.com&#x2F;andybrewer&#x2F;mvp" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;andybrewer&#x2F;mvp</a>

Check out bootstrap and bulma or halfmooncss for the front end stuff and keep it as simple as possible.<p>Bootstrap is very popular and easy to find components for.<p>For simple interactions look into htmx or alpinejs. Or jquery.<p>These recommendations presume you want to get things off the ground asap, without spending months learning.

How about creating a javascript&#x2F;typescript library with the better calculations and posting the library here on HN. There are probably quite a few that would happily create a usable and not too bad looking front-end for them.<p>I would deploy using Netlify with their CDN or Cloudflare.

&gt; looking for a framework&#x2F;template where I can mostly focus on my business logic<p>Short of hiring&#x2F;partnering with someone, learning yourself is the closest best bet.<p>I&#x27;d say have the api ready, go through vuejs tutorials to build something, and then ask for help ?

Maybe this isn&#x27;t exactly what you&#x27;re after, and I have no connection to it other than having it saved in my bookmarks, but just in case you find it useful:<p><a href="https:&#x2F;&#x2F;www.calcapp.net" rel="nofollow">https:&#x2F;&#x2F;www.calcapp.net</a>

I&#x27;ve recently had a similar issue.<p>The best I&#x27;ve found is NextJS (you can use their API support if you don&#x27;t have a separate one yet) + Chakra UI (removes practically all the need for css).<p>You can pick it up in a weekend and build beautiful products.

The low-code&#x2F;no-code frameworks may be interesting to you. Like Appsmith or Retool.<p>Otherwise the Python community likes to avoid touching anything that is not Python. Dash Plotly or Streamlit are great tools to make web apps in Python.

I’d suggest going the python route. I migrated a lot of my shell scripts to python, and then went on to building a simple front end with flask, and ended up using Django. Felt like natural progression to me.

Maybe export the spreadsheets to HTML tables and add interactivity with datatables.net? If you&#x27;re going open-source, sharing the spreadsheets as-is would be great, I may be willing to hack on that.

As a backend&#x2F;devops&#x2F;mobile dev i would say that CSS is the easiest language. i learned in free time during grad classes.<p>Learn the tool designed for the puropse instead of looking for shortcuts

Maybe this would help: <a href="https:&#x2F;&#x2F;usesummit.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;usesummit.com&#x2F;</a>.

I found VueJS easy to pickup and I have used it to add interactivity to what are otherwise static HTML5 sites.

Checkout <a href="https:&#x2F;&#x2F;htmx.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;htmx.org&#x2F;</a>

Put them on google docs and share them.<p>Unless you mean, &quot;How do I monetize this?&quot; in which case, good luck.

I am surprised nobody has mentioned Flutter yet. It obviates the need to learn HTML and CSS (for the most part). Yes, Flutter is not very web-friendly (SEO is a pain, etc.), but I have found it to be the best way to prototype an idea and put it out there.<p>Do give it a try. There are plenty of YouTube tutorials out there.

<a href="https:&#x2F;&#x2F;usesummit.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;usesummit.com&#x2F;</a> allows to setup your own logic and then you can embed it on your own website. Target customer is agencies but maybe you still fit into the free plan and&#x2F;or gives you ideas how to build your own.

Try Budibase. It should help you out

With html, css and js

Here&#x27;s my personal goto:<p>Find some minimal CSS framework. My preference is Skeleton [0] or Bootstrap [1]. The key is just finding something minimal that works without too much fuss. Personally, I rather have a minimal framework provide &#x27;responsiveness&#x27; so I don&#x27;t have to worry about it but I also want it to get out of the way of anything I do.<p>Use JQuery [2]. Don&#x27;t rely on CSS for animations or interactivity. In theory CSS does a lot. In practice it&#x27;s a nightmare to use and to get it play well with whatever else I&#x27;m doing in the page.<p>Write in &quot;bare&quot; HTML and &quot;vanilla&quot; JavaScript. Don&#x27;t use a static site generator and don&#x27;t use a JavaScript framework.<p>Port in JavaScript libraries as needed. Some of the ones I tend to use are numeric.js [3], downlaod.js [4] and audience-minutes [5]. If you&#x27;re doing spreadsheet things, maybe there&#x27;s some JS package out there that will help.<p>Doing &quot;raw&quot; HTML&#x2F;&quot;vanilla&quot; JavaScript makes me effectively unhirable but for limited scope side projects where I have full control and want to minimize bit-rot, this is fine.<p>The point is to create something that&#x27;s minimal and focuses on functionality. The CSS is just there to make it not look like a Web 1.0 page but otherwise steps out of the way to focus on the actual usage of the application.<p>For context, here are some projects where I&#x27;ve used this philosophy (all open source, feel free to pilfer): Noixer [6], Resonator Voyant Tarot [7], Boston Train Track (now defunct) [8], CalebHarrington.com (an artist friend) [9], What Is This License [10], HSV Hero [11].<p>[0] <a href="http:&#x2F;&#x2F;getskeleton.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;getskeleton.com&#x2F;</a><p>[1] <a href="https:&#x2F;&#x2F;getbootstrap.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;getbootstrap.com&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;jquery.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jquery.com&#x2F;</a><p>[3] <a href="https:&#x2F;&#x2F;github.com&#x2F;sloisel&#x2F;numeric" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;sloisel&#x2F;numeric</a><p>[4] <a href="https:&#x2F;&#x2F;github.com&#x2F;rndme&#x2F;download" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rndme&#x2F;download</a><p>[5] <a href="https:&#x2F;&#x2F;github.com&#x2F;berthubert&#x2F;audience-minutes" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;berthubert&#x2F;audience-minutes</a><p>[6] <a href="https:&#x2F;&#x2F;mechaelephant.com&#x2F;noixer&#x2F;" rel="nofollow">https:&#x2F;&#x2F;mechaelephant.com&#x2F;noixer&#x2F;</a><p>[7] <a href="https:&#x2F;&#x2F;abetusk.github.io&#x2F;ResonatorVoyantTarot&#x2F;" rel="nofollow">https:&#x2F;&#x2F;abetusk.github.io&#x2F;ResonatorVoyantTarot&#x2F;</a><p>[8] <a href="https:&#x2F;&#x2F;github.com&#x2F;abetusk&#x2F;bostontraintrack" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;abetusk&#x2F;bostontraintrack</a><p>[9] <a href="https:&#x2F;&#x2F;calebharrington.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;calebharrington.com&#x2F;</a><p>[10] <a href="https:&#x2F;&#x2F;mechaelephant.com&#x2F;whatisthislicense&#x2F;" rel="nofollow">https:&#x2F;&#x2F;mechaelephant.com&#x2F;whatisthislicense&#x2F;</a><p>[11] <a href="https:&#x2F;&#x2F;mechaelephant.com&#x2F;hsvhero" rel="nofollow">https:&#x2F;&#x2F;mechaelephant.com&#x2F;hsvhero</a>