PumpPoint - Loyalty Rewards

Inspiration PumpPoint was inspired by the unique challenges of African fuel stations, where customers rarely receive purchase receipts and loyalty programs are either outdated or non-existent. We observed that not only do customers lack visibility and engagement, but attendants and managers also have no incentive or easy tools to participate in loyalty programs. Our vision was to create a truly inclusive, modern solution: a unified platform that motivates both customers and staff, and finally brings digital traceability and rewards to a context where paper receipts are rare and digital adoption is crucial.

What it does PumpPoint is a loyalty platform specifically designed for the realities of African fuel stations.

For customers, it makes earning and redeeming points effortless—even without a paper receipt—using secure QR codes and a PIN-based system.

For attendants and staff, PumpPoint introduces a unique dual-incentive system: attendants also earn points based on fuel volume sold, encouraging them to participate actively and deliver better service.

For managers, it provides a real-time view of both customer and staff engagement, helping boost sales and service quality.

By addressing the absence of receipts and rewarding both sides of the transaction, PumpPoint revolutionizes loyalty for African stations and sets a new standard for digital engagement in emerging markets.

How we built it

We built PumpPoint using a modern and robust stack:

Frontend: React with TypeScript for a dynamic, reliable UI, styled with Tailwind CSS for responsive, attractive design.

Backend & Database: Supabase, providing a powerful PostgreSQL database, flexible authentication, and real-time features. We implemented strict Row Level Security (RLS) policies to ensure data security and role-based isolation.

Authentication: A custom PIN login system, designed for speed and ease of use, secured with hashing and session management.

Deployment: The app is easily deployable on platforms like Netlify (frontend) and Supabase (backend).

Development: We used an iterative approach, focusing on user experience and modular code.

Challenges we ran into

Developing PumpPoint presented several interesting challenges:

Security & RLS: Ensuring Supabase RLS policies were properly configured for complex role-based access (customer, attendant, manager, admin) and table relationships (transactions, receipts, users). This required deep understanding and rigorous testing.

PIN Management: Implementing a secure PIN system (hashing, forced changes, expiration) while keeping it user-friendly for all types of users.

Data Consistency: Maintaining data consistency between transactions, customer loyalty points, and receipts, especially during transaction creation and points updates.

Internationalization: Integrating lightweight multilingual support (French/English) without overcomplicating the app.

Accomplishments that we're proud of

We are particularly proud of:

Unified PIN authentication: A fast, simple solution for all users, with automatic role detection and dashboard redirection.

Seamless Supabase integration: Leveraging Supabase for database, authentication, and RPC functions (for points increment and loyalty tier management).

Intuitive UI: Clear, functional dashboards for customers, attendants, and managers, with a modern, user-friendly design.

Test data management: Implementing test data cleanup features, crucial for development and demos, while protecting real data.

Receipt management: Ability to generate and save detailed receipts for each transaction, improving traceability and customer experience.

What we learned

This project allowed us to deepen our knowledge of:

Best practices in web app security, especially the importance of well-designed RLS.

Optimizing database query performance and handling real-time data with Supabase.

Designing modular, maintainable front-end architecture with React and TypeScript.

Creating a smooth user experience for very different user roles.

The importance of documentation and initialization scripts for effective team development.

What's next for PumpPoint - Loyalty Rewards

Looking ahead, we plan to add:

Payment integration: Connect with payment systems (e.g., Stripe) for even smoother transactions.

Personalized notifications: Alerts and offers based on customer preferences and purchase history.

Advanced analytics: More powerful analytics tools for managers, including forecasts and customizable reports.

Native mobile deployment: Transform the web app into native mobile apps (iOS/Android) for better accessibility.

Gamification: Add gamification elements to further boost customer engagement.

Built With

• languages:-javascript
• lucide-react
• netlify-libraries:-@tanstack/react-query
• react-hook-form
• react-router-dom
• sql-(postgresql)-frameworks:-react
• tailwind-css-platforms/cloud-services:-supabase
• typescript
• vite