FeelRewind

• 

  Nostalgia powered by mood.

🎯Inspiration

We often find ourselves reminiscing about the good old days—whether it's iconic songs from childhood, historical events, or the people who defined our culture. FeelRewind was inspired by the idea of combining nostalgia with interactivity, creating a digital time capsule that lets users relive the essence of different decades through music, stories, and cultural icons.

🎧What it does

FeelRewind is a retro-themed web app that lets users:

Select a decade from the 1960s to 2010s.

Listen to iconic Bollywood songs from that era.

View the corresponding song thumbnail, track title, and audio player.

Discover a fun historical fact and a major news headline from that decade.

Learn about an influential figure from that time, complete with image and description.

🔧 How we built it

Frontend: Built in HTML, CSS, and vanilla JavaScript, featuring a beautiful animated welcome screen, decade selection, thumbnail previews, and a sleek audio player.

Backend: Developed in C++ using the cpp-httplib HTTP server and nlohmann::json library to serve decade-based content.

Data (song info, thumbnails, fun facts, news, and personalities) is statically mapped in C++ and returned as JSON.

The frontend dynamically fetches the content from the backend via POST requests to /generate with the selected decade.

🚧 Challenges we ran into

Integrating a C++ backend with a modern frontend required careful handling of CORS and JSON parsing.

Coordinating static media paths (audio files, thumbnails, and images) between the client and server.

Designing a responsive UI that works seamlessly with dynamic data while maintaining a retro aesthetic.

Debugging asynchronous behavior between music playback and thumbnail loading.

🏆 Accomplishments that we're proud of

Building a fully functional cross-stack project combining C++ backend logic with a JavaScript-based frontend.

Creating an intuitive and aesthetically pleasing user experience.

Implementing features like auto-play with next song, dynamic image updates, and rich cultural metadata delivery.

Developing the backend from scratch in C++ with no frameworks, using only httplib and json.

📚 What we learned

How to build and host an API server using C++.

Handling JSON data flow between frontend and backend with precision.

The importance of UX/UI design in engaging users emotionally, especially with nostalgic content.

Managing asynchronous JavaScript functions for real-time media interaction.

🚀 What's next for FeelRewind

🎬 YouTube API integration to fetch live thumbnails and videos.

📝 User personalization: Save favorite decades or tracks.

📱 Mobile-first responsive design improvements.

🔍 Searchable archives for events, songs, or personalities.

🌐 Hosting the backend as a cloud API for better scalability and sharing.

Built With

• c++
• css
• html5
• javascript