Giter Club home page Giter Club logo

gruvee's Introduction

Grüvee

Let's get Grüvee with a new social, collaborative playlist for iPhone and Android

Discord members online GitHub issues PRs welcome!

Grüvee is an open source social, collabortive playlist made by the PixelogicDev Twitch Community. This project was entirely made live, on Twitch while receiving help from chat and contributing to Pull Requests here!

If you are interested in becoming a member of the team check out the PixelogicDev Twitch, the PixelogicDev Discord and contribute to this awesome project!


Getting Started

Tech Stack

Stack Tech
IDE Visual Studio Code You can use your preferred IDE but this is the one we like 🙃
Frontend React Native 0.60 Utilising Javascript to develop this cross platform mobile app
Backend Firebase (Repo) Serverless Functions in Firebase using GoLang
Design 🎨 Sketch The design files can be found here

ALL of these sections are open for contributions and are highly encouraged!

Prerequisites

In order to develop for Grüvee you are going to need to have a few things installed on your machine:

  1. Javascript

  2. iOS Development

  3. Android Development

Running Grüvee Locally

Now we are at the GOOD stuff. Time to get Grüvee running locally. Make sure you have the prerequisites installed. Open up two instances of your favorite terminal/command prompt and navigate to the root directory of the Grüvee repository for both of them. One is going to run your React Native bundle server and the other will start the Grüvee iOS or Android app.

NPM Commands

All the NPM commands and dependencies for this project can be located in the package.json file, but we only need two to get started.

  1. This npm command will download all the React Native package

    (this is only needed when cloned for the first time or if new npm packages are introduced to the package.json file)

    $ npm install
  2. This npm command will start the React Native bundle server

    $ npm start

📱 Grüvee iOS Development

If you are running Grüvee for iOS use the following commands.

Please note that the npm command utilizes an iPhone 11 Simulator.

If you do not have this installed, you will need install it or go into the package.json file and replace the ios-start script with the following:

"ios-start": "react-native run-ios --simulator=\"{WhateveriPhoneModelYouAreUsing}\",

Once thats complete run the following commands:

  1. Install cocoapods:

    $ cd ios/ && pod install
  2. Run iOS emulator

    Ensure you're in the project's root directory

    $ npm run ios-start

🤖 Grüvee Android Development

Please note that you need to start the emulator from Android Studio first before you run any commands.

For this just open up Android Studio and build the project, with an emulator set.

To note: we have been developing on a Pixel 2 emulator and a Pixel 3 physical device, but feel free to use any device you'd like! At the end of the day it will be better for testing anyways.

Setup keystore for android signing

Where $GRUVEE_PROJECT is the location of your root project.

$ cd $GRUVEE_PROJECT/android/app
$ keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -keysize 2048 -validity 10000

Add the keystore password (min 6 characters). Fill the information it requires (name, organization, country, etc), finally add the debug key password (you may use the same password as for the keystore, for development purposes).

Next we open the gradle build config (located at android/app/build.gradle) and under signingConfigs update the storePassword and keyPassword. (Note: if you changed the store filename (-keystore) and alias (-alias) you will have to update that in the build.gradle file).

signingConfigs {
    debug {
        storeFile file('debug.keystore')
        storePassword '<your-keystore-password-here>'
        keyAlias 'androiddebugkey'
        keyPassword '<your-keystore-password-here>'
    }
}

Run the dev server

Run npm run start FIRST on one terminal and then npm run android-start on another one.

$ npm run start # On a different terminal
$ npm run android-start

Congratulations! You should now see a beautiful Grüvee mobile app displayed and ready to go!

🎉 How to Contribute

🔀 Pull Requests

Now that you are up and running, it's time to push your incredible changes to the Grüvee Repo! For this we will utilize Pull Requests.

Make sure all your changes are committed to your forked version of Grüvee and go to the Grüvee repository and create a Pull Request to merge your changes into the current release branch (ie: release-1.0).

Leave a brief description of your changes, any images/videos of what your new code is doing (if applicable), and any associated GitHub issues. Get ready for some feedback and thank you for contributing!

🐛 Issues

The only way this project will keep growing and getting better is by all of us chipping in to log bugs and suggesting new features! Please utilize GitHub Issues to report any bugs or add suggestions!

Don't be scared to join the PixelogicDev discord if you need help.

One last thing to note here: if you are a first time contributor and you are not currently on the Current Contributors List, please make sure to include a change with adding yourself! The format is as follows:

[DesiredName](linkToYourSocial) - Where did you come from?

⭐Current Contributors

gruvee's People

Contributors

adilanchian avatar creativenull avatar dependabot[bot] avatar inukvt avatar isabellabrookes avatar miugel avatar

Watchers

 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.