Yksinkertainen verkkokauppa tuotteiden selaamiseen ja ostamiseen.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
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.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
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.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.