Thanks for your interest in contributing to the project. We treat issues as tasks, and we use the GitHub Project for managing our development workflow.
We stated some background of our project in the README.md file, and we hope that you understand the purpose and features from my report and my Medium article.
We used SwiftUI and we followed the MVVM design pattern a lot. You need to understand how the views, view models, and model interact before coding anything.
You may also follow the official SwiftUI Tutorial from Apple to get started with SwiftUI. They did not followed MVVM strictly but they did use the Combine framework which is quite similar to us.
To learn more about MVVM, we recommend you to read the following articles and videos which I find useful:
The iOS and iPadOS part is inside visualizer folder, while other folders is for watchOS and tests. Everthing start from the visualizerApp.swift file.
Core folder is the core of the project. Each feature is in its own folder except Components. And each folder contains a ViewModel and a View. AudioViewModel.swift inside Audio is where the main business logic is stored. And everything screen starts from the ContentView.swift file.
Models folder contains all the models, which is the model in MVVM. Audio is the important one, and we apologized for the messy variables of it.
Core/Components folder contains all the components used in the project. For reusable components, we will pass in value instead of using the @EnvironmentObject property wrapper and retreive the value from the ViewModel.
Extensions folder are some constants for Colors and Typography used in the app. They are derived from the Design System in Figma. You may find them useful while using the modifier to style your UI.
AudioData folder contains the FFT results of the audio samples. They are extracted using extract_fft_array.py and batch_process.sh. You may find the details in the SCRIPTS.md file.
AudioViewModwl is the core of handling the audio data, but it is hard to understand at the same time. We used the AudioKit framework to handle the audio data. You may find the details in the AudioKit documentation and SoundpipeAudioKit wiki.
We used the FFTTap and PitchTap, where you can see in the setupAudioEngine function. And updateAmplitudes and updatePitch are the two main functions in the DispatchQueue which you can think of these two functions are keep running.
The codebase of this project is maintained in this GitHub repository. To keep it clean for tracking changes, we adopted some ideas from AngularJS and applied them in our collaboration.
For example, doc: add contributing guide in README.md
You can find the Commit Message Format in their repository.
For branching, we followed GitHub Flow. Best practice for small team collaboration. The notion of the GitHub flow is to branch by features.
Master/main branch is only for ready production ✨.
- By issues, and try to focus only one work on one branch. For example,
feat/add-instrument-draweris a feature branch for adding the instrument drawer.
- Create a pull request on GitHub
- Link the PR to issue (if suitable) to automatically close the issue when PR is merged
- Request for reviews
- If approved, Merge the pull request
- Delete the feature branch
We use Figma to design the project. The UI design is located in the Prototype tab inside Figma, which built from the small components inside the Design System tab.
Follow the Figma file and start building the user interface. You may often find the design frame linked in the issues.
Leave an issue if you have any questions or suggestions. Remember to label the issue properly 😆.