{"id":4170,"date":"2009-11-23T07:09:42","date_gmt":"2009-11-23T14:09:42","guid":{"rendered":"http:\/\/css-tricks.com\/?p=4170"},"modified":"2019-04-09T16:24:18","modified_gmt":"2019-04-09T23:24:18","slug":"app-from-scratch-1-design","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/app-from-scratch-1-design\/","title":{"rendered":"Creating a Web App from Scratch – Part 1 of 8: Basic Idea and Design"},"content":{"rendered":"

👋 Hey there!<\/strong> 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<\/a>) or even a JavaScript framework (like React<\/a> or Vue<\/a>) to create a progressive web app.<\/p>\n

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<\/a>. Jason will be handling the back-end stuff like application planning and database stuff. At the end of the week,<\/strong> we’ll unleash the actual working application for you. Here is the plan:<\/p>\n

<\/p>\n

\n

Article Series<\/h4>\n
    \n
  1. Planning the App: Basic Idea and Design<\/a><\/li>\n
  2. Planning the App: Database Architecture and Development Approach<\/a><\/li>\n
  3. Designing the App: Workflow Map and Photoshop Design<\/a><\/li>\n
  4. Designing the App: HTML and CSS<\/a><\/li>\n
  5. Developing the App: User Interaction<\/a><\/li>\n
  6. Developing the App: Adding AJAX Interactivity<\/a><\/li>\n
  7. Developing the App: List Interaction<\/a><\/li>\n
  8. Security & The Future<\/a><\/li>\n<\/ol>\n<\/div>\n

    It’s Easy, Right?<\/h3>\n

    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.<\/p>\n

    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.<\/p>\n

    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.<\/p>\n

    The Big Idea<\/h3>\n

    This “list app” is going to be called Colored Lists<\/strong>. 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.<\/p>\n

    Sketch It Out<\/h3>\n

    No need to get fancy right away. Here is a very rudimentary sketch of what the app might look like:<\/p>\n

    \"\"<\/p>\n

    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.<\/p>\n

    Early UI Planning<\/h3>\n

    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. <\/p>\n