Mubashar Iqbal
Nov 14, 2017 · 4 min read

The best laid plans of mice

Have you read Part 7 of the Making a Side Project series?

Photo by Tamarcus Brown on Unsplash

Before I jump into building Deaton, I like to think about the totality of that I’m trying to build.

This means considering the sitemap, wireframes and how people will interact with different features and how they’ll navigate between different parts of the site. I also like to think about the overall technical architecture and consider what if any external resources I’ll need.

Sitemap

“A site map is a list of pages of a web site.”

— Wikipedia

I try not to go crazy here, there will a number of static pages that will be easy to add, I’m more concerned with pages that include functionality in them that I need to build.

The MUP for Deaton is pretty small, and so the number of pages I need to build is pretty small too.

Sitemap

You may notice that I’ve also left of some fairly standard pages. Change password, account settings, etc. They are standard pages I know I have to build. They do not contain Deaton specific functionality so I don’t worry about them for now.

Wireframes

“A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.”

— Wikipedia

For the MUP I try to keep the layout of the website pretty consistent. There are typically 3 layouts I consider. I had also considered building a custom landing page, but the Product Hunt Upcoming page is doing a splendid job so that will save me some time.

Marketing Page

In many respects this is the most important page of the website. It is typically the first page that a new user will see on your website. It is very important to make a good first impression.

The page will start simple and short, and as we continue to add features and hopefully get feedback (and testimonials) we can update the page.

Authorization Pages

These are typically very light, a simple layout for pages that have a single purpose. We want to get users logged in or registered as quickly as possible with no distractions, and into the application.

Application Pages

The majority of the actual application pages will use this layout. This is pretty standard layout used by a lot of applications. It works, I’m not going to invent anything new.

The amount of data that I need to collect for each element is pretty small. For a project we just need a name, logo image, and perhaps a URL. For expenses we just need to collect the amount, description, and if it is a recurring expense or not.

The navigation on the left hand side, will provide a quick way for the user navigate to different parts of the application. Switching between projects, links for added expenses, will always be present.

Overall Architecture

The MUP for Deaton, really isn’t going to require anything special. A pretty normal web application, LaravelPHP with Bootstrap for the HTML/CSS and perhaps a little VueJS sprinkled in.

Future version will get a little more complicated, as we try an integrate with external services to automatically extract expenses, etc.

Nothing much in the way of external resources, just a way to send emails for that dread forgot password, and the invitations.

Data Model

Just a handful of models will store all our data. This will definitely grow as we add more features, but keeping things simple for now. I haven’t broken down all the fields on the tables. I have a pretty god idea in my head, and that will flow pretty quickly directly in the code.

If I wasn’t documenting my process here, I probably wouldn’t have taken the time to sketch everything out here. It’s small enough just thinking thru everything, I’m able to remember everything I need as I run thru the coding up the application.

I think that’s all we need to get into coding!

Next: Making a Side Project, Part 9: Development Setup

This is part of my Making a Side Project series, follow me or subscribe for updates via email.

Make Side Project

Making a Side Project in Public

Mubashar Iqbal

Written by

2016 @ProductHunt Maker of the Year. Making side projects for fun and profit.

Make Side Project

Making a Side Project in Public

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade