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.
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.
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.
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
From the MDN doc, you can…
So I have decided to start my whole project again and fetch API with a different method
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.
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)
Both components are rendered in App.js file
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?
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.
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.
Full-time UX/UI Designer, Part-time online entrepreneur, Casual food blogger and innovation advocate