Swing & Jive Band Website (AngularJS Project)

Building my Band Site project during the Code Institute diploma was one of my earliest real experiences with JavaScript — and honestly, it wasn't smooth sailing.

I had to use AngularJS to build an interactive website for a fictitious band, which meant diving into data binding, controllers, and dynamic routing before I fully understood how JavaScript tied everything together. I broke things constantly, spent hours debugging, and had more “why isn't this working?” moments than I can count.

But struggling through that project taught me more than any tutorial ever could. It forced me to apply JavaScript in a real-world scenario, handle messy problems, and start thinking like a developer.

I remember feeling excited to piece together HTML5, CSS3, Bootstrap 5, JavaScript, and AngularJS 1.x (we ended up on version 1.8.3) into a single-page application (SPA). It originally lived in a bigger repository, but I later separated it out — you can still peek at the original commit history if you want to see the rough drafts.

At the top of the site, the navigation uses an AngularJS application with ng-route, pulling views dynamically into the main index.html using ng-view. This structure helps keep the code DRY and allows for faster, smoother transitions without reloading the whole page.

Challenges I Faced

Looking back, this project was where I really started to understand what it means to think like a developer. It wasn't just about writing code, it was about breaking things, fixing them, and figuring out why they broke in the first place.

A few stand-out struggles:

1. Getting My Head Around AngularJS Concepts

I'd barely wrapped my head around vanilla JavaScript when AngularJS came into the picture.

Suddenly, I was dealing with controllers, data binding, and dynamic routing, all while still learning how JavaScript connected everything together. It felt overwhelming at first, but working through it forced me to deeply understand the flow of data in an app.

2. Debugging "Invisible" Errors

AngularJS doesn't always throw the friendliest error messages. More than once, I'd spend hours stuck on a problem, only to realise I'd missed a single character in an ng-model directive or misconfigured a route.

This taught me the value of debugging step by step instead of randomly changing things and hoping for the best.

3. Thinking in Components

Until this project, I approached HTML, CSS, and JavaScript as separate pieces. AngularJS flipped that on its head, forcing me to think about how templates, controllers, and services all interact within a single-page application.

That shift was uncomfortable but crucial, and it changed how I approach modern frameworks today.

What I Learned

By the end of the Band Site project, I'd built more than just a website, I'd gained problem-solving habits that I still rely on:

• How to read documentation and piece together solutions.
• How to separate front-end and app logic cleanly.
• Why breaking things on purpose can be the fastest way to learn.
• The importance of version control (looking back at my commit history is like reading a diary of my mistakes and fixes).

This project set the foundation for everything I've built since, and it's why I always recommend learning by building, even if it feels uncomfortable at first.

Live Demo

I've got it deployed at band-site.gunnerjnr.uk. Click around - you'll notice it feels like a normal site even though the pages don't fully reload.

Project Description

I built the Band Site with AngularJS 1.x using ngRoute to avoid repeating chunks of markup. I remember how refreshing it felt to have one index.html and just swap out views instead of duplicating headers and footers.

Key features and thoughts:

• Navigation bar: Simple logo on the left, links on the right. I liked keeping it clean.
• Hero carousel: A Bootstrap carousel for a bit of drama - it made the site feel less static.
• Reusable templates: I was proud of keeping it DRY. It was the first time I truly understood why that matters.
• Animated social links: Just a bit of CSS fun. Hovering over them makes them slide and change colour - little touches that made me smile.

Routing and clean URLs

This part of the project drove me nuts for a while. AngularJS offers a feature for handling clean URLs, and it worked great when developing and testing locally.

The feature in question is to add $locationProvider.html5Mode(true) to your AngularJS config to enable HTML5 mode, which lets you use clean URLs without hashes. I was thrilled to use it, as it made the URLs look so much nicer and more user-friendly.

I set up my routes in app.js like this:

// define our application
angular
  .module("bandApp", ["ngRoute", "bandAppControllers", "bandAppDirectives"])
  .config(function ($routeProvider, $locationProvider) {
    // Enable html5Mode for clean URLs (works in production)
    $locationProvider.html5Mode(true);
    // route our application
    $routeProvider
      .when("/home", {
        templateUrl: "templates/home.html",
        controller: "HomeController",
      })
      .when("/meet-the-band", {
        templateUrl: "templates/meet-the-band.html",
        controller: "AudioController",
      })
      .when("/tour-info", {
        templateUrl: "templates/tour-info.html",
        controller: "TourController",
      })
      .when("/services", {
        templateUrl: "templates/services.html",
        controller: "ContactController",
      })
      .when("/searchiTunes", {
        templateUrl: "templates/search-itunes.html",
        controller: "ItunesController",
      })
      .otherwise({
        redirectTo: "/home",
      });
  });

However, when I deployed it, I hit a wall. My hosting provider didn't support rewriting unknown routes back to index.html.

