Home
Software
Writings
Day 1: tech stack, creating project from scratch
in: Diary of a solo dev building a web app
Jun 09, 2022
💡
This is a dev diary of implementing Filerion, a web-based file manager for online storage (Dropbox, OneDrive, Google Drive, s3 and more).
Today I’m creating a project from scratch.
My tech stack:
Here’s what I did today:
I envision this as mostly client-side project and Svelte is the best framework.
You write .svelte files that combine HTML with JavaScript and CSS. Svelte compiler converts them to actual .html / .css / .js files.
vite is a dev web server and a build tool that can optimize .html / .css / .js files for production deployment.
I deploy the projects to render.com. Many Svelte projects can be 100% client side and deploy as static website.
I want a bit more flexibility so I wrote a very simple server in Go for doing things that cannot be done in the browser and require server side processing.
To setup a Svelte project with tailwind CSS you can follow tutorial on their sites.
I did that in the past and already have a project with a similar setup, so I just copy & pasted chunks of code from that project.
Here’s what’s involved:
Go server is the simplest thing possible: for now it just serves static files from fe/dist directory (in production build)
I like setting things up from scratch.
I’ve been frustrated by getting stuck for undetermined period of time because I couldn’t comprehend and fix a complicated build pipeline I didn’t setup and therefore didn’t understand.
Creating things from scratch might be slower at the beginning but it makes it less likely I’ll get stuck in the future.
Also helps me keep things minimalistic. Some people don’t think twice about creating a monster webpack build pipeline with lots of plugins.
I prefer things that I fully understand.
Deploying to render.com is also simple:
For now it runs on free tier, on a shared 512 MB server, because Go servers are really efficient and the app doesn’t do anything yet.
After about 2 hours I had a “hello world” Svelte app with Go backend running on render.com: https://filemanager-x0mq.onrender.com/
The first step: displaying files
Now that I have a “hello world” running, what next?
Thinking about how much work needs to be done is overwhelming.
It’s important to make progress and figure out how to get from here to final product via a sequence of small steps.
The crucial parts of file manager for the web are:
I’ll start with file display.
But what files to display? Connecting to online storage is probably a bunch of work and requires (potentially slow) network connection.
For now I’ll just use a static list of files.
Here’s the result so far:
I’ve also implemented a multi-selection of items with a mouse click.
Written on Jun 9 2022.
home
Found a mistake, have a comment? Let me know.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you: