

Ask HN: If you were teaching web apps, what would you have your students build? - oreilly

Whats a good series of short challenges for learning web applications?<p>For those of us taking on advice to build a portfolio, whats a good showcase of applications to have built?
======
callmeed
0\. Hello World-ish

1\. Simple link shortener (no accounts/logins, just store the links and do
301s)

2\. Simple blog with HTTP basic auth on the admin

3\. Update blog to have comments & true user accounts/logins for admin

4\. Update blog to allow image attachments with a post and include the link
shortener code (so every post has a short url)

5\. Update blog to allow commenting and email the admin when a comment is
posted

6\. Something different–probably a simple forum or classified/ecommerce site
that just uses paypal

7\. Something dealing with external data/APIs

~~~
loewenskind
Pet peeve: We do lists with _ordinal_ numbers [1], not natural ones. When you
go to see what is the greatest movie of all time do you look to see which one
is _first_ or which one is " _zeroth_ "? Anyone who picked the latter may have
brain damage.

[1] <http://spanish.about.com/od/spanishvocabulary/a/ordinal.htm>

~~~
Tiomaidh
Starting at 0 makes people feel leet since they can pretend they're
programming--since arrays/lists start at 0.

~~~
callmeed
Yeah, that was it ... I wanted to feel leet and impress everyone here on HN. I
am a rockstar programmer. You nailed it.

------
leif
My advice is to start simple. Simpler than you'd think at first. The point is
not to see if they can come up with something that looks good, but to see if
they can build a reasonably-sized project to absolute completion, and leave it
in a maintainable state. I would want to see something a student could leave
feeling proud having built, something for which they'd want to upload the code
to their github account and point to when interviewing later.

Therefore, I'd start with a blog platform. Doesn't need to be "full-featured"
in any sense of the term, just as long as there's a reasonable (explainable is
close enough) way for me to write posts (doesn't have to be part of the
frontend), and the frontend is usable (there should be some kind of indexed
archives). Comments would be nice, not necessary (no login system for
commenting required, saving an email or some kind of identifier for the
commenter is enough).

What's important is that the final application is robust and at least mostly
secure. It's almost impressive how few "web programmers" can't put together a
complete webapp without gaping holes (security, functionality, or otherwise).
Lots of points would be determined by maintainability of the code, that is:
was it well thought-out from the start? has the code been sufficiently
refactored instead of just copied/pasted everywhere? are templates being used
properly?

If someone implemented it cleanly without javascript (that is, when I click a
link, even though it just fetches a new static page, it "feels" ajaxy, in the
sense that large bits of UI don't change underneath). With javascript would
just be sugar on top.

Beyond this, for adventurous students or those with lots of extra time on
their hands, I'd ask for a simple facebook-style application. Something where
I can log in (remember your security, folks!), form relationships with peers,
and post some kind of content (either broadcast or directed at one user) is
enough. Here I would expect some javascript as needed to make the UI feel
snappier, though if the student could do without and still impress me, I'd be
happy. Of course, javascript is a big part of webapps, so this "bonus project"
would be a good place to demonstrate that.

Going farther, real-time chat would be my next task, but I really wouldn't
expect undergraduates to be able to bring that to fruition in a semester.

If you want to build up a portfolio, I'd go with real-time collaboration a la
Etherpad. Make it clean, and make the UI pretty. If you came to me with
something like that I could play with for half an hour without finding any
obvious bugs, I'd be extremely impressed.

------
fookyong
If I was teaching the basics of building an app, these would be some classes
I'd teach:

1) hello world using MVC

2) gobble an RSS feed and make it pretty (learn about objects / data
massaging)

3) pull data from a database and display

4) put / pull from database (CRUD)

5) some kind of basic auth

After that, a new world should have opened up. There's a lot you can do,
mashup / small app-wise with just the above skills.

I would follow it up with:

6) REST / SOAP and intro to some popular APIs e.g. Twitter / Facebook / Gmaps

7) Performance tuning / Profiling (slow query log, denormalization, caching
etc)

8) Front end stuff (jquery / ajax / visualisations, graphs etc)

~~~
Scriptor
Javascript needs a lot of attention on its own since it has different best
practices from other languages. At the same time, apps can be made more fun to
play with if you know basic DOM manipulation. It will also be necessary to
teach how to properly organize an ajax app (don't just send html or eval code,
use json and separate concerns between client and server).

~~~
InclinedPlane
Quite true. If you approach javascript with the notion that it's fundamentally
similar to C++ or Java then it will look like a crazy mutant language create
by insane sadists. If instead you approach javascript on its own terms and
understand its fundamentals and how to use it properly then you will be far
less frustrated and far more satisfied with javascript as a language.

------
stan_rogers
For curriculum purposes, I'd go social. A FB-ish app doesn't involve huge
amounts of wizardry, but it includes one of almost everything and it builds
naturally. Start with static content (landing page, T&C, privacy, etc.) to
demonstrate basic HTML document structure, CSS, and the value of server-side
includes (DRY for HTML). Progress to signup/authentiction for a quick intro to
database use and security. Build on that with user profiles, and add searching
to create friends networks. There are a number of messaging contexts (to use
FB terms, status, wall, and private messages) and response types (comments and
message threads) and read/unread item management, all of which can be
initially done with forms and server-side page refreshes. Finally, you can
enhance with client-side activity (AJAX/AJAJ). Perhaps best of all, though, an
app like that, poorly done, can lead to scalability problems even with a
couple of dozen users on the sort of machine that is likely to be pressed into
service as a server in a classroom setting (assuming, that is, that the
students have a sandboxed server they can safely break now and then).

