Vincent Ritter

Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.

After some time off, it took me a bit to get back into the swing of things. It also gave me the opportunity to rethink the core function of the app. On top, I’m extra motivated to make this work nicely.

Unfortunately there are still things on my mind at the moment from the past few weeks, but I’m trying not to think about it too much. Also, failing this challenge will negatively impact me in a way I cannot describe. I feel lost and stuck without progress at times.

Cosmetic changes and code base thoughts

To get into the groove I tweaked a few tiny things on the static design. Nothing major but it ultimately helped me ease back into my small but significant codebase.

On top, I was having a think about the codebase… not to bore you too much, but I think I’ll go ahead and give ASP.NET Core a try with this. It runs on the Mac and I can use Visual Studio on the Mac too - It’s an amazing IDE (although basically Xamarin under the hood). I’ve got great experience with C# already thanks to my past and didn’t realise ASP.NET development came this far for the Mac already. I was reluctant to use it as I did not want to spin up a Windows VM… on top, it’s quite easy to get everything deployed with Azure - up my alley too.

Create a new event

With the tweaks out the way, I started on getting the ‘create a new event’ page done. Of course I sketched it out first by hand, to get a feel for it.

Sure, a good start. Setting off, I wanted to avoid custom styling per page and have re-usable form elements that I could use across the app. All inputs and they way it’s set up can be re-used with just copying the HTML and I am done. That will help me with extra section down the line… and once the app gets a bit more complicated, which I’ll touch on in a minute, I could potentially add new sections quickly without too much headache. (Not sure if I just repeated myself).

I’m opting for natural language with descriptions and want to describe it more but also make it easy to use. I’ll no doubt tweak the wording, but I also want some of my own personality to show through on the web app.

On the Dashboard and on the 'My Events' page you’ll see a ‘Create new Event’ button, which will take you to the section.

It’s just a button.

As my sketch shows, I came up with the following design… in all its glory:

Simple, to the point and functional. The font type I’m not too happy with and will probably change that at some stage. Or, I just work on spacing a bit more. To be decided as I go. I’m certainly not happy with spacing of the header and the immediate section heading on smaller screens and will tweak that during the next few days/weeks.

In a true MVP (Minimum Viable Product) style I decided to remove some features until I hit beta. I want to concentrate on the single event (RSVP style) instead of time slots. I did work out how to do time slots, but I like to work on the database design on that to make sure I have a sound understanding of where to go. Mixing it up like this always seems to work for me.

There a few controls that show up once you enter a ‘Name’ or some other info that will allow you to save the event. This fades in at the bottom.

I may add a “Save as draft” option for more complicated events.

The date picker uses Pickaday by David Bushell. It’s pretty neat and just what I’m after.


If you want to look at the section on the front-end site, you can find it here.

Closing notes

With this out the way I can now concentrate on working on the events page. Probably get started right away to keep the momentum. After that I will probably create the ‘account’ and ‘billing’ pages, just to mix it up a little.


I wrote this article mainly for myself to follow along when I look back at it at some stage. If you like to contribute, please email me or let me know via Micro.blog.

For other posts on the challenge, check out the links below:

  1. Code challenge - from zero to web app in 60 days
  2. Code challenge - Prelude and Day 1 - Setting things up
  3. Code challenge - Day 2
  4. Code challenge - Day 3. Holding page.
  5. Code Challenge - Day 4. A login page and a few tweaks.
  6. Code Challenge - Day 5. Registration page and preliminary app navigation.
Close