Skaters is an open-source e-commerce starter built with Next.js 14 that combines Prisma, MySQL, Next Auth, and Midtrans to deliver a full storefront with authentication, file uploads, and payment gateway integration.
What is Skaters?
Skaters is an open-source e-commerce project created by developer Inifarhan and published on GitHub. It uses the Next.js 14 App Router with TypeScript as the framework, Tailwind CSS for styling, and shadcn/ui for interface components. The application accepts configuration through a .env file and produces a storefront with product categories, Google authentication, and Midtrans payment processing. The backend relies on MySQL accessed through Prisma ORM, and the reference deployment runs the Next.js app on Vercel with the database on Aiven. The README warns that Skaters is still in development and not ready for production, with a roadmap hosted on Notion.
Key Features
- Next.js 14 framework — Uses the latest App Router and TypeScript for server-side rendering and file-based routing.
- Tailwind CSS styling — Utility-first CSS classes for responsive layout and design across the storefront.
- shadcn/ui components — A collection of accessible, copy-paste UI components integrated into the project.
- Next Auth authentication — Configured with Google OAuth; the
.envsample includes GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET variables. - Prisma ORM with MySQL — Database schema management and queries; setup requires
npx prisma generateandnpx prisma db push, followed by a category seed script. - Uploadthing file uploads — Upload service wired via UPLOADTHING_SECRET and UPLOADTHING_APP_ID environment variables.
- Midtrans payment gateway — Indonesian payments infrastructure configured with MIDTRANS_CLIENT_KEY and MIDTRANS_SERVER_KEY, making it suitable for Indonesian storefronts.
Who is it for?
- Full-stack developers who want a ready-made e-commerce reference implementation to study or extend with new features.
- Indonesian startups and small businesses that need Midtrans payments as a core part of their store without building the integration from scratch.
- Next.js learners who want hands-on experience with Prisma, Next Auth, and modern component libraries in a real project context.
What can you do with Skaters?
- Launch a local storefront quickly: clone the repository, install dependencies, fill in the
.envvariables, run Prisma migrations and seed data, then start the development server. - Add Google sign-in: configure the Google OAuth credentials in the environment to enable social logins for customers.
- Accept payments through Midtrans: plug in the Midtrans client and server keys to process orders through the payment gateway.
- Upload product media: set the Uploadthing credentials to enable file uploads for product images.
How does Skaters work?
The repository's README outlines a clear setup path: after cloning and installing npm packages, copy the .env.example to .env and populate the required secrets. Next, generate the Prisma client, push the database schema to MySQL, seed the category data, and run npm run dev to start the application locally. The development workflow assumes Node.js and npm are already available on the machine.
Pricing
Skaters is free and open source, released under the MIT License. There are no paid tiers or commercial licenses mentioned on the repository page.
Alternatives
- Skateshop — another open-source Next.js e-commerce template that Skaters credits as a reference; it shares a similar tech stack and purpose.
FAQ
Is Skaters free?
Yes, Skaters is free to use and modify. It is distributed under the MIT License, so you can use it for personal and commercial projects without paying a license fee.
Is Skaters production-ready?
No. The README displays a warning that the project is still in development and not ready for production use. Check the Notion roadmap for planned features and progress.
What database does Skaters use?
Skaters uses MySQL, accessed through Prisma ORM. The setup requires you to have a MySQL database available and the DATABASE_URL environment variable pointing to it.
How do I deploy Skaters?
The author deploys the Next.js application on Vercel and the MySQL database on Aiven. You can do the same or use any hosting service that supports Next.js and MySQL.
What authentication methods are available?
Skaters uses Next Auth with Google OAuth configured. The .env file includes GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET for the provider.
