This portfolio is a work in progress — check back soon This portfolio is a work in progress — check back soon This portfolio is a work in progress — check back soon This portfolio is a work in progress — check back soon This portfolio is a work in progress — check back soon This portfolio is a work in progress — check back soon This portfolio is a work in progress — check back soon This portfolio is a work in progress — check back soon
Kicks

Kicks

En moderne fullstack webshop🛍️

Web Applikation

Kicks er en fullstack-webshop designet til at give brugerne en problemfri indkøbsoplevelse. Udstyret med en kraftfuld kombination af teknologier, herunder Next.js App Router, TypeScript, Tailwind CSS, Planetscale, Zustand og Prisma, tilbyder Kicks en funktionel platform til dine shoppingbehov.

Kicks dashboard projektvisning

✨ Funktioner

  1. Authentication:

    • Brugeridentifikation: Registrer og log ind som bruger uden problemer og sikre adgang til platformen.
    • Adgang baseret på roller: Skelne mellem brugere og ejere med forskellige roller for at administrere tilladelser effektivt.
  2. Admin Dashboard:

    • Administrer kategorier: Tilføj og organiser produktkategorier nemt for at opretholde en struktureret katalog.
    • Brandstyring: Tilføj, opdater eller fjern mærker for at sikre et varieret produktsortiment.
    • Produktstyring: Strømlin produkttilføjelse og -styring, herunder upload af billeder og beskrivelser.
    • Ordresporing: Hold styr på kundeordrer og deres status gennem admin-dashboardet.
  3. Tjek ud med Stripe:

    • Praktisk betalingsbehandling: Tilbyd en problemfri og sikker afrejseoplevelse for kunder ved hjælp af Stripe-integration.
  4. Skeleton Loading:

    • Forbedret brugeroplevelse: Forbedre sideloadningstider og brugeroplevelsen med skeleton loading, hvilket giver en poleret og responsiv grænseflade.
  5. Produktside:

    • Detaljerede produktinformationer: Udforsk produktinformationer, billeder og beskrivelser for at træffe informerede købsbeslutninger.
  6. Søgeside:

    • Effektiv produktopdagelse: Udnyt en meget funktionel søgeside for nemt at finde ønskede varer i din beholdning.

Disse funktioner gør samlet set din webapp brugervenlig, effektiv og egnet til både kunder og ejere, hvilket sikrer en problemfri indkøbsoplevelse og forenkler administrativ opgaver.

Kicks website showcase

💻 Hvorfor jeg valgte disse teknologier

Da jeg besluttede teknologierne til dette projekt, overvejede jeg flere nøglefaktorer for at sikre en effektiv og effektiv udviklingsproces:

  1. Next.js: Min primære interesse lå i Next.js, givet dets alsidighed som en fuldstackramme, hvilket gør den til et fremragende valg for dette projekt.

  2. NextAuth: Til autentifikation valgte jeg NextAuth på grund af dens nemme opsætning og den kontrol, den tilbyder over brugerdata og autentifikationsprocesser.

  3. Tailwind CSS: Tailwind CSS blev valgt for at lette hurtig udvikling, og jeg supplerede det med ShadCn-komponentbiblioteket for at strømline brugergrænsefladen.

  4. TypeScript: TypeScript var et naturligt valg for dets type­sikkerhed, branchestandardstatus og evne til at spare betydelig udviklingstid.

  5. PlanetScale: Til databasen valgte jeg PlanetScale på grund af det værende den bedste gratis tier derude.

  6. Prisma ORM: Jeg var ivrig efter at eksperimentere med Prisma ORM på grund af dets lethed at læse og lære sammenlignet med andre ORM.

🚀 Fremtidige mål for projektet

  • Afregning med Stripe Checkout
  • Skeleton Loading
  • React Email