Skip to content
Peter Warholm
All projects

Case study • Exam project

Dshbloks

A full-stack dashboard with drag-and-drop layout.

View sourceLive demo

Summary

A personal dashboard built with SolidStart, where users drag configurable widgets onto a grid. It is a full-stack project with authentication and a PostgreSQL database, and accessibility was a goal from the start.

Main dashboard view with cards on a dark grid
The main dashboard with cards that displays data from the sources the user has connected.

Assignment

An individual exam project, for the Frontend Development education at Medieinstitutet in Göteborg, over six weeks: plan, design and build a complete web application, from audience research and Figma wireframes and prototype to a deployed product.

It had to use a modern JavaScript framework and a database, handle state in an organised way, offer CRUD with secure authentication, and meet WCAG 2.1 A and AA.

Project idea

Dshbloks is a personal dashboard for people who want the information they check every day in one place. You drag widgets, such as a clock or weather, from a side panel onto a grid of up to six.

Each widget is configured on its own, for example with different time zones. You can save several named dashboards and the layout adapts from desktop to mobile.

Challenges

Accessible drag-and-drop was harder than expected. The first library supported the keyboard but I couldn't get it working and the second was easier to use but lacked full keyboard support. Moving widgets while keeping their configuration was complex either way.

Widget state lives both in the UI and in the database and users should be able to preview, save or undo changes. Teh app also had to work for guests without an account.

Late in the project, an error appeared on Netlify that never happened locally.

Role
Frontend Developer
Areas
  • Frontend development
  • Backend development
  • Accessibility
  • UI
  • UX
  • Database
  • Authentication
Tech stack
  • SolidStart
  • Prisma
  • PostgreSQL
  • Better Auth
  • Solid DND
  • SolidUI
  • Kobalte
  • Tailwind CSS
  • Geist Sans
Languages

Highlights

  • Built on Kobalte/SolidUI so accessibility is structural, not bolted on.
  • Prisma + PostgreSQL with Better Auth for a real authenticated data layer.
  • Draggable dashboard layout with solid-dnd.
  • Sign-in page with a dark background and a form centered to the right
    The sign-in page for the dashboard. The form is centered to the right of the dark background.
  • Draggable widget cards on a dark grid; timezone and format set.
    Configuring view. The first widget card is being configured to set the timezone and time format.
  • Three saved widgets on a dark grid, with three slots for more.
    Overview of current three saved widget cards and another three available card slots to add more widgets