Nabu Casa Prototype

I'd created the screendesign for this prototype back in March 2024 as part of my application as UX-Expert. The screendesign was created in penpot. You can find the screendesign here: Nabu Casa Screendesign

For my current application as Webdeveloper at the Nabu Casa team, I needed something to show my skills, so I decided to code that page as a static prototype. You can see the prototype in action under https://nbc.devinside.de.

The website contains at the moment only the startpage and was build with the following goals in mind:

• Create a representative page
• Creating efficient handcrafted code - no frameworks like bootstrap etc.
• Optimised performance
• SEO-Optimisation
• Responsive

Prerequisites

I created the screen design as already mentioned back in March 2024. That means, that some newer UI or graphical elements where not existend at this point and my working sample might not feature them. Also I had not so much time to create all the other pages, but I am pretty confident, that you might get a good impression of my work.

Dependencies

The project is based on eleventy, a node-based static-site-generator. Eleventy is pretty flexibel and allows the usage of diffrent template languages, but I stayed with the standard nunjucks, cause it works pretty well. An another advantage is, that it already bundles many things like images or compiled scripts. For the sake of time, I'd used a SCSS-Plugin and wrote the JS-Snippet inline in the index.html.

In a "real world scenario" I would actually build a proper webbundling with parceljs, to optimize and minify all JS/CSS-Scripts.

Commands

I used for the development bun.sh, but all commands work with npm aswell. I'd added as well a config file to make it work with yarn. Unfortunately I couldn't test it, so take it with a grain of salt.

Installs the package and it's dependencies.

npm install
# bun start

To use the buildin server just type:

npm start
# bun start

The site can be build via

npm run make
# or bun make

The start and the make command will create an folder with the content of the website including all assets.

Filestructure

• 📁 _public => generated by the commands
• 📁 content => contains the pagedata
• • 📁 _assets/styles => SCSS-Code
• • • 📁 atm => Atoms: Smallest bits like colors or typo
• • • 📁 mlc => Molecules: some bigger bits
• • • 📁 org => Organisms: the biggest modular elements
• • • 📁 utl => Utilities: Helper Mixins/Functions
• 📁 data => Contains files with global accessable objects
• 📁 views => Template folder
• 🗎 .eleventy.js => Eleventy-Config and added functions like shortcodes

Anything else is bun/node related.

Audits

I ran some audits to prove the performance and search engine optimisations (SEO). You can find my results under the following links:

• Audit Chome Lighthouse Desktop
• Audit Chome Lighthouse Mobile
• SEORCH

Tested Browsers

• Chrome/Edge/Brave (Windows)
• Mozilla Firefox (Windows)
• Chrome/Brave (Android)
• Safari (MacOS)
• IOS/IpadOS (MacOS)

TO-DOs

• Build the other pages
• Improve accessability (WAI, Aria etc.)
• Use CDN for assets and security improvements (DDOS-Prevention etc.)
• Setup a buildprocess via Pipelines or Jenkins