Vincent Ritter

I'm a dad, husband, geek and an independent software engineer.

Hello, I'm Vincent. I'm a dad, husband, geek and an independent software engineer. Browse around the site to find out more about me and what I'm up to. From the apps I make, to websites and others like my blog posts and thoughts, my micro blog.

Experimenting with a new logo for Simple Schedule (I am not a brand designer haha). Have used it on my frontend build of the project.


Code Challenge - Day 10. There are no events, pricing thoughts and badges.

Yesterday night I sat down on the sofa and started watching Wonder Woman. Great movie! That also meant I didn’t really do anything to help push this along.

It’s just past lunchtime and had a productive morning.

No data

Everything I designed includes data. But we all know that when you first register, there will be no data on any of the pages. Whilst I’m planning to improve on the on-boarding process a little, I decided that I will just show a little bit of information on the dashboard when you first register. On top, when you navigate to ‘My Events’ or ‘My Attendees’ this will also show a info section so you can get creating straight away.

They all look the same with variation of text throughout. Text is not final.

Nothing too exciting. A necessary step though.

Thoughts on pricing

I had the following plan for the app:

  1. $2 per event
  2. 5 or 10 credit package, with an option to auto top-up when low.

I didn’t want to add a subscription model, which automatically takes payment every month. However, I had another think about it… In order not to offer too many options for customers, just to keep things simple, I thought of the following:

  1. Get rid of the $2 per event option.
  2. Keep the 5 credits package, with optional automatic top-up.
  3. Offer a PRO subscription, which automatically renews, that allows unlimited events during subscription.

Although I wasn’t comfortable to take peoples money automatically, I wanted something to offer for larger organisations or perhaps agencies that do this sort of thing for other clients. On top, I want to offer the PRO plan for beta subscribers and contributors.

When you first register, as a normal subscriber, the plan is to give one credit for them to try out. Another thought about the PRO plan is to allow a bit more customisation.

The pricing and billing won’t be in place until I’m close to finishing the app. However, I have a clear picture how I want to handle this, so hopefully won’t require much database work… if I change my mind.

Credit and PRO badges

With the pricing stuff out the way, I worked on showing credits on the page. As usual, this is not final, but close to where I want it.

There is now a little badge on the top right, next to ‘My Account’ that either shows you how many credits you have left or just “PRO”. When credits are low, the idea is that the color here changes from green to red.

On top, there is a dropdown that explains what it is… thought this is necessary not to confuse anyone.

Here are the different states:

PRO level. Enough said.

5 credits left on this one, with a simple explanation. I’ll have to explore some info section when creating an event too.

Uh oh! No credits left so here it turns red.

If you’re running low, I’ll also show a small warning under the ‘My Account’ dropdown… might change my mind on that though.

Next steps

The closer I get to a complete design the more I seem to still have to do… The three big areas I need to concentrate on before the weekend are:

  1. Finish Events details page (multiple pages and designs).
  2. Add event public url page.
  3. Add attendee details page.

Probably more as I go. The billing page I’ll tackle towards the end of the beta as everyone will be PRO during that phase (and stay that way) - however, I’ll give anyone the option to buy credits or subscribe to support me (won’t push it though and will be totally optional with no hard feelings at all).

Anyway, with those 3 areas done I think I have done enough to move along to app build. Quite excited about that. Still aiming for the weekend…

Links to the design points:

Throughout you’ll be able to see the badges too, but for specific ones:


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. There is also the Simple Schedule holding site where you can sign up for a beta.

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.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.
  8. Code Challenge - Day 7. 'My Events' view.
  9. Code Challenge - Day 8. Burning the midnight oil, loud music and good progress.
  10. Code Challenge - Day 9. Progress, changes and regrets.

Code Challenge - Day 9. Progress, changes and regrets.

I seem to find myself more productive in the evenings, so once again a slightly delayed post. I’ll be working on Day 10 already after this one.

Dashboard

Link: https://frontend.dev.simpleschedule.net/app/dashboard/index/

It was time to add to the dashboard. So, using the already designed sections, I added upcoming and current events including the latest entries (attendees) for the events in question.

I’ll be expanding this over the course of the week to also show a “welcome” section for when you first log in to get you started. Data, even when fake, looks OK… but what do you show when there is no data? Also, real data will be king here so will be good to see user feedback too. I did sketch out what I had in mind but won’t tackle it just yet.

