👋 Hey there! We want to give you a heads up that the source code that accompanies this series is no longer available to download. We still think there are valuable bits of information to get from the series, but given that we’re 10+ years down the road, we also think it’s worth considering a modern PHP framework (like Laravel) or even a JavaScript framework (like React or Vue) to create a progressive web app.
Today we begin Part 1 of an 8-Part series on building a web application from absolute scratch to a complete product. I am going to kick things off by introducing the idea, and then I will be handling the design, UI, and general front-end stuff. We are going to be going back and forth from here over to my friend Jason Lengstorf’s site Copter Labs. Jason will be handling the back-end stuff like application planning and database stuff. At the end of the week, we’ll unleash the actual working application for you. Here is the plan:
Article Series
- Planning the App: Basic Idea and Design
- Planning the App: Database Architecture and Development Approach
- Designing the App: Workflow Map and Photoshop Design
- Designing the App: HTML and CSS
- Developing the App: User Interaction
- Developing the App: Adding AJAX Interactivity
- Developing the App: List Interaction
- Security & The Future
It’s Easy, Right?
What we’re going to create is a “list app”. The idea being focused on simplicity and usefulness. Sign up for an account, and get started making a list in just a few seconds. Sounds easy right? Even the PHP dabblers out there probably could throw something like this together fairly quickly, right? Well the fact is, no, it’s not that easy.
First of all, it needs to work and it needs to work well. That means good back end code that does what it’s supposed to do and well. That means a good UI that is intuitive, helpful, and pleasurable to use. It means keeping the app secure and users data private. None of these things is trivial.
Through this whole 8-part series, we are going to create an app that hopefully does all these things pretty well. We aren’t out to tell you this is the greatest app ever made, but rather, we are going to use this app as a walk-through journey of the app creating process and hopefully do as many smart things as we can along the way.
The Big Idea
This “list app” is going to be called Colored Lists. Lists (in real life), can be for anything: a to-do list, a grocery list, things to bring camping list… As you finish things, you cross them off. Things on a list may be of different relative importance as well. This makes paper lists potentially messy and inefficient. With a list on a computer, we can make crossing off items just a click and we can make rearranging them a matter of drag and drop. For dealing with relative importance, we can use colorization, which could also be used for things like grouping. Computers and the web are a perfect place for lists.
Sketch It Out
No need to get fancy right away. Here is a very rudimentary sketch of what the app might look like:
Looks like a list to me. Each list item is a long rectangle because the big idea here is to colorize each list item, so putting them inside a colored box makes sense. There are some interactive elements to the left and right of each list item. Those are going to be for accomplishing the basic things we intend people to be able to do with their colored list. Let’s take a closer look.
Early UI Planning
We don’t necessarily want to be talking about specific technologies at this point, but we should be thinking about how the UI will operate, so we can make choices about technology that can accommodate our UI desires.
- Click-to-edit
- Drag and drop
- Two-click delete
- Automatic saving (after any action)
All this stuff basically adds up to a whole bunch of AJAX. We don’t want to load special screens to do relatively trivial tasks like deleting a list item. That stuff should happen seamlessly, smoothly and with proper feedback in response to mouse clicks without page refreshes. In a sense, we are creating a one-page app, where the majority of interaction with this app happens on a single page. This is certainly by design, and not trying to adhere to any particular fad. Lists are easy and quick, that’s why they are useful. If this app is complicated, it’s usefulness is diminished and nobody will use it.
The Screens
Just doing some quick brainstorming of the idea so far, we can come up with quite a number of “screens”, or states the application can be in.
- Homepage
- Logged out = Intro/Sales Page
- Logged in = Your list
- Log in page
- Settings page
- Lost password page
- Account activation page
- Emails
Yep, even emails should be considered a part of the “screens”, as they are a vital part of the process and interaction with an app.
“Features”
People love “features”. Things that your app has that other apps don’t have, or that yours does better. This is just as much for marketing as it is for your actual product. All the fancy AJAX this app will have is certainly a feature, but that stuff these days is getting more and more expected rather than a feature. The one feature that we will focus on with this app is “public sharing”. Each list will have a unique URL that can be publicly shared. A visitor visiting this URL can see the list in its exact current state, but not interact with it as far as editing/adding/deleting.
Moving On
Now that we have the idea in place of what we want to build, in the next part we’ll dive into looking at what this is going to take in terms of server-side technology.
cant wait for the next part. thanks a lot for this and your entire site. i learned a lot from you.
Wow, great start of a series I’m sure will be great. Can’t wait for part two!
Sonds really interesting!
I’ve been planning an app for a while now. Might let this series play out before I attempt it. looking forward to part three
Sounds like fun. Definitely something different from usual content.
This looks interesting. I am going to try to follow this.
This will be an excellent week! :)
YES. Looking forward to more!
I do realize that it’s not quite the point, but shouldn’t you be able to “Check off” a list item?
Yes definitely, that will be covered =)
Nice. Can’t wait fo it.
Thank you so much for.., Chris! Hi from russian medved :)
“If you wish to make a web app from scratch, you must first invent the universe.”
paraphrased from Carl Sagan.
Wow, thanks! Just what I need. I’m trying to build my own webapp, but wasn’t sure how to go through all steps. :-)
Good Tutorial. looking forward to the rest of this series.
Hmm a web app, definitely will looking forward from it also. Because I Love PHP stuff also
Ive Never heard of ennuidesign, nice site! btw.
Thank you for this. I am tired of seeing “Let’s build a web app” tutorials where all you do is build a freaking CMS. Looks like you are going to go over building something that actually is unique
We hope so! Friday we’ll put the app out there for you to actually play with and potentially use too, so it’ll all come together that way.
Nice post! I’m looking forward to the next bits
this looks like its gonna be a good series, thanks!
Thank you for this! This site continues to amaze me.. this example cited.
Perfect timing! With the news of Google Chrome OS being based around web apps only I think it will be interesting to see what goes into the design process for this level of app.
I have a lot of hope in fellow designers and developers like you and me will be building the next gen of OS applications :)
Cannot wait for the next part in the series!
Roll on Part 3! Waiting eagerly for the next installment.
It’s refreshing to see the workflow, ideas and actions needed for app building…but then CSS-Tricks never fails in such matters. Always informative, idea-inducing, and thorough in explanation.
Thanks to those who make such information available, namely Chris and Jason in this case :-)
That will be great ……
good tutorial… wait for next part… :)
Many Thanks…..
this is simply awesome post. thanks for sharing. eagerly waiting for your next part of this series.
I need/want a to-do list that fits my needs and that I can run on my own site. This seems like the perfect solution. I’ll be keeping an eye on the series, following along and building right along with you.
Great article as I have been trying to figure out how to tackle a web app for some time now.
cool, I was just looking for a project idea to sharpen my codeigniter skills, so I’ll try to follow along in CI.
this is one great series of articles written from web developers to web developers!
bravo! can’t wait to read part 7 & 8
Good Tutorial!
Look forward to reading the whole series. Just need to get down to some serious coding/design.
I’ll be following along and making my own app too, hopefully! Nice work!
Great Idea, looking forward for the rest of the serie.
Wonderful idea perfected to realisation as usual. Keep rocking chris and pals :)
Great idea, Chris! Looking forward to reading all parts.
A wicked tutorial and workthrough….however my lists don’t save, nor does my public url appear to be correct. Have I been impatient (as in, it’s not ready yet) or is something not quite right?
Logging out appears to throw a wobbly too.
Appears to be IE wih the issue of logging off.
Nice one!
“it’s usefulness is diminished” – “it’s” means it is. Try losing that apostrophe…
Ditto for “can see the list in it’s exact current state”
Nice To understand core programmer.
Hey this is awesome…
Can you please turn this into a video tutorial and sell it… we’ll support… you’ve got nothing to loose after doing it for free :)
Ok maybe you’ve got time to loose :D
Very nice and detailed series on how to plan a web app. It is a must to stay organized during developement of an app.
Hello Chris. I have published a technical checklist for developing web applications, as a guide. You can use some of the items on my list too, I’ve reviewed your article before creating. Checklist. (note: i’m subscribing follow-ups to this post)
nice
Hi,
how can i get the source code of this web application?
I have some few errors after i followed the whole article.
Thanks,
Astro