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
MortenRA
Enquiry 0
Kicks

Kicks

A Modern Fullstack Webshop🛍️

Web Application

Kicks is a full-stack webshop designed to provide users with a seamless shopping experience. Crafted with a powerful combination of technologies including Next.js App Router, TypeScript, Tailwind CSS, Planetscale, Zustand, and Prisma, Kicks offers a feature-rich platform for your shopping needs.

Kicks dashboard project showcase

✨Features

  1. Authentication:

    • User Authentication: Seamlessly register and log in as a user, ensuring secure access to the platform.
    • Role-Based Access: Distinguish between users and owners with different roles to manage permissions effectively.

  2. Admin Dashboard:

    • Manage Categories: Easily add and organize product categories to maintain a structured catalog.
    • Brand Management: Add, update, or remove brands to ensure a diverse product range.
    • Product Management: Streamline product addition and management, including image uploads and descriptions.
    • Order Tracking: Keep track of customer orders and their status through the admin dashboard.

  3. Checkout with Stripe:

    • Convenient Payment Processing: Offer a seamless and secure checkout experience for customers using Stripe integration.

  4. Skeleton Loading:

    • Enhanced User Experience: Improve page loading times and user experience with skeleton loading, providing a polished and responsive interface.

  5. Product Page:

    • Detailed Product Information: Explore product details, images, and descriptions to make informed purchase decisions.

  6. Search Page:

    • Efficient Product Discovery: Utilize a highly functional search page to easily find desired items in your inventory.

These features collectively make your web app user-friendly, efficient, and suitable for both customers and owners, ensuring a seamless shopping experience while simplifying management tasks.

Kicks website showcase

đź’» Why I Chose These Technologies

When deciding on the technologies for this project, I considered several key factors to ensure an efficient and effective development process:

  1. Next.js: My primary interest lies in Next.js, given its versatility as a full-stack framework, making it an excellent choice for this project.

  2. NextAuth: For authentication, I opted for NextAuth due to its ease of setup and the control it offers over user data and authentication processes.

  3. Tailwind CSS: Tailwind CSS was chosen to facilitate rapid development, and I complemented it with the ShadCn component library to streamline the user interface.

  4. TypeScript: TypeScript was a natural choice for its type safety, industry-standard status, and its ability to save significant development time.

  5. PlanetScale: For the database, I selected PlanetScale because it is the best free tier out there.

  6. Prisma ORM: I was eager to experiment with Prisma ORM, because of the easiness of reading and learning compared to other orm.

🚀Future Goals For The Project

  • Checkout with Stripe Checkout
  • Skeleton Loading
  • React Email