I don’t want to add too much to this area just yet. You can also see I added some color to the attendees section, just to move away from all this blue.

In a way, I’m still not happy with the events list… but I’m moving along and will revisit that at some later stage. The data I want to show is there, just not decided how to show it just yet.

Event Detail View

Link: https://frontend.dev.simpleschedule.net/app/events/details/

To be honest, this isn’t finished yet… but it’s at a good stage to show already. I’m going to keep it relatively easy without too much information overflow. Showing the details of the event, latest attendees with option to show all of them and also a CSV download. That might be useful for getting it into a mailing list or so.

There are still many sections to make for this… as came apparent when I was working on it - sort of daunting at first until I processed it and wrote it all down.

Still to do:

  1. All attendees view for the event.
  2. Date filter and view (for multi day events).
  3. Work out a way to include ‘booking slots’, say for a specific time.
  4. Add an attendee to an event/date within an event (without leaving the event screen - if that makes sense).

The 3rd point brings me to my regret… I should have designed the Attendees list in an easier way by using a table, as I could easily add a few columns and it would just adjust. Although, I will probably use ‘flex’ or something to do the same thing for me… actually… I think I’ll do exactly that. I’m not a huge fan of tables, but they are great for big data. Looking at extra fields like time slots and dates at the same time, without breaking everything.

Other tweaks

Some icons were changed around for attendees and some added for events. On top, a few color changes here and there just to separate out that blue a little more. I really like to add a bit of yellow too, they go well together.

I also added some info bubble messages when you click on delete event or create an event. I welcome you to try it, or you can see them here:

  1. Delete event: https://frontend.dev.simpleschedule.net/app/events/deleted/
  2. Create event: https://frontend.dev.simpleschedule.net/app/events/created/

Closing thoughts and next steps

I found myself reading my past posts, just to remind myself of where I want to take it. It’s been invaluable sharing all this. If I wouldn’t have written all this down, even though it takes time, I would not think this app would have a clear focus of its direction, nor would it motivate me to keep going and eventually just sink into the black hole which is my 'idea book of the forgotten'. (Yes, I have an idea book folder in Notes with 43 ideas… one of which is this).

For the next steps I’ll be looking at adding some info towards the “paid” tiers and continue with the event view page. I’ll also look at the attendees list in a bit more detail so I can add more data.

I do see myself starting the actual app build by the weekend and will continue to push as best as I can to achieve that. Thinking of a good way to share that as I build it... would be a bit boring not to see it come to actual life... in an app way...


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. There is also the Simple Schedule holding site where you can sign up for a beta.

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.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.
  8. Code Challenge - Day 7. 'My Events' view.
  9. Code Challenge - Day 8. Burning the midnight oil, loud music and good progress.

I think I was under a rock when Micro Monday was announced on Micro.blog. There are many I want to mention, but for today I recommend checking out @colinwalker. He writes about many topics on a technical level, philosophical level and others. It's really opened my mind that people are quite diverse and have different interests... a feeling I never really felt on Twitter... or let's say it felt hidden because of the disconnect from not owning your own content. Colin's website is also a great example of incorporating the IndieWeb movement. Thanks Colin for sharing and inspiring me to keep an open mind!

