RetroReflect

Landing page for RetroReflect
Main page with the Rolodex for sentiment analysis based quotes
Profile page
Daily colour-coded mood tracker for easy viewing

Inspiration: RetroReflect was inspired by a desire to create a nostalgic yet modern digital experience, combining retro themes and aesthetics with contemporary web technologies like React and Auth0.

What it does: RetroReflect is a web application that offers a unique blend of retro aesthetics with modern functionalities, providing users with a unique and engaging digital experience. RetroReflect is a mood tracker that generates inspirational quotes from nostalgic characters and shows based on the user's mood for the day. Focused on the Rolodex as the centre piece of the web app, we also strived to fulfill RBC's challenge of putting a modern twist on retro items!

How we built it: We built RetroReflect with React for the frontend—integrating Auth0 for secure user authentication—and employed React Router for seamless navigation within the app. Sentimental analysis AI written in Node.js was used to match user input to levels of emotion, curating quotes accordingly.

Challenges we ran into: In building RetroReflect, a significant challenge we faced was integrating various APIs while maintaining the app's performance and responsiveness. As we integrated features like Auth0 for authentication and Firebase for backend services, we noticed occasional latency and complexity in data management. Balancing these powerful functionalities with a seamless user experience was critical, and it required us to optimize our code and manage state efficiently. This challenge pushed us to deepen our understanding of asynchronous operations and state management in React, leading to a more robust and efficient application.

Accomplishments that we're proud of: Successfully integrating Auth0 with React, creating a dynamic user interface that changes based on the authentication state, implementing an AI-driven backend, and maintaining a consistent retro theme are our key accomplishments.

What we learned: We learned about the intricacies of user authentication with Auth0 in a React application, how to effectively manage app routing and state changes, as well as how to integrate Node.js as a serverside backend service for the app.

What's next for RetroReflect: The next steps for RetroReflect involve enhancing user engagement with more interactive features, integrating a true backend service (hosted online 24/7), and expanding the application's functionality while maintaining the retro theme.

Each of these points captures a high-level overview of the different aspects of the RetroReflect project, reflecting the journey and future directions.