[FreeForAll] RaceSG

Inspiration

RaceSG is inspired by the desire to offer a unique and captivating way for people to explore the wonders of Singapore. It aims to combine the thrill of racing with the excitement of geocaching, creating an extraordinary adventure that allows users to uncover the cultural gems, breathtaking sights, and captivating stories of the vibrant city-state. Whether you're a local or a tourist, RaceSG provides an unforgettable journey and a new perspective on how to explore Singapore.

What it does

RaceSG is an exhilarating race-meets-geocaching app designed to unlock the hidden wonders of Singapore. The app offers the following features:

1. Explore Captivating Locations

Users can browse through a meticulously curated list of Singapore's most intriguing locations on the user-friendly RaceSG website. Each location holds secrets waiting to be discovered. When users venture into the heart of each place, they will find a QR code that acts as a gateway to a world of exciting challenges and fascinating trivia.

2. Seamless Authentication with sgID

RaceSG prioritizes user convenience and security by integrating with sgID, a Singapore government identity provider. Local users can easily authenticate themselves and share government-verified data through the Singpass mobile app. The sgID integration ensures a trusted and reliable verification process, enhancing the user experience and providing a seamless onboarding journey. By connecting to sgID, RaceSG can access essential user information, such as full names, to provide a personalized and tailored experience. The sgID authentication is free for users and creates a secure and trusted environment for all RaceSG adventurers.

3. Sustainable Adventure

RaceSG promotes sustainability by utilizing reusable QR codes during the adventures. Users can scan these codes to unlock thrilling challenges that deepen their connection to the heritage and beauty of each location. Whether capturing the perfect moment with the surroundings or testing knowledge with intriguing trivia, users can enjoy eco-friendly practices while exploring Singapore.

4. Amazing Races

RaceSG allows local users to create their own extraordinary adventures through the Amazing Races feature. Users can curate and design timed events where participants must navigate a series of special stations in sequential order. These races fuel users' competitive spirit as they aim to emerge victorious and claim exceptional prizes.

5. Earn Rewards

Users who conquer each location and complete challenges earn points reflecting their performance and dedication. These valuable points can be exchanged for exclusive rewards sponsored by the Singapore government, such as free entry to renowned attractions like the Science Center or National Gallery Singapore. RaceSG rewards users beyond imagination, making the exploration of Singapore even more exciting and rewarding.

What we aimed to achieve with this

• Boost Tourism: RaceSG aims to attract more tourists to Singapore by providing an innovative and an interactive way to explore the city-state's landmarks, hidden gems, and cultural sites. The application's gamified approach and rewards system incentivize visitors to immerse themselves in the local experience.

• Promote Sustainable Practices: The app promotes sustainable practices by reducing paper waste through the use of reusable QR codes. It aims to raise awareness about environmental conservation and encourage users to adopt more eco-friendly behaviours.

• Support Rediscover Singapore Initiative: RaceSG aligns with the Singapore government's Rediscover Singapore initiative by partnering with them to offer rewards and incentives. The app aims to support the government's efforts in revitalizing the tourism sector and encouraging locals to explore their own cities.

• Foster Community Participation: RaceSG encourages community participation through user-generated Amazing Races. By involving locals in the creation and participation of these events, the app aims to foster a sense of pride, belonging, and engagement among Singaporeans.

• Drive Economic Impact: By promoting tourism and encouraging users to visit attractions, RaceSG aims to drive economic impact by increasing visitor spending at local businesses, attractions, and hospitality establishments. It contributes to the growth of the tourism industry and the overall economy of Singapore.

How we built it

RaceSG is built using an impressive stack of cutting-edge technologies that combine to create an extraordinary user experience. Leveraging the power of React, Next.js, Firebase, and the sgID authentication API, we have crafted a seamless and captivating adventure app that redefines the way users explore Singapore.

The frontend of RaceSG is developed using React, a widely acclaimed JavaScript library for building user interfaces. With React, we create a dynamic and intuitive interface that ensures smooth navigation and a delightful user experience. The flexibility and efficiency of React allow us to create a visually stunning and highly responsive app that keeps users engaged at every step of their journey.

To bring our app to life, we turn to Next.js, a powerful framework built on top of React. Next.js provides us with server-side rendering capabilities, enabling faster page loads and optimal performance. With Next.js, we ensure that users have a seamless and immersive experience as they explore captivating locations and engage in exhilarating races.

But that's not all! We also utilize the robust capabilities of Firebase, a powerful platform for building web and mobile applications. Firebase serves as our backend infrastructure, offering features such as real-time database, hosting, and authentication. With Firebase, we ensure a secure and reliable environment for our users, allowing them to authenticate seamlessly and securely via the sgID authentication API.

Speaking of the sgID authentication API, it adds an unprecedented level of trust and convenience to RaceSG. By integrating with sgID, we leverage the Singpass mobile app to offer seamless authentication for local users. This integration ensures a trusted and reliable verification process, with government-verified data shared securely. Users can embark on their RaceSG adventures with confidence, knowing that their identities are authenticated by the Singapore government itself.

Challenges we ran into

While developing RaceSG, the team faced several challenges:

• sgID Integration: Integrating with sgID and ensuring seamless authentication for local users required a thorough understanding and implementation of the sgID APIs. The team had to work through technical complexities and ensure a smooth login flow with the Singpass mobile app.

• Transitioning to Next.js 13 and the App Folder: Initially, we attempted to leverage Next.js 13 and the newly introduced app folder. However, we realized that the older versions of Next.js were better suited to our project's requirements. This led us to downgrade to an older version, which required significant changes to our code architecture. Adapting our codebase to work with the older version was a time-consuming task, but it was necessary to align with our project's needs.

• Separating API Calls and Code Modularity: We encountered difficulties when it came to separating API calls and ensuring code modularity. This challenge arose because some team members were unfamiliar with Next.js, and it's concepts and best practices were somewhat rusty to them. Overcoming this challenge required a combination of knowledge sharing, documentation review, and collaborative problem-solving to ensure that the API calls were handled efficiently and the codebase was modular and maintainable.

Accomplishments that we're proud of

• Successful Integration of sgID: One of our most significant accomplishments is the seamless integration of sgID, the Singapore government identity provider, into our application. We successfully implemented the authentication flow using Singpass, allowing Singapore residents to authenticate themselves securely and share government-verified data. This integration establishes a trusted and reliable verification process, enhancing the overall user experience and instilling confidence in our users.

• Efficient API Calls and Data Handling: Our team efficiently handled API calls and effectively managed data between the server-side and client-side components of the application. With Next.js, we leveraged server-side rendering to optimize page load times, improve SEO, and provide a smooth user experience. This accomplishment enabled us to deliver high-performance web pages that quickly respond to user interactions, enhancing overall usability and satisfaction.

• Integration of Leaflet Map Library: We successfully incorporated the Leaflet map library into our application, allowing users to explore and navigate through Singapore's captivating locations with ease. The integration of this powerful library enhanced the visual appeal of our app and provided users with an intuitive and interactive mapping experience. Leveraging the capabilities of Leaflet, we were able to create a seamless and immersive environment for users to discover the hidden wonders of Singapore.

• Seamless Linkage of Session Data to Firebase: We accomplished the seamless linkage of session data to Firebase, ensuring smooth communication and synchronization between our app and the backend database. This achievement enabled us to securely store and retrieve user information, progress, and achievements, ensuring a personalized and tailored experience for each individual user.

What we learned

Through the development of RaceSG, our team gained invaluable knowledge and experience in various aspects of web application development. We learned the intricate dynamics of interacting with both server-side and client-side components, effectively calling APIs, and ensuring the security of sensitive keys.

Interacting with server-side and client-side components taught us the importance of maintaining a seamless flow of data and functionality between the backend and frontend of an application. We discovered the power of server-side rendering provided by Next.js, enabling us to deliver optimized pages and enhanced performance to our users. This approach allowed for faster load times, improved SEO, and overall improved user experience.

Calling APIs became a crucial part of our development process, enabling us to retrieve and exchange data with external services. We learned the significance of well-designed API integrations, ensuring efficient and reliable communication between RaceSG and the sgID authentication API. Handling API requests effectively allowed us to implement seamless authentication using Singpass and securely retrieve government-verified user data.

One of the most important lessons we learned was the criticality of safeguarding sensitive keys and information. We understand the importance of keeping keys secret, as they grant access to valuable resources and protect user data. We adopted best practices to securely manage keys, ensuring that they were not exposed in public repositories or accessible to unauthorized individuals. This approach prioritizes the security and privacy of our users' information.

Interacting with the sgID protocol introduced us to the world of government-verified authentication. We familiarized ourselves with the intricacies of the sgID authentication API, understanding the significance of leveraging government-verified data to create a trusted and reliable environment for our users. Integrating with sgID taught us the importance of following protocols and guidelines to ensure a smooth and secure user authentication process.

Overall, our journey with RaceSG has been an enriching experience, providing us with valuable insights into server-side and client-side interactions, API integrations, key management, and the complexities of government-verified authentication. Armed with this knowledge, we are empowered to continue developing innovative and secure applications that deliver exceptional experiences to our users.

What's next for [FreeForAll] RaceSG

At [FreeForAll] RaceSG, we are committed to continuously enhancing the app and providing an unparalleled exploration experience for all users. We have exciting plans and upcoming features in the pipeline that will take RaceSG to new heights. Here's a glimpse of what's on the horizon:

Favouriting Locations: We understand that certain locations hold a special place in your heart. Soon, you'll be able to mark your favourite spots within RaceSG, allowing you to easily access and revisit them whenever you desire. Whether it's an undiscovered gem or a breathtaking landmark, you can save and share your favourites with others on your preferred social media platforms.

Reward Marketplace: Your dedication and achievements deserve recognition and rewards. By completing challenges and conquering stations, you'll accumulate valuable points. In the near future, we will introduce a reward marketplace where you can exchange your hard-earned points for various exciting rewards. We will feature a curated selection of rewards under schemes like Rediscover Singapore by partnering with the Singapore Government. Prepare to explore Singapore and unlock exclusive benefits that will enhance your adventure.

Leaderboard Ranking: Unleash your competitive spirit and compare your performance with fellow RaceSG adventurers. Our upcoming leaderboard ranking system will showcase your dedication, skill, and exploration prowess. Climb the ranks, earn bragging rights, and establish yourself as a true explorer extraordinaire. Compete for the top spot and let the world know about your achievements.

We are thrilled to continue evolving RaceSG and providing you with an even more immersive and rewarding experience. Adventure awaits as we work tirelessly to make each discovery an extraordinary one. We welcome contributions from the community, so if you have any ideas, suggestions, or bug reports, please don't hesitate to reach out. Together, let's create an unforgettable journey through Singapore's hidden wonders.

Built With

• firebase
• leaflet.js
• next.js
• react
• sgid
• vercel