Yksinkertainen verkkokauppa tuotteiden selaamiseen ja ostamiseen. Opi e-commerce-perusteet, Stripe-maksut ja ostoskorin logiikka käytännössä.
Keskitaso · 8-12 tuntia · Next.js, TypeScript, Tailwind CSS, Supabase, Stripe
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo mini-verkkokaupan perusrakenne. Tech stack: - Next.js 14 App Router - TypeScript - Tailwind CSS - Supabase (tuotteet, tilaukset) - Stripe (maksut) Tietokantataulut: - products (id, name, slug, description, price, image_url, category_id, stock) - categories (id, name, slug) - orders (id, user_email, status, total, created_at) - order_items (id, order_id, product_id, quantity, price) Sivut: - / (etusivu, featured tuotteet) - /products (kaikki tuotteet, filtteröinti) - /products/[slug] (tuotesivu) - /cart (ostoskori) - /checkout (tilauksen teko) - /order/[id] (tilausvahvistus) Aloita tuotteiden näyttämisestä ja ostoskorista.
Luo tuotelistaus ja yksittäisen tuotteen sivu.
Luo verkkokaupan tuotenäkymät. ProductGrid listaa tuotteet kortteina (kuva, nimi, hinta). ProductPage /products/[slug] näyttää tuotteen tiedot, kuvat ja "Lisää koriin" -napin.
Toteuta ostoskorin toiminnallisuus.
Luo ostoskoritoiminnallisuus React Contextilla. Funktiot: addToCart, removeFromCart, updateQuantity, clearCart. Näytä ostoskori sivupalkissa tai omalla sivulla.
Rakenna tilauksen teko -prosessi.
Luo checkout-sivu. Kerää toimitustiedot lomakkeella, näytä yhteenveto ja integroi Stripe Checkout maksua varten. Ohjaa onnistuneesta maksusta kiitossivulle.
Lisää tuotteiden hallinta.
Luo admin-sivu tuotteiden hallintaan. Listaa tuotteet, lisää uusi tuote (nimi, kuvaus, hinta, kuva, kategoria), muokkaa ja poista. Tallenna Supabaseen.
Tuotelistaus ja -sivut
Ostoskori
Hakutoiminto
Kategoriat
Stripe-maksu
Tilausvahvistus
Kun perusprojekti on valmis:
Käyttäjätilit ja tilaushistoria
Tuotearvostelut
Toivelista
Alennuskoodit
Varastosaldojen hallinta
Email-vahvistukset
Rakenna moderni ja konvertoiva laskeutumissivu SaaS-tuotteelle. Opi markkinointisivun rakenne, CTA-elementtien sijoittelu ja responsiivinen design käytännössä.
Täysiverinen blogi kirjoittamiseen ja artikkeleiden hallintaan. Opi MDX-sisällönhallintaa, hakutoimintoja ja autentikaatiota rakentamalla oma CMS.
Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi. Opi Next.js:n perusteet ja deployn Verceliin - täydellinen ensimmäinen projekti.
Valitse työkalu ja käytä aloituspromptiä.