I built a custom User Interface for mailinabox (React)

1

Hello!

Hope you’re all well.

I’ve built a completely custom user interface for mailinabox. It’s mostly feature complete, other than a couple missing features. It’s build with React, Redux & TypeScript, and uses the Fluent UI design system.

Follow the instructions in the README to run it on your local machine.

Why did I build it?

Covid life has left me with a lot of time on my hands, and I wanted to explore the Fluent UI design system and improve on some of my React skills. I also want to add additional features to mailinabox that I don’t get with the default UI, like allowing non-admins to administer mail accounts, but i’ve taken a step back from adding new features at this time. Another reason is I really like the mailinabox project, and I like the idea of working on tools for it.

Why Fluent UI?

I like the clean/professional look and feel and that it’s built with TypeScript. There’s pros and cons to using this design system. The biggest con being it’s not mobile first and it will take a bit of work to make the layout work nicely on mobile.

What next?

I will continue to do some work on it, to add the missing features and possibly to add full mobile support. Eventually I will get bored on move onto a different project. Such is my life.

Can anyone use it? Will I provide support?

Use it if you want, the code is open-source. I haven’t run it “in production” yet, but it should work fine in production. Keep in mind you are restricted by the mailinabox CORS policy. If you are not hosting the UI on the same host as mailinabox, you’ll need to use a backend server to proxy requests (similar to how it works locally).

I can’t promise to offer support, but feel free to create issues and I’ll take a look at them when time/interest allows.

Feedback & thoughts about mailinabox adoption

I feel there’s nothing “wrong” with the current UI. It’s simple & stable, and there’s no reason to change it. Saying that, if mailinabox wants to consider adopting this new UI, I’d be more than happy to contribute or to help integrate it.

At this time, i’m just looking for some feedback. Do you like it? Do you think it works? Any suggestions?

4 Likes
2

I’ve published a demo where you can get a better feel for the UI & UX: https://badsyntax.github.io/mailinabox-ui/

You can use any email and any password to login.

The demo uses a mock API, you can perform any action.

Note, it’s still not optimised for mobile and some features are still not complete.

3

Hey badsyntax,

this is a very cool design and I am jealous of your webdesign skills :slight_smile: I would love to see this in my mailinabox. The current design is functional and is definitely enough for its purpose, but your design adds some nice look and feel experience. :slight_smile:

@JoshData did you have a look? Do you think it’s something that could be integrated? :slight_smile:

4

It’s nice but I would not be able to maintain it, so no.

1 Like
5

thank you :slight_smile: i am also useless with design, all credit goes to the Fluent UI design system, i just composed the UI using their components.

i have recently added better mobile support so it should look good and be functional on mobile now.

i will add some docs on how to use it on your own box sometime in the future.

totally understand and this would be my recommendation too. it’s not simple and would be difficult to maintain.

1 Like
6

It’s an interesting proof of concept, and if the control panel HTML/CSS can be improved with some simple changes, that would of course be very welcome.

1 Like
7

This would be something I’d be very interested in!