12 Nov 2022 · 6 min read

Kecil, part 4 - frontend

npm i express body-parser ejs

Express serves, EJS renders. For the look I used SkyDash, a free Bootstrap admin template from BootstrapDash, and copied its css, js, fonts, images and vendors folders into /public.

VS Code explorer showing the template's css, fonts, js, partials, scss and vendors folders copied into public — The template's asset folders dropped into /public, with the original download kept alongside for reference.

Frame first, pages second

Before building any page I strip the template's dashboard down to an empty frame: sidebar, navbar, footer, and a blank content area. Every new page is then a copy of the frame plus content. It sounds obvious and it saves the entire project from drifting into five slightly different layouts.

The SkyDash Bootstrap template dashboard before stripping it down — The template as it ships - weather widget, to-do list, charts, none of which Kecil needs.

The same template stripped to sidebar, navbar, footer and an empty content area — The same file after the strip: sidebar, navbar, footer, empty middle. Every page starts from this.

The pages

Home - the shorten form and the user's list of links
Settings - account details and password change
Auth - login, register, forgot password, reset password
Error - one page, parameterised by status code

The Kecil home page with the shorten form and a table of links — Home - add a short link at the top, every link you own below it.

The Kecil settings page with user and password forms — Settings - name, email, password change.

The Kecil forgot password page — Forgot password - the form exists here, the mail behind it comes later.

The Kecil 500 internal server error page — One error view, parameterised by status code. This is it rendering a 500.

At the end of the part the server renders static HTML with no data behind it. That is fine. Wiring comes in part 6.