- Clone this repo
- Install dependecies
- Client:
cd client, npm i && npm start
- Server:
cd server, npm i && npm start
- Client:
- Add your personal API key (API list below this section)
- Navigate to the file
.env.example
in theserver
folder - Copy the content inside this file and paste it in a new named
.env
- Replace
YOUR_KEY
with your own personal key from that given API
- Navigate to the file
Hackday through the bootcamp at salt. I often come up with ideas and find new technologies or APIs I would like to experiment with and try out. In this project we only had a day to implement the application and therefor as a result I took my collected bag of ideas and experimented with them in this project, I wanted to:
APIs
- Weather API (OpenWeatherWeb API)
- Country API (RestCountries API)
- Esport API (PandaScore API)
- Connect a React frontend with a Express backend
- React Routing and clear component structuring
- Experiment with the APIs and how I would use them in individual projects further
Since part of the goal under this 24-hackday was to build a scalable product for myself which I could branch out in different paths and develop further in the future I wanted to keep it a simple MPA. The colors I chose was experimental, and I wanted to build something that had a UI one would remember, with bright and unusual colors - rather than keeping the more common simple/professional light colors theme.
The usage of APIs may cause different and unexpected loading times, and to keep the user in consideration and to make sure to respond properly, I added a CSS-loader to indicate that the user request was recieved, and to show that is being processed. See photo below.
Reasoning behind API choosing, what they do and my intention by including them.
Display weather information about the city I am living in, filtered out the results down to what I actually need when checking the forecast.
Got used to what data you may recieve through this API and also more knowledge for how to incorporate these responses as a query for a new API request (e.g. Search for Norway, use capital Oslo as city for Weather API)
A long project idea of mine where is to create a e-sport site which easily lets you customize what information you recieve as the user. During this project I am getting a match from a match in the video-game CS:GO where I wanted to show obvious information, aswell as cooler more interesting ones.