KartaShop

The problem

I wanted a portfolio piece that felt closer to a real online store than a single-product landing page: discover items, inspect details, manage a cart across visits, and sign in before paying. Wiring that end to end forces decisions about layout density, state, auth, and how product data reaches the UI—without hiding everything behind a no-code template. The repo name reflects the original goal of backing the catalog with Firebase; the shipped version uses a typed product API and client state so the storefront could ship and demo quickly while keeping a clear path to Firestore later.

What I built

KartaShop is a multi-category demo shop (electronics, fashion, beauty, home) with a sticky navbar, search affordance, and category navigation chrome. The home page loads ~20 products via getServerSideProps from /api/productdata, renders cards with sale pricing and quick Agregar actions, and links to dynamic product routes. The product detail page shows imagery, brand, description, fulfillment tiles, and quantity-aware add-to-cart. Redux Toolkit plus redux-persist keeps cart lines and quantities in the browser; the navbar reflects live subtotals. NextAuth with Google OAuth syncs session user info into Redux; checkout is enabled only when the user is signed in and the cart is non-empty, then routes to a success page. Sonner toasts confirm add-to-cart and validation errors. A react-slick carousel drives the marketing banner on the landing experience. Source: github.com/Cartagena2001/e-commerce-next-firebase Website demo: https://kartashop.vercel.app

Technical choices

• Next.js 13 (Pages Router) + TypeScript — getServerSideProps for catalog hydration, API routes for products and NextAuth, shared Layout with navbar and footer.
• Redux Toolkit + redux-persist — cart reducers (addToCart, quantity +/- , deleteItem, resetCart) and mirrored user profile from the auth session.
• NextAuth (Google provider) — environment-driven OAuth; session wrapped in SessionProvider at the app root.
• Tailwind CSS — marketplace-style spacing, hover states on product cards, and checkout summary panels.
• Catalog API — static JSON array in productdata.ts as a stand-in for Firestore or a headless CMS; images hosted externally for lightweight deploys.

What I'd do differently

I'd finish the Firebase layer (Firestore products, user orders) so the name matches the architecture, fetch PDP data by id instead of passing fields through the router query, and wire a real payment or order API. Search and department filters are visual only today—they deserve client-side filtering or server search. I'd also tighten cart math (savings calculation per line × quantity) and add tests around reducers and checkout guards.

Outcome

Shipped a deployed storefront that demonstrates product discovery, persistent cart behavior, OAuth-gated checkout, and polished retail UI patterns—open on GitHub and live on Vercel. It reads as a front-end and product-structure showcase, with a documented upgrade path to Firebase and payments when the project moves beyond demo scope.