A mixed day today but achieving my goal of getting something up. I mainly worked on getting the login design finished. This will sit under ‘my.simpleschedule.net’ page once it’s ready as I want to keep it separate from the marketing website. However, I am jumping the gun here a bit.

Getting set up for prototyping…

With the holding page out the way yesterday, I did the usual of setting up my project, creating a new repo named ‘SimpleSchedule.Frontend’. That’s clear enough for me… although might be a bit confusing down the road.

I decided to use Jekyll to help me with the frontend UI. I didn’t want to use just plain old HTML and then do some funky magic to re-use stuff. Jekyll, for me, fits the bill of what I want to achieve. Not only that, but I can pass in variables and others to partial includes.

Another useful thing with Jekyll is that you can set up custom collections. So for each section I am designing I am going to try and replicate the URL structure that I would like to achieve once I write the app. Not only that but it gives me a clearer view into the different sections.

You can see above that all I need to now is create something like the below in my Jekyll folder:

This in turn creates ‘/login/index/‘ or ‘/login/forgot/‘ url structure. Very cool and useful a bit later on. I don’t want to get too far ahead at this stage of the post though.

With the normal Jekyll installed and collections working, CodeKit doing its thing, I once again set up my server to receive the repo. I set up git with my initial commit.

Yup, new emoji right there. It’s just me that sees the commits, so I try and have a bit of fun. The server receives the change and builds the site. All good! If you are interested into what that build script looks like on the server, I just use the following build script once it pulled the repo:

bundle install --path .vendor/bundle
bundle exec jekyll build --config _config.yml,_config.stage.yml

Of note, I use a second ‘_config’ file for the staging site. This allows me to change a few things compared to my local dev environment. Handy!

The sketch…

Before I proceeded I had to get down the sketch of what I wanted to do. A great quality sketch.

Just your usual looking login form with an email and password input.

On a side note… I am unsure if I should use passwords. I always preferred those magic links. I’ll think about it though. I may do magic links first and then incorporate passwords at some stage. I am not too keen on using third-party auth either.

The login page

With collections working and my default styles in I went ahead and created the pages. Putting each section of it into partials so I can re-use them later on.

What I want to achieve is a full static replica, to the best I can, before I build the app. Yes, things will change as I go but this will ultimately help me define the app, what it does and also help me with database design.

It’s a bit weird to start with the login page… I know. I have a simple explanation why I do it this way… I want to experience the app from the first point on - this is usually the login page if you are registered. Granted I should probably work on the registration page first. It’s important to me that I get it right from the start and not miss anything.

With a common style for buttons and inputs, as you have seen on the holding page, I started putting it all together. And here it is:

Simple and clean.

I also created the forgot password page and some of the error/info message pop ups that you might see.

The help section changes depending on the page you are on. I am a huge fan to use different and natural language here. It’s a little detail but I like it. Regarding the ‘help’ page, I’ll be building that alongside the app… that is the plan anyway.

If you’re interested how all this comes together for me in code and how I separate everything… here you go:

Introducing the dev url

As I mentioned, I’ll be opening the URL to everyone to see and comment as I go. You may even see it change during the day as I push changes. I invite you to have a look.

Before you head there though, I provided you with a temporary front page and a ‘Site menu’ which you can see at the bottom left. This will help you to navigate around the site and explore the different section. I can only stress that this is a fully static site and does not work. But you know that!

Links will begin working as I go so feel free to click around at random times to see if something has changed.

Here is the url: https://frontend.dev.simpleschedule.net

As I said, the first page will be an overview of all the pages that are ready and completed. Just start with the first link.

Also there is a little ‘site menu’ button at the bottom left. Clicking that will bring up the page navigation for you to click around. I thought that might be useful to have so I can check all the pages with easy. This won’t ship in the live app of course.

Quick thoughts on the design

I am not too happy with the logo, just doesn’t look right and there is a lot of blue. The logo will probably change. An easy change. I also wanted to introduce a secondary colour. You can see a nice yellow as the bullet points in the help section, I’ll be using this more.

A few other things

Some other things, after I pushed this up - I changed the holding site a bit and introduced a blue button, re-worded the text slightly and reduced the size of the logo. Always good to sleep on a few things.

Another thing, which took me a bit of time, is that I created a special section on my site to pull together all the posts for the code challenge. I thought that was important so I could reference it easily in a few months time and hopefully add a few more challenges. I hope it also helps you if you come across the post or are already following.

As always, I ticked off a few things on my TaskPaper document, which you can see here.

Day 4 - Goals & Overview:

• - Set up front end dev environment @done
• - Login page @done
• - Open up dev URL @done
• - Add link to my site on frontend site @done
• - Add special section on VR site for the code challenge and link to posts @done
• - Add blue button to holding site @done
• - Reduce size of logo on holding site @done

I may just start the registration page tonight and will continue during the day tomorrow.

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.