Inspiration
Inspired by "The Swift Life" app, we envisioned a project where Swifties share love for Taylor's music. Recognizing the struggle to obtain concert tickets, we aimed to include everyone in the fun. The vibrant Swiftie community, eager to share tour content, inspired this virtual scrapbook of sorts. We wanted to create a platform where all these memories are stored, fostering a collective experience for the entire fandom and beyond.
What it does
My website serves as a connecting bridge, bringing Swifties—from all over the world—together through the shared concert experience. It cultivates a sense of community and camaraderie among fans who can bond over their love for The Eras Tour. Story of Us is a one stop shop for all this Eras related (besides merch, of course).
How we built it
We built our website using the trio of HTML, CSS, and JavaScript on Repl.it. We created the website's frontend with HTML and CSS before working on the backend with Javascript to give us a better idea on how we wanted the website to function. Our team, divided into different roles, collaborated seamlessly—those in the backend assisted with frontend challenges whenever needed and vice versa.
Challenges we ran into
Our journey presented its fair share of challenges that spurred growth and problem-solving. Crafting an idea that struck the right balance between broad appeal and avoiding excessive niche focus posed an initial challenge, requiring thoughtful consideration to ensure the project resonated with a diverse audience beyond UVA's specific locality. The implementation of the API weather map introduced a technical hurdle as we navigated the intricacies of integrating it into the website using JavaScript. None of us have ever used Javascript in such a manner, so a lot of research and testing had to be done. Additionally, linking HTML files outside a folder, particularly when these files were not intended to be part of the main website structure, presented a unique obstacle. Navigating this challenge demanded creative problem-solving and a deep dive into understanding how to connect pages.
Accomplishments that we're proud of
We am proud of several key accomplishments achieved in the development of our website. First and foremost, completing the foundational aspects before the deadline underscored our team's efficiency and dedication. The visually striking and nostalgic video background and the dynamic gradient effect on the homepage added an engaging aesthetic layer to the platform. Linking HTML files with minimal reliance on JavaScript gave us the ability to offer a user-friendly and seamlessly navigable experience. Furthermore, the successful integration of the API weather map not only expanded the website's functionality but also contributed to its interactivity and informativeness.
What we learned
Throughout the development process, we acquired a wealth of knowledge and skills for future projects to come. Becoming more fluent in CSS, we implemented features like video backgrounds and dynamic gradients on button hover. Creating a functional gallery involved learning JavaScript for seamless navigation between pictures and key points. Integrating an API into the website marked a significant milestone in expanding our technical capabilities in using outside sources, which constantly update. Additionally, we gained learned how to linking two HTML files efficiently using minimal JavaScript, streamlining the user experience.
What's next for The Story of Us
In our future plans, we aim to enhance user experience by implementing an automatic content upload feature for a user's chosen shows. A user login interface is also on the drawing board, enabling more personalized activities such as digital friendship bracelet creation and trading. Additionally, we plan to introduce a hover pop-up in the gallery, providing details (i.e. city name) about each picture's corresponding tour stop. Furthermore, we'll make the points on the API weather map clickable, fostering more interactive and engaging exploration for our users.
Log in or sign up for Devpost to join the conversation.