Week 4/18 – 4/24 Starting Point Link to heading

I have been sleeping on my couch for about a week now, kinda of lost the sense of what a bed is. Ironically, I was trying to sleep in my bed, I couldn’t sleep, kept dreaming about someone cutting someone’s head off…but I don’t have nightmares when I sleep on my couch.

I have always wanted to start with coding on something, but I always got pushed back by myself, I was worried that the idea I had is not good enough, or maybe someone is already doing it and doing it better, or I don’t think it is interesting enough. Then I just said “screw it”, let’s just start on something.

I am planning on moving from Pittsburgh to California, and just somewhere in California at this point. I may drive there, if I were to drive there, I will stops on the way, and I can mark where I have been on the map, which will show the route I took, this will be a great way to journal my trip, I didn’t do that the last time I drove with my mom, we had a blast, I am sure will document it this time for sure. I know there are apps out there that perform this function, however, I want it to do what I want, and here is how I am going to make it happen.

I just stopped myself and say, I am going to STOP feeling insecure and just start something to see if I can still do this. Here it goes. I am using vue, the last time I used vue, it was about 2 years ago, so everything I know about it gets rusty. Since we are “traveling”, we definitely need a map. For that perspective, I choose to use Mapbox. It is only because I used that before.

Stack at the moment: Vue JS + Mapbox JS

For a quick and dirty view of things, I used the simple html one page web to show what I want this thing to look like, that took me about couple hours. basically, it is an interactive map where you can zoom into your own location, that’s the first step. Starting small, then expand to where you want to be.

Then the first step is to make the map work with vue stack, that took me a while to figure it out…

The first thing everyone would do is trying to use the existing stack, but nothing worked for me… after stared at tons of red error messages and still none of the map was showing up, I hated it, it felt like I wouldn’t be able to do this. It sucks. Then I did more digging, meaning, more googling, everything can be resolved if you are doing enough googling, unless you have a question about death; there is no answer there…story for another time. Then I stumped upon this doc: Leaflet vector maps sample . Well, of course, you always go back to the source. Mapbox is built using leaflet, so you go back to the original source to integrate. That doc helped me to figure everything out. I did something similar. Instead of using “maplibre-gl”, we are using “mapbox-gl” instead.

Install mapbox-gl

npm i mapbox-gl

You can use mapbox-gl by doing the following:

import mapboxgl from "mapbox-gl";

Now I have the map!!! What’s next????

Locally, it works, so now I need to make it work on the web so that other people can see it too. For that, I picked Heroku. I thought about AWS, but AWS only gives you 1 year free, I did sign up for Amplify though, so react is definitely on my mind, again, story for another time. Heroku, where do I start? The most frustrating thing I have encountered by far. Please don’t get me wrong, I love heroku, it is free, and great for a quick demo or POC, but making it work takes some time, the error message doesn’t explain a whole a lot, and finding out what to do to fix those is like haunting the something but you don’t know what you are haunting for. I learned a lot during this process though. The correct way of making the hosting work is doing the following:

  1. make sure that you don’t have vue.config.js file to configure a port you desired, Heroku has their own designated ports they use, if you set a port on your own, Heroku may not be able recognize it, thus it will result in “App crushed”
  2. make sure to set your env variable in Heroku settings
  3. make a build of your web app
  4. only host your post-build files on there
  5. create a Procfile for Heroku, it needs to be serve -s , this commend can start
  6. follow heroku doc carefully, and also pay close attention to your folder structure to make sure that you are in the right folder to upload
  7. Log into Heroku console to see more logs and install proper packages if missing, and you can double check if everything installed correctly, the logs are on the Heroku server
  8. Helpful heroku commend :
heroku restart //use it to restart your server

heroku local //test your code locally

heroku open //open the production web page

heroku init

heroku git:remote -a <your app name>

git pull heroku master

There you have it!

Heroku App

When you launch to the page above, you will see a red marker on the map, click on it to expand with more information for each marker.

P.S.

I am watching Cody Ko’s “The Most Insane House Tour” while typing this, and the guy in the video, the developer of the house, he is all over the place, which got me thinking, when you do something or design something, focus on one function at a time, if it gets too much, too quick, too busy, you will lost the users. See, you can learn something from everything.

Now what’s the next step? We have a map, and for me, I can find where I am, for a user, it would be fun to create the front-end. Functions should be as following:

  1. As a user, when I get to this webpage, I should fly in to the current location where shirls is (point 1)
  2. As a user, when I get to this webpage and I click on the pin, I should see the notes about the location that’s pinned
  3. As a user, when I get to this webpage, there will be a button “how far I am”, to calculate your current location to the last location I marked –> last to do (point 3)–> this is stupid, not going to do this

Day: 4/25 Link to heading

To be honest, once the basis above is setup, everything later on comes a little easier.

Adding the following functions:

  • add icons based on geolocation data
  • add marker and show the long and lat where the marker is at –> only for admin purposes
  • I cannot make fly in work… driving me crazy

Notes:

  • point 1 above has changed -> As a user, when I get to this webpage, I should see the places I have been to with the red mark on top, when click on the marker, you can see a description and a picture if possible, the marker should also contain a date

  • removing point 3

  • All the functions mentioned above is pretty much done, but I am thinking about new functions:

    • Add where I am from, and when someone searches for that, it will bring them to my hometown!!! I will give them a description

  • May need improvements on maps

What did I learn:

  • vectornator can edit svg files and make icons!!! YAY!!!
  • map components should stay together
  • vue is great if you want to do something quick and dirty, and it is easy to learn, but when it gets complicated, it may not be able to do it, you would be better off to use React if it is complicated logics
  • You need to draw the map pretty much in order to set up the layers in mapbox, how each items are represented, etc

I have to stop thinking about this, the more I think about it, the more ideas I have…. I don’t like this

Ideas:

  • Admin page: enter descriptions, or pictures
    • zoom in to where I currently am
    • then drop a pin
    • use popup to add in information
    • save to a json file or database??? still thinking what to do with this one, refer to food for thought
  • Limit drop a pin function to only can drop 1 pin –> already done
  • Have a list of buttons or menus to list out actions of what users/visitors can do
    • Origin
    • Last Destination
  • Add in descriptions for users –> most important!!! A welcome page explain what this is and what they can do there

Food for thought: currently doesn’t have a database attached, do I need a database?

Will add on if there are more changes. Not sure if I will want to continue working on this. I really need to get out more.

Day 4/26 Official Launch Announced on 4/27 Link to heading

So this is the day! I launched it. Well, I don’t think anyone will pay attention to this. However, I am sure excited.