Overview

Verge transforms music sharing by allowing friends to collaboratively craft real-time, passcode-protected playlists, ensuring every moment has the perfect soundtrack.

Verge was a project my team and I developed during a two-semester Capstone course at Georgia State University. By the end of Spring 2023, we had built a fully-fledged web app, encompassing UX/UI Design, and Front-End & Back-End development.

Highlights

We showcased Verge at Georgia State University's CS & SE Showcase in 2022 and 2023, presenting to representatives from renowned companies like Google, Meta, and Workday.

Create a web app that allows participants to add to a shared playlist. The web app should include:

• Individual playlists should be protected by a passcode.
• Playlist owners should be able to veto or remove added songs.
• The web app should use Spotify or similar API.
• Live playback should adjust to include requested songs.

Unlock the perfect soundtrack for any moment.
‍Whether you're a professional playlist curator or just someone who enjoys good tunes, Verge lets everyone play a part in the mix. Our platform is designed to make collaboration seamless and enjoyable, so you can focus on creating amazing playlists.

Drawing inspiration from DJ apps, social platforms, and video games, I shaped Verge's vibrant design. Starting with basic wireframes, I refined them into the final mockups that steered our development process. These mockups served as our coding blueprint, ensuring alignment between design and implementation.

Here are the basic wireframes I started with. Before diving into the final mockups, I sketched these out to get my ideas down. It's all part of my process, turning rough drafts into the polished designs which are shown next.

These are the mockups that guided our app's development. Throughout the creation process, our entire team continuously referenced these designs, ensuring that each line of code and interface element stayed true to the envisioned blueprint as much as we possibly could. By continually aligning with these mockups, we collaborated to transform the initial design into the final product.

During the design phase, I crafted a concise prototype to give a clearer picture of our end goal and to communicate it effectively to my team. This prototype highlights the key frames, serving as a roadmap that, along with other materials, steered us through the coding process.

Our specifications document includes our purpose, intended audience, required features, and technical design of Verge. It contains eight functional requirements (user stories) with their acceptance criteria. This specifications document for Verge describes the features of the system we are building.

This roadmap is a high-level overview of the plans and objectives for developing our project, Verge. This roadmap includes what will be built and when in the course of completing our project in the second semester. It is a task list for each work item, who will own it, what priority it has, and how long it is expected to take.

Throughout the project, our bi-weekly stand-ups and GitHub's Kanban board for task tracking ensured team alignment and clarity. My role primarily encompassed design and front-end development, enhancing Verge's interactivity and user-friendliness.

My responsibilities included:

Beyond static design tasks, I ensured the functionality of each element, from button redirections to playlist feature integration, contributing to a seamless and interactive platform.

Our journey with Verge was filled with challenges that sparked our innovation. We faced issues like:

Looking back, these weren’t just hurdles, but valuable learning experiences. They honed our adaptability, determination, and balancing skills, leading to a product we are proud of and a profound software development understanding.

In creating Verge, we met some technical challenges requiring innovative answers. We've made a presentation to share our experiences, insights, and adopted methods, covering Verge's key technical aspects. It provides a deep dive into our problem-solving approach, faced technical issues, and the technology behind our solutions.

Verge was created with the vision to transform the way friends share and collaborate on music. By facilitating real-time, passcode-protected playlists, we set out to ensure every cherished moment is paired with the perfect soundtrack. Our journey led us to craft a platform that not only exemplified seamless collaboration but also amplified the joy of shared musical experiences.

Verge was presented at Georgia State University's Computer Science & Software Engineering Showcase in 2022 and 2023, where my team and I presented to representatives at companies like Google, Meta, Workday, and others. The Showcase event allowed Computer Science students to present and demonstrate their latest projects. Click the buttons below to see more of the experience!

Verge, my most ambitious project so far, was an enlightening journey that emphasized the deep connection between design and code. It led me through the intricacies of web development, blending aesthetics with functionality, and allowing me to transform a concept into a digital experience. This venture not only boosted my technical skills, but also highlighted the priceless effect of shared musical moments, showing the amplified human connection when creativity and technology harmonize.