------
japherwocky
TODO lists, or blogs are good for newbies, imo. You need to touch all the
parts of an MVC framework, but everything can be pretty basic.

------
DrJokepu
I'd make them build some sort of a web-based adventure/RPG game, for several
reasons:

First, writing games is fun. Even the most boring programming task can be
enjoyed if it's in the context of writing a game.

Second, RPG / adventure games are inherently stateful which makes using REST /
MVC non-trivial. Still, most real world applications are stateful one way or
another so it's a good way to get familiarized with these concepts (as well as
related ones such as continuations) and the underlying problems.

Third, if you allow interaction between players they can gain some familiarity
with social software.

------
buro9
Whilst I don't think this is a complete exercise, the coursework for one of my
Uni modules is online and focused heavily on cross-browser JavaScript, XML/DOM
manipulation and XSL.

[http://www.dcs.bbk.ac.uk/~ptw/teaching/IWT/coursework/cw.htm...](http://www.dcs.bbk.ac.uk/~ptw/teaching/IWT/coursework/cw.html)

It turned out that most of the class found this pretty challenging, and whilst
it didn't include server side stuff which I thought should have been covered I
also thought it wasn't a bad exercise given the time expectation associated
with it (no more than 8 hours is expected for a piece of coursework like
that).

My answer to that coursework is online still:
<http://www.dcs.bbk.ac.uk/~dkitch01/IWT/>

As to what I would teach, I would do it in this order:

1) CGI (Server side responding to requests and basic HTTP)

2) PHP (Scripting on the server)

3) Java (Compiled code on the server)

4) HTML

5) JavaScript Validation (Reading the DOM, editing existing elements)

6) JavaScript Manipulation (Writing DOM)

7) AJAX (Conversing with web services)

It should be incremental and accumulative.

------
aristus
I learned several languages from writing the same metasearch program in them.

Given a query term, execute a web search against several engines, parse the
results into one data structure, deduplicate and display.

This covers a lot of ground including regular expressions, parallelism, text
parsing, etc.

------
liedra
When I was teaching myself web programming, I wrote a blog (in PHP), then an
image gallery (in PHP), then somehow I landed a job doing PHP programming
(back around 2000ish) and wrote a bunch of sites for them. Then I decided I
hated PHP and went to Python, and that was where my fascination for static
HTML generators developed. Now my website, blog, and photo gallery are all
static HTML (apart from the ajax twitter-based comments), which I find pretty
awesome, but not really that web appy any more :)

Anyway my point is, start simple but not too simple. A challenge is good. A
blog system is a pretty good start, since it introduces the mainstays of web
programming (databases, forms, comments, etc.). Instant gratification is good.
Then let your students find something _they_ want to build.

------
geoffpado
Whatever they want. Students are creative, give them some guidelines and I bet
you'll be impressed.

------
rfolstad
Assuming these students know how to build a basic web app using a javascript
library like jQuery.

Project 1

html5 local storage /sqldb using javascript for the front end.

This is a standalone web app that supports touch interfaces and manages sql of
the students choice in the browser storage. ie.. inventory db, profile db,
tweet db something crud.

Project 2

Now build a server that supports basic user authentication and get ready to
store your data from Project 1 in a sql db.

Project 3

Build Registration/authentication into Project 1 and support online/offline
sql db w/ sync via web api

Project 4 SSL and encrypted data

------
bprater
Consider that standard CRUD-based web apps follow a pattern: add, update,
delete along with listing the data. For instance, a contact manager is a good
way to work through all those pieces. I'd recommend getting that core pattern
down before playing with extraneous stuff like image resizing or playing with
REST/APIs.

------
ks
I'm assuming that they already know how to program? Perhaps they could start
with a simple user login/registration application. One of the requirements
must be to use password hashing+salt for security. I think this is an
essential lesson that all should learn. Too many web applications store
passwords in plain text.

------
daakus
I'd split the semester into two parts -- one close to metal, something simple
like a url shortner. Then something using an existing framework to build
something more complex like a blog with an admin interface and some RSS feeds
or JSON API.

------
ashitvora
I would ask him to TRY to clone his favorite web app.

------
dmillar
Forum. You can break this into stages: Creating Posts / Categories
Authentication / Session Management Administrative access Profiles Etc.

------
honopu
super simple db app, write to the db, read it back out via query/get/request
whatever

move to comments. create a gallery, let them use a lightbox(instill in them
the idea that they don't have to do everything from scratch, and that it is in
fact stupid)

go from there.

------
fragmede
Not yet mentioned, a chat app. Heavy on the 'web app' end w/ ajax and comet
for best effect.

------
ssn
Which textbooks would you use?

------
noodle
custom blogging software. it can start simple and get really complex.

------
pinksoda
Beginner: E-mail to text message service.

Intermediate: Image host w/ resizing & cropping.

Advanced: Classfieds site that isn't vulnerable to SQL or XSS injections.
Allows image and videos to be attached to a post.

Expert - Social network w/ image/video/wall/message/friend functionality.

