Let's get Grüvee with a new social, collaborative playlist for iPhone and Android
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!
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!
In order to develop for Grüvee you are going to need to have a few things installed on your machine:
-
Javascript
-
iOS Development
-
Android Development
- JDK 11 or Lower (This is very important)
- Latest Version of Android Studio
- Android Emulator
- Android Build Tools 28.0.3 (Installable from Studio SDK Manager)
- Android 9 SDK (Installable from Studio SDK Manager)
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.
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.
-
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
-
This npm command will start the React Native bundle server
$ npm start
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:
-
Install cocoapods:
$ cd ios/ && pod install
-
Run iOS emulator
Ensure you're in the project's root directory
$ npm run ios-start
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.
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 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!
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!
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?
- @isabellabrookes aka rawrsatbeards - PixelogicDev Channel Moderator
- poopuhchoo - PixelogicDev Team Member
- Bastian - PixelogicDev Team Member
- DynamicDonkey - PixelogicDev Channel Member
- miugel - PixelogicDev Channel Member
- creativenobu - PixelogicDev Channel Member