FaceSearchAI Revamp
Adaeze Ndupu
Frontend Engineer
Web Developer
Next.js
Stripe
TypeScript
Project Overview
This sophisticated web application offers image search capabilities with a credit-based system and subscription model.
Preview at: https://persist-facesearchai.netlify.app/
Technology Stack
Frontend:
Next.js 15 (React Framework)
TypeScript
TailwindCSS for styling
Material-UI (MUI) components
React Stripe.js for payment integration
Backend:
Next.js API routes
Prisma ORM
PostgreSQL database
Clerk for authentication
Architecture & Features
Authentication System:
Implemented using Clerk (@clerk/nextjs)
Secure user management and authentication flows
Database Design:
Well-structured Prisma schema with relations between:
Users
Credits (credit management system)
Searches (image search history)
Subscriptions (premium/enterprise tiers)
2. Payment Integration:
Stripe integration for handling payments
Support for subscription-based model
3. Credit System:
Two-tier credit system (standard and premium)
Credit usage tracking
Credit allocation based on subscription type
Modern Development Practices
Type Safety:
Full TypeScript implementation
Strong type checking with tsconfig.json
Code Quality:
ESLint for code linting
Modern module structure under
src/Proper separation of concerns
Styling:
TailwindCSS for utility-first CSS
Material-UI for consistent component design
PostCSS for CSS processing
