A music sharing platform inspired by Soundcloud
Explore the docs »
View Demo
·
Report a Bug
·
Request Feature
Cloudify is a web application inspired by SoundCloud built using Python / Flask utilizing React.js/Redux architecture. Cloudify allows users to:
- Create an account / profile
- Log in / Log out
- Upload / share music
- Listen to music
- View artist profiles
- Search for artists / music
- View song pages and comment on songs
- Add a like to a song
- Javascript
- React
- Redux
- Python
- Flask
- SQLAlchemy
- PostgreSQL
- CSS
- react-responsive-carousel
The app was built using Python / Flask on the back end with a postgreSQL database. Back end structure is RESTful and all the data requests use AJAX and are fulfilled with a JSON API. Associations are used to prefetch data in order to minimize SQL queries to the database.
The front end is built completely in React / JavaScript and utilizes Redux for global state management. React's virtual DOM allows for very fast rerendering without requiring new pages to be sent from the server. Even modals appear/disappear using React rather than toggling CSS display properties.
To get a local copy up and running follow these simple steps.
Installations
-
npm
npm install npm@latest -g
-
pipenv
pipenv install
-
Clone the repository
git clone https://github.com/gch910/cloudify-aa.git
-
Install Pipenv dependencies
pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt -
Create a .env file based on the example with proper settings for your development environment
-
Setup your PostgreSQL user, password and database and make sure it matches your .env file
-
Get into your pipenv, migrate your database, seed your database, and run your flask app
pipenv shell
flask db upgrade
flask seed all
flask run
-
Install NPM packages - cd into react-app
npm install
-
While still in the react-app folder
npm start
User authentication is handled in Flask using the flask_login package. The werkzeug.security package is used for password hashing. Passwords are not saved to the database, only password hashes. When users log in, the password they provide is rehashed and checked against the original encrypted password hash to verify credentials.
The Cloudify homepage features sliding carousels of songs sorted by genre. These carousels dynamically update to include music that has been recently uploaded to the platform. All album images are active links that immediately play the song when clicked and take you to that artist's user page.
On navigation to the song page, if the specified song is not already present in the redux store, a fetch request will be made to the backend which will respond with queried results of relevent song information. This information, such as the song's artist, artist image, album art, genre, comments and likes will be rendered extremely quickly thanks to React's virtual DOM. A logged in user can interact with the song page by liking it, unliking it, adding/deleting comments and of course playing/pausing the song, with page updates happening instantly. All of the updated song data is saved to the postgreSQL database where it can be retreived later on.
Artist / User pages (they are synonymous in this app) function similarly to song pages. The data is handled the same way, but the primary focus of this page is rendering all of the songs uploaded by this user. Album art and realease date are included for each song as well as a play button that updates the state of the global playbar when clicked. The clicked song will become the new "playing" song and the playbar, which persists music playback and information through re-renders, will update to reflect the current audio. The navigation bar utilizes React state to create seemless filtering of songs based on the active link. A logged in user may click on their profile picture (a default is provided on signup) to upload a new profile image.
When a user enters something into the searchbar, a fetch request is sent to the backend where the data intensive task of querying for matching results is handled. The backend responds with results for matching songs and artists, which is then rendered on the search results page with the appropriate images/navigation links.
The music player is built with wavesurfer.js, the package handles loading music and controls related to playing the music. The music is loaded through redux state and the playing/pause buttons are also tied to the redux state so play buttons throughout the website can also manage currently played songs and play/pause status.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the GNU License. See LICENSE for more information.
Gabriel - gharris910@icloud.com \
Josh - joshua.miller2289@gmail.com
Project Link: https://cloudify-aa.herokuapp.com/