Git Product home page Git Product logo

jetify's Introduction

Jetify ๐ŸŽต โœˆ๏ธŽ

Do you ever wish you knew what events were going on in your location, or what events were going on in a location you were travelling to? Jetify is an app that allows you to see events happening in your area or the area of your choice and creates a playlist based on those events. Checkout future events happening in your area or find out what concerts are going on, on your next vacation.

Here is a demo for Jetify: https://jetify.herokuapp.com/

Stack

  • React 16.8.6
  • React Router Dom 5.0.1
  • Rails 2.6.2
  • Bootstrap 4.3.1
  • SASS 4.12.0

Setup

  1. cd into client folder and run npm install
  2. Run bundle install in the root folder
  3. Run rake:db setup then rake:db migrate to initialize the database
  4. Run bin/rails s to start the rails back-end server
  5. In a new terminal window, run npm start to start the react front-end server
  6. Visit http://localhost:3000 to view the app (Make sure you include all the API keys in order to run the app)

API Authorization

  1. Spotify: https://developer.spotify.com/

    • Login & Create an app
    • Enter http://localhost:3000/api/logging-in
    • Save your changes
    • Copy down the client ID, and client secret
    • Create a .env file inside the client folder and save as REACT_APP_SPOTIFY_CLIENT_IDand REACT_APP_SPOTIFY_CLIENT_SECRET
  2. Google: https://console.developers.google.com/

    • Login & Create a new project
    • Set restrictions to none
    • Initialize API services for Maps Javascript API, Places API, Geocoding API and Maps Embed API
    • Add the API key to the .env as REACT_APP_GOOGLE_API_KEY
  3. TicketMaster: https://developer.ticketmaster.com/

    • Register for API key
    • Create another .env file in the root folder
    • Add the API key to the .env as TICKETMASTER_KEY
  4. Pexels: https://www.pexels.com/api

    • Request access and login
    • Get an API key
    • Add to .env file in the client folder as REACT_APP_PEXELS_API_KEY

Usage examples

Users can log in through Spotify's third party authorization to the app:

"Login Page"

A list of local events happening in users' location and playlist will get generated upon successful login:

"Main Page1"

Users can search for events happening in particular location and timeframe, then save them for future reference as well:

"Main Page2"

Users can view, play, share or delete the saved playlists:

"Main Page3"

Click the logout button to logout from the app:

"History Page"

Contributors

jetify's People

Contributors

shade-12 avatar hazthompson avatar

Watchers

James Cloos 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.