StaccatoSphere

• 

  StaccatoSphereGlobe

• 

  StaccatoSphereBasic

Inspiration

The inspiration for the project came from all three group member's love of music. We are all passionate about music and about the idea of creating a website that could help music industry. Our idea will help the music industry continue to thrive when it is often difficult for musical connections to form in a social or professional setting. We named the website StaccatoSphere. In music, staccato notes are marked with a dot over the notehead. This indicates detachment and separation between notes. Imagine that right now, people are staccato notes. We want to a create a "sphere" of connection that would bring people together. We thought that when you make an account, you are a staccato note. Then, you join a world of staccatos that have the potential to connect. The logo contains a staccato eighth note because when you connect eighth notes, they literally become connected. The notehead in the logo looks like a globe to represent the "sphere" of connection.

What it does

We built an application that is currently only fully connected to the client side. It contains a very basic structure of the beginning stages of the website, with a home page where a new post can be made and submitted, an empty 'about' page, and a 'posts' page. We set out with the goal of implementing a full MEAN stack (MongoDB, Express, Angular, Node.js) so that a user could make a new post and submit it. It would be saved to a database. Then, all posts in the database could be shown on the 'posts' page. This would show that the full stack was successfully set up and would be the start of a website where users could make an account and interact with other musicians online.

How we built it

We built it using the Angular framework to add HTML, CSS, and TypeScript code for the front end. We implemented Node.js middleware that handled file requests and connected to a MongoDB project. After setting up the API, we added a web request service component to Angular that used HttpClient. Our digital content coordinator helped us develop our vision with ideas for content, including logo designs, website name, and a Unity game that would allow users to view a musician's portfolio in a 3D environment.

Challenges we ran into

None of us had ever used MongoDB and two members had used Node.js in a very limited manner. The first challenge was figuring out how to set up MongoDB so that all group members could connect to the same database. Setting up the application development environment was the most difficult part. There were several errors that took time to handle and in the end, the API did not fully work perhaps due to an unhandled promise rejection error.

Accomplishments that we're proud of

We are very proud and excited about all that we managed to learn. Every group member learned about several new technologies. We feel very accomplished to have set up an API even if all the bugs are not worked out yet.

What we learned

We learned how to go about setting up a full stack, in this case, the MEAN stack. We learned how to connected to MongoDB and a Node.js server and we learned about various technologies like MongoDB Compass, Postman, and ngrok. The biggest accomplishment is having a sense of how all the parts fit together. We are excited to go forward with this project after the Hackathon.

What's next for StaccatoSphere

We will continue to develop our website and make it available to the public. This could benefit many members of the music industry and promote connection, creativity, and positivity.

Built With

• angular.js
• css
• express.js
• html
• httpclient
• javascript
• liveshare
• mongodb
• mongodbcompass
• node.js
• postman
• typescript
• visualstudiocode