Kicks

Kicks - A Modern Fullstack Webshop

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.

✨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.

💻 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