Combinatorial filtering
Build the SQL WHERE clause dynamically while preserving parameterized queries and pagination.
ENGINEERING CASE STUDY / AI-POWERED E-COMMERCE PLATFORM
ShopyOnline
ShopyOnline shows my full-stack and product-engineering range: React/Redux on the client, Express/PostgreSQL on the server, Gemini for natural-language discovery, and defensive Stripe payment logic for real-world failure cases.
01 / CONTEXT
The problem to solve.
Build a full e-commerce experience with flexible product discovery, secure authentication, payment reliability, analytics, reviews, and AI-assisted natural-language product search.
Explore all 10 features
- Google Gemini natural-language product search
- Advanced product filtering
- Pagination
- Stripe payment integration
- Verified user reviews
- Analytics dashboard
- JWT authentication
- Persistent login
- Cloudinary integration
- Responsive React/Tailwind UI
02 / UNDER THE SURFACE
A connected system.
01React + ReduxDiscovery & checkout
02ExpressApplication API
03PostgreSQLParameterized queries
04Stripe · GeminiPayments & AI discovery
A conceptual overview of the components documented in the project.
- pattern
- PERN stack
- frontend
- React 19 + Vite + Redux Toolkit + React Router + Tailwind CSS
- backend
- Node.js + Express 5
- database
- PostgreSQL through node-postgres
- authentication
- bcrypt + JWT + HTTPOnly token cookie; client also uses token for Axios interceptor flow
- payments
- Stripe PaymentIntents + Stripe Elements
- ai
- Google Gemini 2.0 Flash generateContent API
- media
- Cloudinary
- analytics
- Recharts
03 / THE DETAILS MATTER
Engineering in practice.
- Backend builds parameterized SQL WHERE clauses dynamically from active price, category, availability, rating, and text filters.
- Filtering performs a COUNT query for pagination followed by a parameterized SELECT with LIMIT/OFFSET.
- Stripe PaymentIntent handling reuses valid intents instead of blindly creating new ones.
- Payment logic reconciles Stripe state with local database state when a client or network interruption leaves the DB stale.
- Card information is handled by Stripe Elements and does not pass through the application server.
- Authentication hashes passwords with bcrypt and issues JWTs.
- Google Gemini is called from the backend for AI recommendation/natural-language search functionality.
04 / DECISIONS THAT COUNT
Working through the hard parts.
Duplicate or inconsistent payments
Use reusable Stripe PaymentIntents and reconcile local payment/order state with Stripe before creating a replacement intent.
Natural-language product discovery
Integrate Google Gemini into the backend recommendation/search flow.
NEXT IN THE NOTEBOOK