Nostalgio is an app that captures your listening and travel habits to make your travel and music experiences memorable. By linking to your Spotify account, it uses your listening patterns and data on what others have listened to at the same location to predict and recommend music you might enjoy. Nostalgio enhances your daily life and travel experiences by creating a musical map of your journeys, turning ordinary moments into memorable ones with personalized, location-specific music.
- User account with user authentication
- Memory saving (Allows users to save a list of songs attributed to a location)
- Memory map visualization (A map that depicts locations traveled and its associated memories & songs over time)
- Spotify integration to create playlists from these memories
- Music suggestion based off of travel & listening habits
- Track and display songs listened to by friends on map.
- Stats on profile page
- Audio recognition: recognizes songs in the area and adds it to your memories for that location.
- Augmented Reality (AR) integration (AR trails that guide users through a city or location with music suggestions popping up at different spots. As users walk along the trail, they can experience the music history associated with each landmark.)
- Social aspect: can comment and interact with other users (see their memory map, react to what they're listening to)
- Community Feed
Week 1: Setup ⚓
- General:
- Assign roles for front-end and back-end development.
- Discuss overall project scope, tech stack/options (React Native for frontend, AWS for backend)
- Schedule meetings for weekly meetings
- Start Low fidelity with everyone to get a vision of the app
- Frontend:
- Start working on figma and be ready to show progress dev night
- Learn React Native/Flutter and decide which you wanna work with
- Backend:
- Research AWS and begin setting up your environment (AWS EC2, S3).
- Start exploring database frameworks (e.g., MongoDB, DynamoDB).
- Explore Spotify API
Week 2: Getting Started 🏃
- Frontend:
- Figma design complete
- Basic Routing: Implement initial routing in React Native to connect key screens.
- Backend:
- Continue researching the AWS tech stack
- Database Schema: Design the DynamoDB schema to store user data, memories, and listening history.
- Mapbox Integration: Begin researching how to integrate Mapbox into the app for location tracking.
- Begin brainstorming and researching the music suggestion algorithm based on location and listening habits.
Week 3/4: Implementation 🤓
- General:
- Team Sync: Regular check-ins to address any blockers, especially since the team is new to the tech stack.
- Frontend:
- Core Pages: Begin coding key components such as the Memory Input Page, Map Visualization Page, and Music Suggestion Page.
- Mapbox Integration: Start integrating Mapbox into the frontend to display user locations and memory markers.
- Backend:
- Database Setup: Implement the DynamoDB schema, focusing on saving and retrieving user memories and listening data.
- Spotify API Integration: Set up initial connections to the Spotify API to fetch user listening data.
- Mapbox API: Set up backend logic to handle location data and pass it to the frontend.
Week 5/6: Key Features + Enhancements 🎵📊
- General:
- Midway Review: Review progress, adjust goals if necessary, and ensure both frontend and backend are on track for integration.
- Frontend:
- Memory Visualization: Enhance map visualization with memory markers, user journeys, and interaction features (comments, reactions).
- Popular Songs Display: Implement UI to display popular songs and genres at specific locations.
- Backend:
- Memory Logic: Finalize backend logic for saving and retrieving memories and associated music.
- Real-Time Updates: Implement real-time updates for what other users have listened to at certain locations.
- Music Suggestion Algorithm: Start developing the core algorithm for music suggestions based on user data and location.
Week 7/8: Integration & UI Enhancements 🎵🏁
- General:
- Presentation Prep: Start preparing the presentation and demo, focusing on the key features and how they work together.
- Work on stretch goals if possible
- Frontend:
- UI Enhancements: Polish the UI and ensure smooth navigation between different pages.
- Integration Testing: Begin testing the integration between frontend and backend, especially for features like memory saving, map visualization, and music suggestions.
- Backend:
- Final Integration: Complete the integration of all APIs (Spotify, Mapbox) and ensure the backend is fully functional.
- User Authentication: Finalize the user authentication flow and connect it with the database.
Week 9/10: Final Touches & Presentation Prep 💪📢
- General:
- Bug Fixes & Polish: Address any bugs, finalize UI/UX, and ensure the app is stable and ready for presentation.
- Final Testing: Conduct thorough testing of all features, focusing on user journeys and the core algorithm.
- Presentation: Prepare slides, script, and rehearse the demo. Ensure everyone is confident with their part of the presentation.
- Wireframing: Figma
- IDE: VSC
- Frontend: React Native with MapBox Gl
- React Native is a cross compatible framework that paired with expo allows you to bring your apps to life while in development phases
- Material UI or Bootstrap / CSS Tailwind
- MapBox is a community-maintained React Native library that provides reusable JavaScript components for integrating Mapbox maps into iOS and Android apps.
- Backend: AWS Lambda, DynamoDB & S3 Or Firebase/Firestore, Express & Node, Spotify API, MapBox API
- AWS Lambda is a compute service that runs your code in response to events and automatically manages the compute resources
- DynamoDB and S3 continue with the fully AWS approach however, Firebase/Firestore work great as needed
- By using Express and Node.js, you can effectively manage the backend of your mobile app, providing a robust API that interacts with your frontend mobile application
- User Authentication: Auth0
General
Front-end
- Introduction to Wireframing in Figma
- React Native Crash Course
- 27 Best UI/UX Practices
- MapBox Tutorial
- Building Maps in React Native
Back-end
- Node.js Crash Course
- Express & Node Intro
- DynamoDB & React Native
- AWS Lambda & React Native
- AWS S3 & React Native
- Firebase / React Native Authentication Tutorial
| Command | What it does |
|---|---|
| git branch | lists all the branches |
| git branch "branch name" | makes a new branch |
| git checkout "branch name" | switches to speicified branch |
| git checkout -b "branch name" | combines the previous 2 commands |
| git add . | finds all changed files |
| git commit -m "Testing123" | commit with a message |
| git push origin "branch" | push to branch |
| git pull origin "branch" | pull updates from a specific branch |
- Spotify - even though they have recommended playlists, they not location based and don't have a feature to save these memories onto a map
- Shazam - Shazam identifies songs based on audio samples and offers a way to discover new music. It also has some location-based features that show popular songs in specific areas. But it does not have the memory map
- Implementing real-time updates (e.g., live location tracking, real-time music recommendations) can be complex
- Start with basic real-time features and add more complexity as needed
- Integrating multiple APIs
- Take time to understand how Mapbox & Spotify API works, especially first 2 weeks
Developers ⭐:
- Sai Chauhan
- Izma Khurram
- Andres Garcia Sanchez
- Shivansh Vaidhyanathan
- Sanjita Medishetty
Project Manager 🤺: Shraddha Subash
Industry Mentor 👔: Erik Rodriguez