shajar5110/hackathon-ii-phase-3

Overview

This skill delivers end-to-end full-stack development using Next.js 13+, React, Firebase, Tailwind CSS, TypeScript, and payment integrations (Stripe, JazzCash, EasyPaisa). I build production-ready e-commerce, SaaS, and scalable web apps with a focus on performance, security, and maintainability. It generates complete project structures, pages, components, API routes, database schemas, security rules, and deployment configurations in TypeScript.

How this skill works

I inspect project requirements and produce a tailored codebase using Next.js App Router, React Server and Client Components, and Firebase for data and auth. The skill scaffolds frontend pages, reusable components, API route handlers, Firestore schemas, security rules, form handling with react-hook-form and Zod, and payment workflows with Stripe, JazzCash, or EasyPaisa. It also outputs deployment and CI/CD configurations for Vercel and Firebase and recommends optimization and monitoring steps.

When to use it

• Build a production e-commerce platform with cart, orders, and payments.
• Create a subscription-based SaaS with billing, teams, and role-based access.
• Implement authenticated content platforms with media uploads and search.
• Add secure payment processing (Stripe, JazzCash, EasyPaisa) to a web app.
• Migrate or scaffold a Next.js + Firebase TypeScript project for production.

Best practices

• Use App Router server components for SSR and data fetching; restrict client components to UI state.
• Design Firestore with denormalization where needed and add composite indexes for common queries.
• Validate inputs with Zod and centralize validation for API routes and forms.
• Protect API routes with Firebase Auth checks and custom claims for RBAC.
• Optimize images, fonts, and code-splitting; enable caching and CDN delivery for assets.

Example use cases

• Full-featured e-commerce site: product catalog, cart sync (Zustand + Firebase), Stripe checkout, admin dashboard.
• SaaS app: organization management, subscription tiers, Stripe billing, invoices, webhook handlers.
• Content publishing platform: editors, versioning, media storage in Firebase Storage, search and comments.
• Real-time collaboration tool: presence tracking, live notifications, optimized listeners and conflict resolution.