A production-grade refund request platform built using Next.js and Supabase, designed to simulate a real-world internal operations tool with clean architecture and scalable design.
This system allows users to submit refund requests with validation, conditional business logic, file uploads, and persistent storage.
It is designed to reflect how real-world operational tools are built — focusing on reliability, usability, and structured workflows rather than just UI.
- Fully validated input fields
- Clear separation of required and optional data
- Real-time validation feedback
- Automatic 90-day eligibility detection
- Conditional warning banner display
- Prevention of invalid future dates
- Supports image and PDF uploads
- Secure storage using Supabase Storage
- Clean file preview (non-intrusive UI)
- File linked to database records
- Data stored in Supabase PostgreSQL
- Each submission is retrievable
- File URL stored alongside record
- Displays actual submitted data
- Structured confirmation view
- Reset flow for multiple submissions
- View all submitted refund requests
- Clean tabular layout
- Useful for operations review
- Fully optimized for mobile screens
- Tested using browser device simulation
- Consistent spacing and alignment
- Light and dark mode support
- Smooth UI transitions
- Frontend: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS + Custom UI system
- Backend: Supabase (Database + Storage)
- Deployment: Vercel
app/
├── page.tsx
├── layout.tsx
├── admin/
components/
├── RefundForm.tsx
├── FormField.tsx
├── SuccessView.tsx
lib/
├── supabase.ts
├── utils.ts
types/
├── index.ts
public/
Create a .env.local file:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
Install dependencies:
npm install
Run the app:
npm run dev
Open:
http://localhost:3000
- Push project to GitHub
- Import repository into Vercel
- Add environment variables
- Deploy
This project demonstrates:
- Clean component-based architecture
- Real-world form handling and validation
- Backend integration with database and storage
- Thoughtful UX and interaction design
- Maintainable and scalable code structure
- Invalid email formats
- Missing required fields
- Future booking dates blocked
- 90+ day conditional logic
- File upload validation and preview handling
This is not a template-based UI project.
It reflects a practical understanding of building production-ready applications with:
- Functional backend integration
- Business logic implementation
- Clean UI/UX decisions
- Real-world usability considerations
🔗 LinkedIn:
https://www.linkedin.com/in/syed-hussain-abdul-hakeem
🔗 GitHub:
https://github.com/SyedHussain23
Built with a focus on clarity, usability, and real-world engineering practices.