DEV Community

Cover image for Intradash - Dashboard + Bento Builder
Schemetastic (Rodrigo)
Schemetastic (Rodrigo) Subscriber

Posted on

Intradash - Dashboard + Bento Builder

Frontend Challenge Holistic Webdev Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

Intradash is a webapp dashboard with widgets that give you easy access to your data, but also lets you build your own spaces so you can organize things as you see fit (more on that later).

Some main features include:

Expandable Dashboard Widgets

A problem with compact UI sections, is that it can be hard to find data or tedious to navigate, that is why each dashboard widget has a button that can allow you to maximize that widget and be more focused and comfortable.

Create your own Bento

In my experience working with others, I've noticed that sometimes, being organized is very difficult. Maybe there is an event, or there are different tasks that you realize daily or every certain amount of time, and it would be a lot easier if you could have predefined spaces with just exactly what you need without jumping from one place to another.

That's why I added the “Bento Builder”, in simple words, these are customizable spaces with layouts similar to a bento, there, you can place different widgets and set the data you want.

Demo

🌐 Live Preview:
Intradash Preview

🔗 Repo:
Code Here

Journey

As a person who have created templates in the past, I think this was an interesting experience, and I learned new things watching the Axero templates they provide.

I'd been a front-end developer for a while now, but recently I'd been trying to improve my design and UI/UX skills, and I'm glad I could put into practice some of the things I've learned there. 😁

Even though the project still needs some workarounds, I think, that by far, as a front-end developer, this has been one of the more complex and interesting projects I've done, and I think it shows well the concept I want to demonstrate. I'm happy I've chosen Svelte for this project, made things a lot easier.

Top comments (3)

Collapse
 
aquascript-team profile image
AquaScript Team

Amazing ⭐

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Thanks! Appreciate it!

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Clarification on usage of AI.

This project uses AI, but mostly to generate images (like the persons) and some generic data. I practically made most of the design and development. 😉