I tried everything I could think of, including using a .htaccess file to redirect all requests to index.html. It worked perfectly on my local server, and I was convinced it would be fine in production. I even downgraded AngularJS briefly thinking maybe a newer version caused it.

After wasting too much time, I decided hash-based routing was fine for this project and moved on - lesson learned about server configs!

Mixed content warning

If you try the iTunes search, you'll hit a browser warning because Apple's API gives some images only over HTTP. There's no easy fix without proxying or hosting them yourself, and it was outside the scope of this project.

It's annoying, but I left it as a known issue. You can read more in the iTunes Search API documentation, specifically around the "artworkUrl60" JSON field.

Example error message:

Mixed Content: The page at 'https://band-site.gunnerjnr.uk/searchiTunes' was loaded over HTTPS, but requested an insecure image 'http://is1.mzstatic.com/image/thumb/Music5/v4/9d/6c/5b/9d6c5b3e-f7e3-e755-a2e6-d7411b4867a6/source/60x60bb.jpg'. This content should also be served over HTTPS.

Installation

After downloading the project from the repository, you will first need to navigate inside the main project's root folder. Once there, you will need to initialise NPM (Node Package Manager). You can do so by running this command:

npm init

Once you run this command, it should prompt you to enter a few details, such as name, version, description, and so on. If you don't want to enter any values, you can just keep hitting enter and it will fill them in with some default values.

Below is an example of how it might look:

{
  "name": "swing-and-jive-hive",
  "version": "1.0.0",
  "description": "This website demonstrates the technologies used throughout stream 1 for front end development",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/GunnerJnr/stream-one-final-project.git"
  },
  "keywords": ["HTML", "BOOTSTRAP", "CSS", "JS"],
  "author": "David Gunner (Jnr)",
  "license": "MIT"
}

Once this has finished it should then create a package.json file, filled with content similar to the above example.

Next we will want to install Bower, this tool will help with other libraries that we might want to use such as Bootstrap, JQuery, or AngularJS. To install it, run the following command:

npm install -g bower

We use the -g to install it globally, then we are free to use it again for other projects. This will install Bower globally on your system, allowing you to use it in any project.

Now we need to initialise it just like we did for the package.json file. This initialises a new Bower project and creates a bower.json file in the root of your project. To do this, run the following command:

bower init

Fill in the prompts or again just press enter for default values, and this should create a file named bower.json. It should be filled with content similar to the below:

{
  "name": "swing-and-jive-hive",
  "description": "This website demonstrates the technologies used throughout stream 1 for front end development",
  "main": "index.html",
  "authors": ["David Gunner (Jnr)"],
  "license": "MIT",
  "keywords": ["HTML", "BOOTSTRAP", "CSS", "JS"],
  "homepage": "https://github.com/GunnerJnr/stream-one-final-project",
  "ignore": ["**/.*", "node_modules", "bower_components", "test", "tests"],
  "dependencies": {
    "bootstrap": "^3.3.7",
    "angular": "^1.6.6",
    "angular-route": "^1.6.6"
  }
}

It is probably worth noting at this point that the command bower init does not always work on newer versions of Windows, and can be known to hang indefinitely. If this happens to you then you can simply create a new file called bower.json and fill it with the following:

{
  "name": "your-project-name"
}

Next, we need to install the dependencies that the project relies on. We will run 3 commands and install Bootstrap, Angular and Angular-route. So let's do that now:

bower install bootstrap --save
bower install angular --save
bower install angular-route --save

All that is left to do now is to get ourselves a server to run the project on locally. This will let us run the site on localhost as though it were live on the web, it is great for development.

Run this command:

npm install -g http-server

This will install the http-server globally on your system, allowing you to use it in any project. Then, all you need to do if you wish to run the server is navigate to the project root (the page that contains index.html), open your command console and type:

http-server -c-1

This will start the server and you should see something like this in your console:

Starting up http-server, serving ./
Available on:
  http://localhost:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Then we can go to something like localhost:8080 in the browser to see our project up and running. The -c-1 parameter basically says to the http-server, don't cache anything so we can always view the latest updated version of our file.

Usage

You can use this project as a template for your own AngularJS applications. Just clone the repository, install the dependencies as described above, and start building your own single-page application.

You can also use it to learn about AngularJS routing, Bootstrap components, and how to structure a front-end project with Bower and NPM.

Source Code

You can find the source code for this project on GitHub:

•   Stream One Final Project

Credits

• AngularJS - Google (now replaced by Angular)
• Bootstrap - Twitter
• Bower - Package manager for front-end libraries
• Code Institute - Front-End Development curriculum (under the Full-Stack Development program)
• Icons & imagery - Various public sources (see repo for licenses)

About the Author

David Gunner (Jnr) is an SEO executive, digital marketer, and hobbyist developer with years of experience. I even hold a Full Stack Software Development Diploma. You can learn more about my journey in this blog post and you can view my diploma certificate here.

Passionate about helping beginners learn to code and sharing practical insights, knowledge, and resources.