Skateshop13: An Open Source E-Commerce Skateshop Built with Next.js 13

Skateshop13 is an open source e-commerce skateshop built with the latest features of Next.js 13. This project utilizes the create-t3-app bootstrap and aims to provide a modern and efficient platform for skateshop owners and customers. Although it is still in development, Skateshop13 showcases the potential of new technologies such as server actions and drizzle ORM. However, it is important to note that these technologies are subject to change, and the project is not yet suitable for production use.

Warning

This project is still in development and is not ready for production use.

It uses new technologies (server actions, drizzle ORM) which are subject to change and may break your application.

Tech Stack

Skateshop13 leverages the following technologies:

• Next.js: Next.js is a popular React framework for building server-rendered and static websites. It offers powerful features such as automatic code splitting, server-side rendering, and efficient caching.

• Clerk Auth: Clerk Auth provides a seamless and secure authentication solution for web applications. Skateshop13 utilizes Clerk Auth for user authentication and authorization.

• Drizzle ORM: Drizzle ORM is a modern object-relational mapper (ORM) that simplifies database interactions in Next.js applications. Skateshop13 integrates Drizzle ORM to manage database operations efficiently.

• Tailwind CSS: Tailwind CSS is a utility-first CSS framework that enables developers to rapidly build custom designs with reusable components. Skateshop13 utilizes Tailwind CSS for its flexible and customizable styling.

• uploadthing: uploadthing is a file upload service used by Skateshop13 to handle file uploads efficiently and securely.

• Stripe: Stripe is a popular payment processing platform. Skateshop13 integrates Stripe for subscription management, payment processing, and billing functionality.

Features

Skateshop13 offers the following features:

• Authentication with Clerk : Skateshop13 provides a seamless authentication experience powered by Clerk Auth. Users can create accounts, log in, and enjoy personalized shopping experiences.

• File Uploads with uploadthing : Skateshop13 leverages uploadthing to enable users to upload and manage files securely. This feature is especially useful for users who want to upload images or other files related to their skateshop products.

• Subscription, Payment, and Billing with Stripe : Skateshop13 integrates with Stripe to enable subscription-based services, handle payments securely, and manage billing for skateshop owners and customers.

• Storefront with Products and Categories : Skateshop13 offers a fully functional storefront where skateshop owners can showcase their products. Products are organized into categories, allowing users to easily browse and find items of interest.

• Seller and Customer Workflows : Skateshop13 supports both seller and customer workflows. Skateshop owners can manage their stores, products, orders, subscriptions, and payments through the admin dashboard, while customers can browse products, place orders, and manage their subscriptions.

• Admin Dashboard : Skateshop13 provides an intuitive admin dashboard that empowers skateshop owners to manage various aspects of their business. From the dashboard, owners can manage stores, products, orders, subscriptions, and payments efficiently.

Installation

To install and set up Skateshop13 on your local environment, follow these steps:

1. Clone the repository

Clone the Skateshop13 repository by running the

following command in your terminal:

git clone https://github.com/sadmann7/skateshop

2. Install dependencies

Navigate to the project's root directory and install the required dependencies by running the following command:

pnpm install

3. Create a .env file

Create a new file called .env in the project's root directory. Copy the environment variables from the .env.example file and set their values as appropriate for your environment.

4. Run the application

Start the Skateshop13 application by running the following command:

pnpm run dev

5. Push the database

To initialize the database, run the following command:

pnpm run db:push

6. Listen for Stripe events

To enable the handling of Stripe events, run the following command:

pnpm run stripe:listen

Deployment

If you wish to deploy Skateshop13, refer to the deployment guides for Vercel, Netlify, and Docker for detailed instructions.

Deploying Skateshop13 on these platforms will allow you to make your e-commerce skateshop accessible to a wider audience while taking advantage of the benefits provided by each deployment option.

Note that before deploying, ensure that you have properly configured the required environment variables and have followed any additional deployment-specific steps outlined in the respective guides.

Skateshop13 is a promising open source project that combines the power of Next.js 13 with various modern technologies to deliver a robust and feature-rich e-commerce platform for skateshops. While still under development, it already offers impressive functionalities for both skateshop owners and customers. With further enhancements and refinements, Skateshop13 has the potential to revolutionize the way skateshops operate and serve their customers in the digital age.