Taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Warning This app is a work in progress. I'm building this in public. You can follow the progress on Twitter @shadcn See the roadmap below.

About this project

This project as an experiment to see how a modern app (with features like authentication, subscriptions, API routes, static pages for docs ...etc) would work in Next.js 13 and server components.

This is not a starter template.

A few people have asked me to turn this into a starter. I think we could do that once the new features are out of beta.

Note on Performance

Warning This app is using the unstable releases for Next.js 13 and React 18. The new router and app dir is still in beta and not production-ready Expect some performance hits when testing the dashboard If…

Skateshop

This is an open source e-commerce skateshop build with everything new in Next.js 13. It is bootstrapped with create-t3-app.

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

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

Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• User Management: Clerk
• ORM: Drizzle ORM
• UI Components: shadcn/ui
• Email: React Email
• Content Management: Contentlayer
• File Uploads: uploadthing
• Payments infrastructure: Stripe

Features to be implemented

• Authentication with Clerk
• File uploads with uploadthing
• Newsletter subscription with React Email and Resend
• Blog using MDX and Contentlayer
• ORM using Drizzle ORM
• Database on PlanetScale
• Validation with Zod
• Storefront with products, categories, and subcategories
• Seller and customer workflows
• User subscriptions with Stripe
• Checkout with Stripe Checkout
• Admin dashboard with stores, products, orders, subscriptions, and payments

Running Locally

1. Clone the repository

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

2. Install dependencies using…

Watch video here

What you will learn

• Latest Next.js 13 features
• Next.js App Router
• Next.js Server Actions
• Client & Server Components
• TypeScript (Beginner & Intermediate)
• Tailwind CSS
• Context API
• Advanced Animations with Framer Motion
• React.Email & Resend
• Custom React hooks
• Fresh, modern UI design
• Light & Dark mode
• Responsive website

Important

If you want to be a professional developer, you have to know the fundamentals like JavaScript and CSS really well. I highly recommend you go through my Professional JavaScript and Professional CSS courses.

I'm close to releasing a complete React & Next.js course. Get on the email list to receive early-bird pricing: link.

Setup

1. Add RESEND_API_KEY environment variable in .env.local
2. In the send-email.ts action file, change the "to" email to your own email

This is a Next.js project with Shadcn ui create-next-app.

Best Project To Begineer to learn =>

Nextsjs

Typescript

Shadcn ui [https://ui.shadcn.com/]

Editorjs [https://editorjs.io/]

@mantine/hooks [https://www.npmjs.com/package/@mantine/hooks]

useform-hooks

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.