Today we begin element 1 of an eight-aspect collection on constructing a web utility from absolute scratch to a entire product. i’m going to kick matters off via way of introducing the idea, after which I may be handling the layout, UI, and famous the front-stop stuff. we are going to be going back and forth from right here over to my buddy Jason Lengstorf’s website Copter Labs. Jason may be handling the decrease returned-give up stuff like software making plans and database stuff. on the quit of the week, we’re going to unleash the actual operating software for you.
What we’re going to create is a “list app”. The idea being focused on simplicity and value. sign up for an account, and get began making a listing in just a few seconds. Sounds clean proper? Even the php dabblers obtainable in all likelihood could throw something like this collectively pretty speedy, proper? well the reality is, no, it is now not that easy.
first of all, it desires to paintings and it wishes to work well. meaning top again quit code that does what it’s imagined to do and well. meaning a good UI that is intuitive, helpful, and enjoyable to use. It way keeping the app comfy and customers records personal. None of this stuff is trivial.
thru this whole 8-component series, we’re going to create an app that hopefully does all this stuff quite nicely. We aren’t out to inform you this is the greatest app ever made, however as a substitute, we are going to use this app as a stroll-through adventure of the app growing procedure and optimistically do as many smart matters as we will alongside the manner.
The Big Idea
This “list app” is going to be known as colored Lists. Lists (in real existence), may be for anything: a to-do listing, a grocery list, matters to carry camping listing… As you end matters, you pass them off. matters on a listing can be of different relative importance as nicely. This makes paper lists potentially messy and inefficient. With a list on a computer, we can make crossing off items just a click on and we can make rearranging them a count of drag and drop. For managing relative importance, we are able to use colorization, which could additionally be used for such things as grouping. computers and the web are a super region for lists.
Cartoon It Out
No want to get fancy proper away. here is a very rudimentary caricature of what the app might seem like:
looks like a list to me. every listing object is a long rectangle due to the fact the massive concept right here is to colorize each listing object, so placing them inside a colored container makes experience. There are some interactive factors to the left and proper of each listing item. the ones are going to be for undertaking the simple things we intend humans which will do with their colored list. permit’s take a better look.
Early UI making plans
We don’t always need to be ‘speak me’ approximately unique technologies at this point, but we ought to be thinking about how the UI will perform, so we will make alternatives approximately era that can accommodate our UI desires.
Drag and drop
Automatic saving (after any movement)
All these things basically provides up to an entire bunch of AJAX. We do not need to load special displays to do tremendously trivial tasks like deleting a list item. That stuff ought to occur seamlessly, smoothly and with right feedback in response to mouse clicks with out web page refreshes. In a sense, we are growing a one-web page app, wherein the general public of interaction with this app takes place on a single page. this is absolutely via layout, and now not trying to adhere to any particular fad. Lists are smooth and brief, it truly is why they are useful. If this app is complex, it is usefulness is dwindled and nobody will use it.
Simply doing a little brief brainstorming of the idea so far, we are able to provide you with pretty some of “monitors”, or states the utility can be in.
Logged out = Intro/income web page
Logged in = Your list
Log in page
Settings web page
Misplaced password page
Account activation web page
Yep, even emails ought to be considered a part of the “displays”, as they’re a essential a part of the process and interplay with an app.
Humans love “features”. things that your app has that other apps do not have, or that yours does better. that is simply as a good deal for marketing as it’s miles on your actual product. all the fancy AJAX this app will have is virtually a feature, however that stuff nowadays is getting increasingly more predicted in preference to a characteristic. the only characteristic that we will focus on with this app is “public sharing”. every list can have a completely unique URL that may be publicly shared. A vacationer journeying this URL can see the list in its genuine present day state, however now not have interaction with it as some distance as enhancing/adding/deleting.
Now that we’ve got the concept in region of what we need to build, within the next part we will dive into looking at what that is going to take in terms of server-side technology.
To be continued…!