search

Damitwhy / Team4-Sep2024-Hackathon

Team4-Sep2024
0 stars 3 forks source link

readme

SonataCraft

GitHub commit activity

GitHub last commit

GitHub repo size

Overview

SonataCraft is a site where you can re-live the glory days of the baroque era, by playing a digital piano with that classic piano sound. The user can also practice sheet music, with the included sheet staff that displays the played notes. A page with information about other classical instruments is also included.

This project was created as a part of the September-24 Hackathon, hosted by Code Institute.

Team members:

Mockup

screenshot

Wireframes

Home page

screenshot

Piano/play page

screenshot

User Stories

Homepage

Play Option

Learn Option

Navigation Bar

Features

Home page

Home/landing page with welcome message. Buttons with links to play the piano, or learn about classical instruments.

screenshot

Piano page

Piano page with a playable piano, that also displays chords + music staff of the played keys. Includes instructions on how to play.

screenshot

Learn page

Learn page with cards for different classical instruments. The cards flip on hover, to display informational text.

screenshot

About us page

About us page, with a card for each contributor. Includes links to github repos and LinkedIn.

screenshot

Tools & Technologies Used

Testing

For all testing, please refer to the TESTING.md file.

Known Bugs

  1. Staff Alignment

    • Staff alignment may be incorrect. Refreshing the page can temporarily fix it. For best results, use smaller screens and refresh.

  2. Mobile Touch

    • The piano isn't fully optimized for mobile. Some keys may not respond properly.

  3. Mouse Interaction

    • Holding one key while moving the mouse over another may cause the first key to stick.

  4. Sustain Pedal (Spacebar)

    • Using the spacebar to sustain notes may scroll the window on screens 1080p and below.

Deployment

The live deployed application can be found deployed on Heroku.

PostgreSQL Database

This project uses a Code Institute PostgreSQL Database.

To obtain my own Postgres Database from Code Institute, I followed these steps:

[!CAUTION]

  • PostgreSQL databases by Code Institute are only available to CI Students.
  • You must acquire your own PostgreSQL database through some other method if you plan to clone/fork this repository.
  • Code Institute students are allowed a maximum of 8 databases.
  • Databases are subject to deletion after 18 months.

WhiteNoise

This project uses Whitenoise to store static files online, due to the fact that Heroku doesn't persist this type of data.

To install whitenoise, run the pip install whitenoise command.

Edit your settings.py file and add WhiteNoise to the MIDDLEWARE list. The WhiteNoise middleware should be placed directly after the Django SecurityMiddleware (if you are using it) and before all other middleware:

MIDDLEWARE = [
    # ...
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

Cloudinary

This project uses Cloudinary for online static file storage.

To install Cloudinary, run the pip install cloudinary and pip install dj3-cloudinary-storage commands.

Edit your settings.py file and add cloudinary_storage and cloudinary to the INSTALLED_APPS list. Note that cloudinary_storage should be placed directly after the django.contrib.staticfiles.

INSTALLED_APPS = [
    # ...
    "django.contrib.staticfiles",
    "cloudinary_storage",
    # ...
    "cloudinary",
]

Generating a cloudinary environment variable

To sign up for cloudinary, visit Cloudinary.com.

Once you've created a Cloudinary account and logged-in, follow these series of steps to get your project connected.

Heroku Deployment

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.

Key Value
CLOUDINARY_URL user's own value
DATABASE_URL user's own value
DISABLE_COLLECTSTATIC 1 (this is temporary, and can be removed for the final deployment)
SECRET_KEY user's own value

Heroku needs three additional files in order to deploy properly.

You can install this project's requirements (where applicable) using:

If you have your own packages that have been installed, then the requirements file needs updated using:

The Procfile can be created with the following command:

The runtime.txt file needs to know which Python version you're using:

  1. type: python3 --version in the terminal.

  2. in the runtime.txt file, add your Python version:

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

Either:

Or:

The project should now be connected and deployed to Heroku!

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

You will need to create a new file called env.py at the root-level,

and include the same environment variables listed above from the Heroku deployment steps.

[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.

Sample env.py file:


import os

os.environ.setdefault("CLOUDINARY_URL", "user's own value")

os.environ.setdefault("DATABASE_URL", "user's own value")

os.environ.setdefault("SECRET_KEY", "user's own value")

# local environment only (do not include these in production/deployment!)

os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:

If you'd like to backup your database models, use the following command for each model you'd like to create a fixture for:

Cloning

You can clone the repository by following these steps:

  1. Go to the GitHub repository

  2. Locate the Code button above the list of files and click it

  3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard

  4. Open Git Bash or Terminal

  5. Change the current working directory to the one where you want the cloned directory

  6. In your IDE Terminal, type the following command to clone my repository:

  1. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed.

A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository.

You can fork this repository by using the following steps:

  1. Log in to GitHub and locate the GitHub Repository

  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.

  3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Local VS Deployment

There are no significant differences between local vs deployed version.

Agile Development Process

GitHub Projects served as an Agile tool for this project.

We started by coming together and creating wireframes to have an initial idea of the project. Once the ideation was complete, we divided up the tasks, and created issues for each of them. Issues were assigned, and the progress was tracked on the project board.

New issues were created and assigned as the project was progressing when new tasks arose.

Credits

Content

Media