Skip to content

Latest commit

 

History

History
168 lines (111 loc) · 6.25 KB

README.md

File metadata and controls

168 lines (111 loc) · 6.25 KB
Oxy

Next Auth Roles Template

Start at full speed with this Next.js Template !

Mickasmt Twitter follower count

Installation · Tech Stack + Features · Author


Installation

Clone & create this repo locally with the following command:

npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-auth-roles-template"

Or, deploy with Vercel:

Deploy with Vercel

Steps

  1. Install dependencies using pnpm:
pnpm install
  1. Copy .env.example to .env.local and update the variables.
cp .env.example .env.local
  1. Start the development server:
pnpm run dev
  1. Remove parts you don't want

You can use the command pnpm run remove-content in your terminal to remove specific parts of your project. This command supports the following parameters:

  • --blog: Removes the blog section from your project.
  • --docs: Removes the documentation section from your project.

Recommendations

  • Remove Both Sections: It is recommended to use pnpm run remove-content without specifying parameters (--blog or --docs). This ensures that all associated documents are properly removed, as some documents may not be deleted/updated if you remove "blog" after "docs" or vice versa.

Examples

  1. To remove both the blog and documentation sections:
pnpm run remove-content
  1. To remove only the blog section:
pnpm run remove-content --blog
  1. To remove only the documentation section:
pnpm run remove-content --docs

Note

I use npm-check-updates package for update this project.

Use this command for update your project: ncu -i --format group

Tech Stack + Features

Next Auth Roles Template

Frameworks

  • Next.js – React framework for building performant apps with the best developer experience
  • Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
  • Prisma – Typescript-first ORM for Node.js
  • React Email – Versatile email framework for efficient and flexible email development

Platforms

  • Vercel – Easily preview & deploy changes with git
  • Resend – A powerful email framework for streamlined email development
  • Neon – Serverless Postgres with autoscaling, branching, bottomless storage and generous free tier.

UI

  • Tailwind CSS – Utility-first CSS framework for rapid UI development
  • Shadcn/ui – Re-usable components built using Radix UI and Tailwind CSS
  • Lucide – Beautifully simple, pixel-perfect icons
  • next/font – Optimize custom fonts and remove external network requests for improved performance
  • ImageResponse – Generate dynamic Open Graph images at the edge

Hooks and Utilities

  • useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
  • useLocalStorage – Persist data in the browser's local storage
  • useScroll – React hook to observe scroll position (example)
  • nFormatter – Format numbers with suffixes like 1.2k or 1.2M
  • capitalize – Capitalize the first letter of a string
  • truncate – Truncate a string to a specified length
  • use-debounce – Debounce a function call / state update

Code Quality

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

  • Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Admin Panel

The admin panel is a crucial part of the Oxy Auth project, providing functionalities for user management and statistics. It is accessible only to users with the ADMIN role.

Features

  • User Statistics: Displays the total number of users, admin users, and regular users.
  • Role-Based Access: Ensures that only users with the ADMIN role can access the admin panel.

Using the User Statistics Feature

To use the user statistics feature in the admin panel, follow these steps:

  1. Access the Admin Panel: Navigate to the admin panel by logging in with an account that has the ADMIN role.
  2. View Statistics: The admin panel will display the total number of users, admin users, and regular users.

Fetching User Statistics with Prisma

The user statistics feature in the admin panel uses Prisma to fetch data from the database. The following statistics are fetched:

  • Total Users: The total number of users in the database.
  • Admin Users: The number of users with the ADMIN role.
  • Regular Users: The number of users with the USER role.

Author

This project is based on Next SaaS Stripe Starter.

Created by @miickasmt in 2023, released under the MIT license.

Credits

Thanks to Hosna Qasmei for part of the dashboard sidebar code.