MelodyNest is a website that allows musicians to share music with other musicians. They are able to upload audio recordings of their music, information about the piece, and a copy of the sheet music. They can also write reviews on other musicians pieces and keep an up to date profile page.
Am I Responsive? was used to test how responsive the website is on different devices.
-
As the developer, I want to create a website so musicians can share their music with other musicians.
-
As the developer, I want the website to be aesthetically pleasing to those who visit the website making good use of HTML, CSS and Bootstrap.
-
As the developer, I want to website to function in the intended ways using Javascript/JQuery and Python.
-
As the developer, I want everything shared to be stored in a back end data network, in this case I will be using MongoDB
-
As the site owner, I want users to have a positive experience so that the number of users grows continually.
-
As the site owner, I want to have a pleasant experience when I add, edit and delete items that I moderate as innapropriate or no longer necessary.
This is created so users can share music they have arranged or composed, sharing the audio and the sheet music.
-
As a user, I want to be able to share the sheet music I arrange or I compose
-
As a user, I want to be able to share an audio file of the music I performed on my chosen instrument
-
As a user, I want to have a profile page where I can share information about myself in terms of music.
-
As a user, I want to write reviews about the music shared by other users
-
As a user, I want to see what others think of the music I have shared
-
As a user, I want to see an attractive website that makes me want to use it.
-
As a user, I want to see other users profile pages, and see what they have shared
-
As a user, I want to listen to other users performances
-
As a user, I want to be able to download some new music that others have shared.
After deciding on the main aims of the project, I considered the features that were realistic in the time frame of the project. I used the user stories to come up with a list of features, their importance and their viability. Anything less viable will be considered as more likely being added as a future feature (will be viewable in the features section).
| Feature | Importance | Viability | |
|---|---|---|---|
| A | Music player | 5 | 5 |
| B | Sheet music PDF sharing | 5 | 5 |
| C | Image upload | 5 | 5 |
| D | Reviewing | 3 | 4 |
| E | Profile page and updatable info | 4 | 4 |
| F | Rating system | 3 | 3 |
| --------------------------------- | |||
| Total | 25 | 26 |
The following is how the website will be structured, based on the scope of the project:
-On the Navbar the left side Navbar is for user information, such as user profile and login. The second Navbar is for navigating around the website.
-
The Navbar will have a login/register on the left hand side if user isnt logged in to the site.
- login/register sends user to a login page, with option to register underneath the login form.
- If a new user registers, after completion it will return to the login and ask the user to login for the first time
-
If the user is logged in the Navbar will say the username, which links to their profile page. It will also have a logout link next to it
- In the profile page, users can view their details and change their details.
-
the right side of the navbar will have Home, music, profiles, share, reviews and help
- home brings the user back to the home page
- music allows the user to view all the uploaded pieces of music, with the option to listen to them performed, and view the sheet music. Also the option to edit or delete ones they have uploaded, or review other users uploads.
- profiles allows the user to see all the other users and link to their profiles
- share will allow the user to upload their piece of music, including: title, artist, image, audio, genre, instrument, and sheet music pdf
- reviews will allow users to view all reviews for all pieces of music
- help has some frequently asked questions for supporting users
Click here to see the project Wireframes (added to seperate file due to size)
The project mostly follows the wireframe, however, there is a variation from the wireframe. There is now only one navbar as it looked much better as a design point than the two navbars. I also included a footer as I believed this finished the website off, and also included a copyright website name, and contact detail.
The font Arvo was used as it is a serif font. Serif fonts are known for their roman types. As music is associated with latin (as shown with terminology for dynamics), a serif font was appropriate for this project.
1 Google Font was used throughout this website:
These were used as the main colours. A more monochromic approach
- "white": "white"
- "black": "black"
- "gray": #707070,
- "gray-dark": #3f3f3f,
The red was chosen from a colour picker on the rose itself on the home page image. The other colours were chosen to compliment the selected red colour. According to this website, they are either tetradic or analogous.
Main accent colour
images created from here
Tetradic - Chosen for boldness but to compliment the red as the primary colour. Red is used for anything larger, with the smaller buttons having the tetradic colours.
#421319 433D14 14433D 141A43
Used for the play and stop button on the music player Used an icon for each item in the navbar to relate to each word. Used icons throughout the entire website for buttons Used a search icon to decorate the search music word on music.
- GIMP was used to tweak the main page image so the top was plain black so title could be added without conflicting with the words on the piano. Permissions for editing image ok as a stock image.
I used MongoDB to store the data that the website uses. I used the documentation in order to support me with the python coding.
I have cluster set up called mnCluster and inside that cluster I have a group of collections
These two are created when I the python was set up in order to send music/images/pdfs to mongoDB and they are stored within fs.files. This used the mongo.save_File code.
- fs.chunks
- fs.files
The rest I created for the databases themselves
- genres
- instruments
- music
- reviews
- users
This is a schema (created with this software) to explain how the data responds to each other.
oid = objectId
I have used GridFS in order to have images,music and pdfs saved to MongoDB. GridFS is used to allow us to save larger files in MongoDB. These files are saved in newly created folders called fs.chunks and fs.files.
Back to top
-
View shared music
- Able to see cards of different pieces of music.
- Shares Name of piece, artists name, genre of the music, instrument performed with, username, button to the sheet music pdf on a new tab, play and stop button with performance playing
-
Write a review
- Able to write a review on the piece of music shared. The button pops up on any pieces of music not created by the current user. This opens up a page for user to type what they think of the music.
-
Share pieces of music
- Page called share which allows a user to type in a title and artist of the piece of music.
- Choose a genre and instrument from the dropdown. If genre or instrument isnt there, a new one can be added
- Upload an audio file which will be playable on the piece of music card
- Upload an image/piece of artwork which will show up as the main image for that piece of musics card
- Upload sheet music which can be accessed by users clicking on the sheet music on the card. This links the uploaded music to a new page.
-
Edit and delete pieces
- If the piece of music belongs to the user, they can either delete it by clicking on the delete button.
- The users can edit the pieces by clicking on the edit button and going to a page which fills in previously filled info into the shared form page
-
Sound
- Music plays through the play bottom at the bottom of the cards. If play is clicked, it stops all music on the page and just starts that one. Stop Stops all music on the page.
-
Profile Pages
- Page full of profiles where every profile can be accessible. Shows the user names and profile images of every user
- Profile page shows the users chosen profile image. Information about themselves from inputted data on register, and an about me page that can be edited any time.
- Edit profile button which opens up a similar looking page if the profile belongs to the current user
- All pieces of music shared by that user is viewable at the bottom of this page
-
Edit profile Page
- Change profile picture
- Change about me information
- Change registration information (email, password, name, preferred instrument)
- Update changes button updates all information changed in the form
- Go back returns to the users profile page
-
5 star system where users can give a rating to the piece they review.
-
Sort feature to select reviews by piece order
-
Questions users ask will be updated by admin with a future update where the admin can add new questions and answers to the help page.
-
On the help page there is an email address for [email protected]. This is not a real email address as this is just a demo website for a Code Institute project. A future feature would be to add the chance for users to email a real address. The most likely update will be a contact page where users can send an email directly on the website that new users will be able to access as well as logged in users.
Back to top
-
HTML
- This project uses HTML to create the main functions of the website.
- HTML
-
CSS
- This project uses CSS to add styling to features. It is also used to tweak some of the bootstrap. (Sass is also used to achieve this.)
- CSS
-
Python
- This project uses Python for the main database related features. It ensures that all information shared between MongoDB and the project are accessible and respond to one another.
- Python
-
Javascript
- This project uses Javascript to create functions, rules and effects in order to make the certain features work. Features include being able to use a music player. Updating and showing dropdown menus for genre/instruments. Shrink the number of words on a review card until read more is clicked if over a certain amount.
- Javascript
-
Bootstrap
- Bootstrap is an open source library with access to reusable bits of code for html, css and javascript.
- Bootstrap
-
jQuery
- jQuery is an open source library that makes using javascript easier and quicker. It simplifies a variety of multiple lines of javascript code by putting it into a single line of jquery code.
- jQuery
-
Flask
- Flask is a micro web framework written in Python
- Uses Workzeug which is a utility library for the Python programming language
- Uses Jinja which is a template engine for the Python programming language
- Flask
-
NodeJs
- npm was installed so bootstrap was modifiable.
- NodeJs
-
Sass
Back to top
-
HTML
-
- Used the deployed website address to check every page throughout website.
- Document checking completed. No errors or warnings to show.
-
-
CSS
-
W3C CSS Validator "Congratulations! No Error Found. This document validates as CSS level 3 + SVG !"
-
All warnings relate to the bootstrap code gained from Sass.
-
-
Javascript
- JSHint javascript Validator There are no critical errors, but there are warnings for $ used in jquery. It also said there were unused variables, but its due to them being on-clicks.
-
Python
- PEP8 online "All right" No errors found.
For information on the testing, follow the link to the document here
Back to top
- Go to your Github repository and open it using GitPod index
- In the terminal run the command "pip3 freeze --local > requirements.txt" to create a .txt file with all of the dependencies for Heroku
- In the terminal run the command "echo web: python run.py > Procfile" to create a Procfile for Heroku
- Check the Procfile - remove any previous blank lines above web: python app.py
- Log in to Heroku and select "Create New App"
- Select the input field "App Name"
- Give your app a name you haven't already used
- Select the region closest to your location (ireland for me) as I am in England
- Click "Create App"
- To connect the app to your Github repository, click on the Github icon inside of the "Deployment Method" section
- Here there will be a new section called "Connect to Github" - ensure your Github profile is displayed inside it
- Insert your repo name inside the "Connect to Github" section next to where your profile is displayed
- Click on the "Search" button, once it finds your repo click the "Connect" button
- Click on the settings tab at the top of the page, and select "Reveal Config Var"
- Add the variables for IP, PORT, SECRET_KEY, MONGO_URI and MONGODB_NAME
- Return to the Gitpod IDE and make sure you have pushed the requirements.txt and Procfile
- Return to Heroku and select "Enable Automatic Deployment"
- Select your master branch under "Branch Selected"
- Click on the "Deploy Branch" - wait for the app to build
- Once the site is deployed, click "View" to launch the app
- As "Enable Automatic Deployment" has been selected, any pushes to github will be updated automatically by heroku.
- Go to the Github repository and click on the "Code" dropdown and select "download zip". This downloads a zip file with all of the files required to run the website
- Next, open VSCode and add all the files from the zip to this project by unzipping the file into documents and dragging them into VSCode
- Add a env.py file and add all the information for the IP, PORT, SECRET_KEY, MONGO_URI and MONGODB_NAME relating to the mongoDB file
- Open the command pallette and select Python: select interpereter
- Open the terminal and type in Python3 -m pip install flask
- Open the terminal and type in Python3 -m pip install flask-pymongo
- Open the terminal and type in Python3 -m pip install pymongo
- Open the terminal and type in Python3 -m pip install dnspython
- Open the terminal and type in Python3 app.py
- Follow the IP address link Running on http://0.0.0.0:5000/
- in the url, change http://0.0.0.0:5000/ to htto://127.0.0.1:5000 to open it locally
Back to top
- All written content was my own.
- Unsplash - Main home image
- pixabay - first circle image on home page
- pixabay - second circle image on home page
- pixabay - third circle image on home page
- Uploaded piano pieces were performed by myself
- Alton towers theme(hall of the mountain King) was downloaded from here
- All images used for uploading are found on google images by using images/tools/usage rights/commercial and other licenses.
- For the purpose of this project I have used sheet music that is already written and by others as the time constraints for this project dont allow time for writing my own music.
- I'd like to thank the slack community for their support, particularly the May 2020 cohort group who have given me support and suggestions.
- I'd like to thank my mentor Adeye Gbenga for his support through the project.
- I'd also like to thank my friends and family for their support, and their support with testing of the website.
- I'd particularly like to thank my parents for ensuring I had piano lessons when I was younger, as this is what gave me the inspiration for this website.