The reality of running an online t-shirt business- alone
The reality of running an online t-shirt business- alone

Another online t-shirt business? Not again... Knowing that the market is extremely saturated, I found a gap in pocket t-shirts market to be fun, meaningful and long-lasting. So I had a mission to collect all the happy moments using ‘pocket’ where people can always remember what truly makes them happy… because happiness doesn’t last long. Here’s a story behind Pocketi’s success and also the mental side effect that comes with it.

Living the dream

In December 2019, Pocketi was born starting out with the Guilty Pleasure Collection to collect yummy happy moments like donut, hamburger and ice cream. We had a signature Pocketi…


Following with the previous blog post on how to get the time, convert it to AEST time and using the diff to identify how many minutes left till the train comes, we want to have a count down according to the local time change so that we know when the train is coming.

I didn’t want to constantly keep calling the API since I have a limit of 60,000 hits. So we’re going to use if statement, set a constant -1 for the countdown and re-set the state every time for new countdown.

We had the countdown state that…


The API was working, the geolocation was working, the web app was outputting the data to know what stops to catch the bus from and where the stops are. Huge problem though was that I did not know when the bus will be coming? (Essentially the whole point of the app)

The app was meant to give a one click solution to inform the transport mode is coming in. The only problem was that the output of the time was in UTC.


As mentioned in my previous blog post, I managed to code the API function with all the parameters separately. In my App.js file, I would have all my API call and render.

Here is my API function

This is all the parameters from the trip API being called in const api_call = "trip" and for the parameters name_origin this is where we pass in the user’s geolocation coordinates latitude and longitude in EPSG:4326 format.

Getting user geolocation

In the previous blog, I went through how to get the user’s geolocation with Geolocation MDN function

latlng will return all the coordinates and…


I needed to get the coordinates of the user so I was recommended to use MDN Geolocation API that gets me the coordinates of where I am from my server.

It is actually very simple but I will be coding it in React.js so there’s a little change in the code from the MDN doc.

Within the Class Component write a method getGeolocation() .Within the function, we want to know if the browser supports this geolocation API or not. We are going to do that we are going to write an if state

How to return coordinates?

From the MDN doc, you can…


So I have decided to start my whole project again and fetch API with a different method async await .

The fetching part was fine but then when I reloaded, there was error that API did not show up on the console. It flashed for 1 second and then disappeared. I kept pressing the button to call the API and the whole application refreshes where the API appear and disappear within seconds.

Solution

Because I am using onSubmit() on the <form> component to fetch the API, the app will automatically reload/refresh the browser to flush all state and to submit the…


As mentioned previously, I am using 2 APIs (stop_finder & departure_mon) to fetch the data and output the train’s departure time. This would be a perfect opportunity to use departure_mon api since the return has all the upcoming departure time of a given station. However, the input that departure_mon api takes is a stop ID which unlikely, the user is not going to know what the ID of the stations are. The user will likely to type in the name of the station and expecting the output to be the departure’s time.

stop_finder allows the user to type in the…


I was getting my API working and it was displaying on my console but I now had to try and make it show on the web page instead of my console. This is done through passing props.

The way the application is set up is divided into two sections (or components)

  • Top section: search bar and button
  • Bottom section: displaying results

Both components are rendered in App.js file

Showing the destination

In App.js, I have to create a state component (Class Component) so that I am able to set the state of the destination when API is fired.

the initial state of…


API Keys are very private and should not be shared with anyone. It is a form of authentication that verifies who you are, just like your driving license, you do not want to share that with anyone.

In my React app, I have my code push to Github Repository. I’ve realised I shouldn’t push my API keys and have anyone access the keys. So how do I hide it?

Use environment variable

A variable contains name and value like var year = 2018; and this can be used anywhere in the program.

Environment variable is a variable that is set outside the program…


After getting the API keys and fetching it like normal, I kept getting Error 401: The application calling the API has not been authenticated. I thought it was authenticated because I already have the key and I didn’t quite understand why. So here is my thought process of finding out the solution.

Error 401: The application calling the API has not been authenticated.

What is Error 401?

The React App server is trying to call the API from TransportNSW website but has been unauthenticated. Even though we’ve got the API key as an authentication, TransportNSW website is a protected resource and needs authorisation.

But…

Penny Pang

Full-time UX/UI Designer, Part-time online entrepreneur, Casual food blogger and innovation advocate

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store