Want to learn how to get started with programming, or want to learn a new language? My tip: build a shopping list.

Why a shopping list?

When you want to learn something new, it's good to focus on the subject you want to know. A shopping list allows you to focus on just that: the project is clear-cut, which means you do not have to spend much thought on essential features.

A simple case

The simplest of shopping lists can be built without a database, as you can hardcode the list in HTML (when you're learning new front-end skills). However, if you want to up your back-end skills, that's when the application starts to shine.

Functionally, a shopping list would contain at least this:

List
 - id
 - name

ListItem
 - id
 - list_id (references List.id)
 - product_name
 - amount

Alternatively, normalized, with the product as a separate entity:

Product
 - id
 - name

List
 - id
 - name

ListItem
 - id
 - list_id (references List.id)
 - product_id (references Product.id)
 - amount

As you can see, you have a small and simple data model, which still offers a bit of practice material in terms of relationships. You can later expand the data model to add more functionality; we will get back to that.

Both data models work when you're just going to build a shopping list. I recommend using the latter data model, as it allows you to add new features later.

Getting started

There are a few things to do before you get started, most notably picking your "weapons of choice."

Think of which programming language and (optionally a) framework you want to use. Make sure to follow a framework tutorial before you start on your project. It doesn't matter which you pick because there is much overlap between languages and how you think about code.

You also need a code editor, or IDE, to write code. Pick whichever application works best for you, or try different ones. If you are using a Unix-based operating system (Linux, Mac), you'll also have access to powerful command-line tools. Windows also provides tools, but those tend to be less covered by tutorials and frameworks.

After you've set up your workspace, it's best to go ahead and build. Don't be afraid to make mistakes, as you can always throw away your database or code and start over.

More functionality

Want to expand on the shopping list? Here's some inspiration:

Build a front-end:

Build a couple of pages in which you can create lists. Add (semantically correct) HTML, apply CSS, and sprinkle some JavaScript to boot.

Add categories:

Group products by category/type/aisle and slap a label on it. Some inspiration: "Vegetables", "Dairy", "Meat", "Cleaning supplies", "Cat stuff". Add a color field while you're at it.

Add slugs:

Use name or title fields as a base to create slugs: URI-friendly versions of the field's contents. Use these in your URIs instead of IDs to make your paths just a bit nicer.

Make it an inventory list:

If your dataset contains separate ListItem and Product models, you can use those products to create an inventory list. Add a check to each product, which shows whether the product is in stock.

Add authentication:

Add authentication to protect your lists from unwanted visitors. Create a link between the models User and List (where List contains a reference to User), so each user can have their lists.

Build an API

Build an Application Programming Interface (API) to expose your data to the outside world. Not only can you use this API to separate your front-end from the back-end fully, but you can reuse the data endpoints in other applications.

Scroll to top