Code Challenge - Day 5. Registration page and preliminary app navigation.
Today was the first day my daughter went back to pre-school, after some extended time away. With my little secretary gone I took my login page, pretty much duplicated it and started creating the register page.
I wanted a super simple register page, that would just take your email address. This in turn would register you and create that ‘magic link’ and log you right in.
As I build the UI I am also building a model in my head on how the app should work. Guess that will prepare me nicely… I hope.
The plan is that I check if the email exists and, if it does, prompt you to log in instead… As I believe it could be a bit confusing, if I do use magic links, I may just send out an email anyway with a login link. TBC. (thinking out loud).
The thank you page with some details about verifying your email. Not sure if I will use this now… instead I just want people to go straight to the Dashboard/Overview screen.
Thoughts on email verification are that I’d like to include a ‘reply to’ address to emails that would get sent out for specific events. I might just drop it though, for ease to the customer.
You can find the URL for the registration page here.
Feel free to click around and you will see how it should work.
I may just revisit the login pages in the next few days to take into account magic links.
Thoughts on the logo
I wasn’t happy with my “10 minute” logo, so my sister has decided that she’ll sketch something up for me to use. Awesome! She actually helped turn my sketch for the justcode.tv logo into a vectored drawing!
Starting the App UI
I few months ago I was working on a concept, from an old project, where I designed a header navigation already. I like it so decided, for speed, to re-use most of it.
Nothing too fancy and nothing that is in your face too much. Keeping it minimal, but functional, is the aim. Some special stuff with a gaussian blur when you’re using Safari… I actually have a small javascript snippet that adds a “superpowers” class to the HTML.
Icons are always nice and I decided to spice it up a little with feather icons. I really like them. Not a huge fan of Font Awesome… just a tad overused!
And a account dropdown to the right.
The verification info is there just to remind you that the account email needs to be verified. Maybe a little over the top and will probably have it a light grey/gray background with red text. You can see the icons work really well here.
That section is also fully responsive so works across different screen sizes.
You can see some of the code I wrote for the header and dropdown. Excuse the class names… it works for me to keep track of it all.
Sitemap
I created a very simple sitemap to help on the way so I can tick off all the pages I need to consider.
I’ll expand on that as I go. However with this I can concentrate on the designs and make sure I don’t miss anything.
Don’t want it to turn into a monster either so I need to watch myself and keep features to minimum, otherwise I’ll be coding till summer!
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: