Application Development Blog Posts
Learn and share on deeper, cross technology development topics such as integration and connectivity, automation, cloud extensibility, developing at scale, and security.
Showing results for 
Search instead for 
Did you mean: 

Objective: Develop a gamification application for the SAP Customer Success event held on April 24 & 25.

Key Features: Event agenda for two days of the event; Two types of quizzes - one consisting of general SAP questions, second consisting of Partner Question; Leaderboard consisting of top 15 people of the quiz; QR code scanner for session codes and points; User onboarding via IAS self-registration; My Points session consisting of all the points secured during the games.

Technologies Used: Frontend: React; Backend: CAP; Data Storage: S4; Deployment: SAP Business Technology Platform (BTP); User Management: SAP Identity Authentication Service (IAS)

Development Process:

Initial Setup: 

     BAS Studio: BAS

     Database Explorer: SAP HANA

     BTP Subaccount : Training Subaccount

1. Frontend Development with React:

   - Developed the user interface using React.

   - Designed mock UI screens using Figma Click to view 

   - Followed the SAP community blog for React application development Click to see the blog 

   - Learn more from React Tutorial with UI5 Webcomponents

   - Created routing in the React application using SAP's tutorial Routing Guide

2. Backend Development with CAP:

   - Decided on CAP for backend development after initial research.

   - Set up the database and CDS (Core Data Services) in CAP.

   - Deployed the backend on BTP following the CAP jumpstart guide CAP documentation, youTube Tutorial

3. Data Storage Integration:

   - Integrated data storage using S4 Refer this article 

   - Faced challenges integrating the front and backend, which were resolved through research and community support.

User Onboarding:

- Implemented user onboarding with self-registration through IAS.

- Followed the SAP Help Portal guide for IAS setup IAS User Guide

Final Integration and Deployment:

- Successfully deployed a mock version of the application to a BTP subaccount.

- Completed the initial development of the React application within 18 hours & deployed it.

Testing and Launch:

- Delivered the completed application to the team for a demo to the RVP.

- Addressed minor bugs during testing - fixed them.

- Launched the application successfully a week before the event day.


- Over 200 customers participated in the event.

- The application got positive feedback from the end-users(Customers) and was well-received during the SAP BTP Customer Success Day event.

- The top three participants were awarded prizes from SAP Partners.

Ultimately, working on this application was a great experience. As the lead developer for the first time, I experienced various ups and downs. I strongly believe that it's okay to make mistakes as long as we are ready to analyze and fix them.




App DemoApp DemoQR Code ScanQR Code Scan





Labels in this area