Building an APP using JSON Data

So over the past month at work I've been building out a nativescript app for my company to be used for captains. In doing so I have kind of enjoyed the aspect of a cross platform mobile development. After some mild updates and misc changes we are already on version 1.2.0.1, and plan on submitting to both google and apple as early as Monday. I'm sure we'll need to make a few changes afterwards but for now I am extremely happy at where the app is and my progress that I've made on my nativescript journey. I decided to take my new found "love" of mobile development and build an app as a side project. One thing that I am extremely passionate about is live music. I love attending concerts and music festivals and just seeing people play music.

Obviously this past year has more or less put a halt to all of that and living here in the wild west of Florida, I still am super careful as to going out places because well people here are just batshit crazy. One of my favorite places on this planet is the Spirt of the Suwannee Music Park and they hold a plethora of music festivals each year. I'm planning on attending Hulaween at the end of October. The festival / production company always puts on their own app but it uses data / cellular to load and out in the woods with thirty five thousand people the service is shit, so I thought to myself how could I improve on this?

Well I obviously cannot build cell towers so my solutions is to build my own personal app where all of the relevant data is stored on the phone / in the app itself. The easiest way to do this (in my opinion) would be to store everything in JSON files. The app requires super basic functionality, a Lineup with a scroll view of artists, that clicking on them navigates to a little bio about themselves and their schedule. The ability to add / remove an artists from "favorites". A schedule page that can switch between days, one for workshops as well, and then some basic info (park maps, venue info, etc....).

Based on my previous project I did decide to install Vuex just grab data between views I think it's more efficient. I also am using Vuex to store data on the phone's local storage, and this would be the users favorite artists. But I obviously don't want to store the entire artist data I just want to store an array of ID's so I can match them on different views. The only real problem with that is that storing data on nativescript cores ApplicationSettings only allows booleans, strings, and integers. I'm hoping you can see where I'm going here, and it is JSON.stringify([]). So I'll store the favorites IDs on local storage and since there are only 84 bands the max number is under 200 character string (with commas, brackets, yada yada yada).

So I created two .json files in the app folder, one for artists and the other for workshops, but again I am 100% relying on the festival to produce schedules in a reasonable period of time or this app will never make the light of day, well not true I could still load it in test flight and mass send out emails but yea you get the idea. To give you an idea of my json structure here you go:

{
  "artists": [{
    "id": 1,
    "name": "THE STRING CHEESE INCIDENT",
    "slug": "the_string_cheese_incident",
    "about": "",
    "tier": "Headliners",
    "favorite": false,
    "image_url": "~/images/the_string_cheese_incident.png",
    "schedule": [{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    },{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    },{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    },{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    },{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    },{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    },{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    }]
  },
  {
    "id": 2,
    "name": "SKRILLEX",
    "slug": "skrillex",
    "about": "",
    "tier": "Headliners",
    "favorite": false,
    "image_url": "~/images/skrillex.png",
    "schedule": [{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    }]
  },
  {
    "id": 3,
    "name": "MY MORNING JACKET",
    "slug": "my_morning_jacket",
    "about": "",
    "tier": "Headliners",
    "favorite": false,
    "image_url": "~/images/my_morning_jacket.png",
    "schedule": [{
      "date": "TBA",
      "day": "TBA",
      "time": "TBA",
      "start": "TBA",
      "end": "TBA",
      "stage": "TBA"
    }]
  }
]}

I have a name / slug (which I think I'll remove since I added ID), tier, about/bio, favorite (all set to false), image, and a schedule array (some artists play multiple days). Basically when I call Vuex to get the artists I'll grab favorites out of local storage and change the appropriate ones to true based on IDs stored.

And for workshops:

{"workshops": [{
  "name": "TBA",
  "location": "TBA",
  "day": "TBA",
  "date": "TBA",
  "time": "TBA"
},{
  "name": "TBA",
  "location": "TBA",
  "day": "TBA",
  "date": "TBA",
  "time": "TBA"
},{
  "name": "TBA",
  "location": "TBA",
  "day": "TBA",
  "date": "TBA",
  "time": "TBA"
},{
  "name": "TBA",
  "location": "TBA",
  "day": "TBA",
  "date": "TBA",
  "time": "TBA"
}]
}

very similar setup and I'll be using day (thursday/friday/saturday/sunday) to do all the filtering. Reason why date is there too is just 10/29 10/30 just look good and it makes me look like a better programmer than I actually am lol.

So in the Lineup Vue I wanna grab all the artists so I import the JSON file import Artists from "../../artists.json"; Then I set a data property to that and a computed property to actually display the results (since I have filtering options, tiers (headliners / tier 1 / tier 2 / tier 3 / tier 4).

    data() {
      return {
        artists: Artists.artists,
        selectedTier: 'All'
      }
    },

And my computed property:

    computed: {
      filteredArtists() {
        return this.selectedTier == 'All' ? this.artists : this.artists.filter(artist => {
          return artist.tier == this.selectedTier;
        });
      }
    },

Then the big thing to notice on this Vue is that I had a method to add / remove from favorites and I'll go through that

      addOrRemoveFavorite(id) {
        let artist = this.artists.find(artist => {
          return artist.id == id;
        });
        if(artist.favorite) {
          this.$store.dispatch('removeFromFavorites', id);
          artist.favorite = !artist.favorite;
        } else {
          this.$store.dispatch('addToFavorites', id);
          artist.favorite = !artist.favorite;
        }
      },

pretty simple logic here but if it's false, set to true and vice versa and dispatch a Vuex Action. At this point you might be wondering how everything stays coordinated since I'm not grabbing artists from states. Well when the app itself is loaded I do dispatch another vuex action to setArtists and this is where i loop through local storage to set favorites.

This is a super basic overview of storing data and using it on a local app. I'm compressing all images and bios I'm trying to keep somewhat short so this app all said and done I'm guessing will be bundled to 25mb or so, which honestly I don't think is a super huge foot print. Oddly enough from my years spending time at the park and getting to know people I've shown my idea to someone high enough up in the production and he loves it. He's not mad about it (I have some anxiety lol) and who knows if the park / company like my idea / app maybe in the future I can get paid a couple of dollars to build one.