Well, here we go. I just deleted my Twitter account (which I haven't really used in a year or so). I'm all in on Micro.blog and the amazing community there.


Code Challenge - Day 8. Burning the midnight oil, loud music and good progress.

I didn’t get the chance to write this up earlier, it was 02:00 AM by the time I finished and decided to call it a day. Since the past year or so I try not to stay awake too late, although… I like the peace and quiet so I can concentrate.

Friday wasn’t a good day to be productive, aimlessly clicking around and reading some articles. However, I feel I made good progress yesterday (and this morning) to make up for it.

My Attendees page

I wanted a simple list view for all attendees. Not like the ‘My Events’ page, which has a big and bold look, as I knew that there will be many entries. So I created a condensed list showing basic details - Name, Email and events they are part of. There will also be a search bar, so you can look up details.

This is what I came up with:

I’m planning to add some controls to the top right that will allow you to sort the display of the results. Either by name or events.

There are a few things I want to tweak especially when the screen size gets smaller, but that is something I’ll tackle a little later on in the project. I’m OK to go into beta with rough edges, as it should be, and want to make sure what I code meets my expectations and keeps true what I’m designing here. There will be areas that will probably change along the way as I find better ways to do things.

Create a new attendee

This one was simple and that is the way I wanted it. Down the line I want to add the feature to book people/clients directly to a time slot or just enter their details directly to an event. Adding them here is just one way to do exactly that. Perhaps not a feature that is required just yet, but good to have. Not to mention, being able to use the design on other parts of the site.

I’ll show a list of events that are upcoming or current if you wanted to add them directly to one or more events. Useful when someone emails you asking to be put on the list.

The edit page for these will look slightly different, but I haven’t decided on the best way to display this yet. I have an idea though.

Account Profile & Settings

Didn’t think I would work on these but here we are. I’m yet to decide if I should have a profile page or not and perhaps just merge it to ‘Settings’. Nice to have separate though.

The idea of the profile page is to enter a ‘display name’ that people can see when they load up the public URL for the event, including showing a small profile image of the organiser. This could be an individual or a business… or whatever. It’s optional at this stage so not required as such. I’m also planning to make a feature where you can hide these details on the public URL on an event by event basis - or perhaps override it if with different details.

Couldn’t resist that image!

The settings page will only contain an ‘email’ box and some other settings that are yet to be added.

I think that’s easy to follow.

Planning to add a ‘Date Format’ section here too… I know that people like their dates differently, so good to have that as a setting. I do want to add an on-boarding process that will set this as you first log in after registering.

I didn’t touch billing yet.

If you change the email address and hit save, you’ll see a how I plan to display a success message… try it.

Closing notes

Whilst I was working on it, it became apparent how more complex everything is becoming in terms of making sure that all the correct pages are there and that I don’t miss anything. On top, I’m getting ideas for features… which is good and bad. For now though, I write them down in TaskPaper to keep track. I’m still pushing for beta by day 30 or 40 so I don’t want to add too much workload at this stage… the only downside that I can see is huge database changes. Hope to mitigate that a little though by keeping conservative with features and true to ‘simple’.

I already sketched out the ‘Event View’ page that will give you a breakdown of the event so I hope to work on that next.

Seeing the attendee list makes me want to redo the events list a little, but not too sure yet.

Another thing I need to think about now is adding the view for ‘Credits’ you have on the account when creating events (the paid feature). Not sure why I haven’t thought of it earlier… but it needs to be there for launch. Beta users and early supporters will have a lifetime free account.

Hope to have another big push the next few days and get it as close to “design” complete over the course of the week.

Also forgot that I need to work on email templates… arrrgghhh!

As always you can view the above pages here:


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. There is also the Simple Schedule holding site where you can sign up for a beta.

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.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.
  8. Code Challenge - Day 7. 'My Events' view.

Been thinking hard if I should add a "Consulting" page to my site... maybe on a subdomain...

Difficult to get into the swing today. I'll give it another hour until I knock it on the head... nothing worse than starring at the screen and clicking aimlessly all day.

Might try a card based events list... now that I wrote my blog post haha. Had a brainwave about that.

Code Challenge - Day 7. 'My Events' view.

Today I solely worked on the events list that you see under ‘My Events’. Didn’t have too much time today but feel I achieved what I wanted. Plus, it gives me a bit of time tonight to figure out what I want to move along tomorrow.

Thoughts on bad actors

Before I get into it, I was thinking how I can keep my paid model for ‘credits’ of events viable and stop people from abusing the ‘Edit’ feature on an event. So let’s say someone would create an event, publish it, spend one credit on it and then after it is done… they go ahead and edit the event and just change the dates and rename it. I am unsure how I best can handle this.

For now, I think I will trust the user first most. If the event is in the past, mark it “past” in the database and don’t allow any edits on it. Cloning the event will not be a problem.

I understand that people will make mistakes hence I’ll enable the edit feature. Another thing I could do is keep it editable until there are certain amount of ‘attendees’ registered for the event. Disabling the event name and dates to be edited at this stage would be good. In rare cases I will of course accept emails to change it - if it was a genuine mistake.

Hopefully that is a good compromise of potentially pissing off clients and keeping it fair.

My Events View

For this round I made a sketch, but I’ll spare the embarrassment. I wanted a super simple and clean overview of all events, with the latest/upcoming events showing at the top, with past events in their own little section at the bottom (like an archive).

I didn’t want anything over the top or fancy either - just focus on events and make it a nice and simple experience for everyone. There are many apps with fancy graphics and fancy animations… true they are nice… but at the end of the day, it’s the app and the functionality that matters. Not only that, it would take time to build that all in. I’m aiming for an MVP and a learning experience and not a beauty contest.

So this is what I came up with:

To break it down I wanted to show every event with a nice big font as most people can relate to the event name more than a date. Although… maybe they can remember the dates better. A list view may have been good also but I would feel it would be too compressed and perhaps a bit too corporate… time will tell. Although, I’m planning a more condensed list for ‘attendees’ as that might get huge.

The event name is clickable and will at some stage, in the next few days, take you to the event overview page. Attendees will show you how many RSVP’s there are and that is also clickable - this will go to the attendees section of the event page.

'Edit' is self explanatory and will look similar to what we have for ‘Create new Event’. ‘View’ will also take you to the overview page for the event.

'Public link' will open a special page that is viewable by the public where people can register themselves for the event. Thought this might be useful to have so clients can get there quickly. I may look at marking events as private, but we’ll see.

On a different note to myself, I must remember to allow adding attendees manually to an event.

As usual, I made a few tweaks here and there - boring stuff like adding a border radius (curved corners) to the calendar picker, stopped the keyboard from popping up on iOS devices for the date picker… just to name a few.

The site is also adaptable to smaller screens (responsive), so you can see it here for the event page as below:

Still loads to do with tweaking this.

The blue is totally overpowering in my eyes. Perhaps I’ll explore different shades and mix it up a little. TBC.

You can find the page here.

Thanks for reading. I'm pretty excited...


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. There is also the Simple Schedule holding site where you can sign up for a beta.

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.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.

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.

Happy to report that I'm actually working on Simple Schedule, my code challenge. Started late today but will do my very best to keep it up and get those posts coming.

Hope to resume my Code Challenge soon. Might even get into it tonight a little. Don't want to let myself down with not doing it... nor anyone that is following. Thinking of creating a small micro-cast to talk about it perhaps...

Flight back to Kraków on the 22nd of December. Was beautiful! I should have stuck to flying these metal boxes.


Nice clouds on approach to Newcastle Airport, Northumberland, UK. When I flew out the other week.


Looking for a job

2018 is on the brink. 2017 is over and boy has it been a rollercoaster ride.

Freelancing is hard, challenging but also immensely rewarding… when it works out. However, it is time to move on from my little experiment.

I came to realise that I can only learn so much on my own, only get to a certain level with online courses and practice. What I really need is to find something where I can take my existing skills and really get amazingly good at them. That requires experience from peers to guide me. I can only do so much.

So for 2018, I am looking for a job. I love working remotely as it gives me a great balance of family life and work, working in an office will not suit me at all (although I am happy to pop in). Also, with family commitments it would have to be something either project by project based or set hours based. 9 - 5 will be hard, but hourly target per day will be great.

I don’t want anything boring, I want to be able to push myself and move up on the ladder. It is the only way I know how to work and be happy.

My website is my CV, from websites to personal projects and apps. I know Swift well and enjoy working in Xcode. I also love creating websites and backend systems. I learned C# at my last full time job really well. This year I concentrated on Ruby as I wanted to move away from the Microsoft stack in general. I am not perfect at Ruby, but with doing apps like my code challenge, it is my way of learning. I always want to try something new. I am not a professional designer but everything you see here and on the 'sites' page are all my designs.

One word of warning is that I find it hard with the “theory” side of things… I just do and let results speak by themselves. I don’t think I would get past a technical interview…

Freelancing is very lonely for me and I miss the interaction with colleagues and friends I make. I never realised it would affect me so much.

I’d like to make a dent in the universe wherever I end up and looking for long term/lifetime employment.

If you want to get me started with a small project to see how it goes, I’ll be happy to do that. Happy to work on an existing project so you can see how I tackle problems. Best is to let me know and maybe we can do something. I am sure not to disappoint and if I do… nothing is lost.

If you have seen my work and know someone that could use me on their team, please share this message. I would forever be in your debt.


You can email me here: hey@vincentritter.com

Close