Giter VIP home page Giter VIP logo

hackday's Introduction

Hackathon - One Day Project

Test Locally

  • Clone this repo
  • Install dependecies
    • Client: cd client, npm i && npm start
    • Server: cd server, npm i && npm start
  • Add your personal API key (API list below this section)
    • Navigate to the file .env.example in the server 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

Article

Contents

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:

Tech Usage and Reasoning

APIs

  • Weather API (OpenWeatherWeb API)
  • Country API (RestCountries API)
  • Esport API (PandaScore API)

Challenges Faced

  • 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

Design

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.

Illustrations of Design

Full Description

Reasoning behind API choosing, what they do and my intention by including them.

Weather API

Display weather information about the city I am living in, filtered out the results down to what I actually need when checking the forecast.

Country API

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)

E-sport 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.

Contact

Get in touch with me:

codeSTACKr | LinkedIn codeSTACKr.com gmail

hackday's People

Contributors

bragerosberg avatar dependabot[bot] avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.