https://github.com/0mppula/nextjs-credits-starter-kit
Provides everything you need to quickly launch a new SaaS product or any other web application, allowing you to focus on what really matters.
https://github.com/0mppula/nextjs-credits-starter-kit
Last synced: about 2 months ago
JSON representation
Provides everything you need to quickly launch a new SaaS product or any other web application, allowing you to focus on what really matters.
- Host: GitHub
- URL: https://github.com/0mppula/nextjs-credits-starter-kit
- Owner: 0mppula
- Created: 2024-08-26T14:11:22.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-03T07:50:21.000Z (almost 2 years ago)
- Last Synced: 2025-02-26T11:17:42.330Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://nextjs-credits-starter-kit.vercel.app
- Size: 2.66 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nextjs Credits Starter Kit
## What is Nextjs Credits Starter Kit?
This starter kit provides everything you need to quickly launch a new SaaS product or any other web application, allowing you to focus on what really matters.
The starter kit is built with Next.js 14, providing a solid foundation for authentication using NextAuth, Prisma Adapter, and MongoDB. It utilizes TypeScript, React, and Shadcn-UI, with Tailwind CSS for styling. Key features include protected routes, theme switching, and a user account menu integrated into the navbar.
Follow the instructions below to quickly set up this repository and start developing your app.
### Key Features:
- **User Authentication**: Provides user data persistence using MongoDB.
- **Stripe Integration**: Full implementation for purchasing credits and saving individual payments to the database.
- **Landing Page Template**: Pre-built landing page to get you started.
- **Dashboard and Payment Pages**: Includes dashboard, payment success, and payment cancellation pages.
- **Theme Toggling**: Switch between light and dark themes.
- **Protected Routes**: Secure your application with protected routes.
- **Pricing Cards**: Ready-to-use pricing card components.
If you find this starter kit helpful, please consider starring ⭐ this repository!
---
## How to Set Up the Project Locally
### Prerequisites
- Node.js version 18.18 or higher
- MongoDB database
- **Google Provider**: [Google Cloud](https://console.cloud.google.com/) project with an OAuth consent screen created.
- **GitHub Provider**: GitHub [OAuth App](https://github.com/settings/developers)
- **Stripe credentials**: Get started [here](https://stripe.com/)
### Cloning the repository
1. Clone the repository into a new directory.
```shell
git clone https://github.com/0mppula/nextjs-credits-starter-kit.git
```
2. Install the required dependencies
```shell
npm i
```
### Clone and rename the repository as your own
1. Clone the repository into a new directory.
```shell
git clone https://github.com/0mppula/nextjs-credits-starter-kit.git
```
2. Navigate into the new directory.
```shell
cd
```
3. Remove the existing Git history.
```shell
rm -rf .git
```
4. Initialize a new Git repository.
```shell
git init
```
5. Add the `` to your `package.json` files top level `name` before installing node modules.
```json
{
"name": "new-repo-name"
}
```
6. Install the required dependencies
```shell
npm i
```
### `.env` File Configuration
In the root of the project create an `.env` file and declare the following variables:
```
# MongoDB database connection string
DATABASE_URL=mongodb+srv://:@/
# Google OAuth
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# GitHub OAuth
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
NEXTAUTH_SECRET=
# Stripe
STRIPE_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
# stripe listen --forward-to localhost:3000/api/payments/webhook/stripe
STRIPE_WEBHOOK_SECRET=
# Product price ids
NEXT_PUBLIC_STRIPE_BASIC_PRICE_ID=
NEXT_PUBLIC_STRIPE_PRO_PRICE_ID=
NEXT_PUBLIC_STRIPE_PREMIUM_PRICE_ID=
# Used for Stripe checkout session redirections
FRONTEND_URL=http://localhost:3000
```
Populate the variables with the corresponding data.
### Setup Prisma
1. Push the changes from the Prisma schema to the database
```shell
npx prisma db push
```
2. Generate Prisma Client for type safety across the app.
```shell
npx prisma generate
```
### Start the app
```shell
npm run dev
```
### Forward Stripe events to your webhook
```shell
stripe listen --forward-to localhost:3000/webhook
```
## Available commands
Running commands with npm `npm run [command]`
| command | description |
| :------ | :----------------------------------------------------------------------------------------------- |
| `dev` | Starts a development instance of the app |
| `lint` | Runs ESLint to check for errors and warnings. Errors will fail the build, but warnings will not. |
---
## Tech Stack
### Technologies
- **Next.js**: A React framework enabling server-side rendering and static site generation for high-performance web applications.
- **Tailwind CSS**: A utility-first CSS framework for rapidly creating custom designs directly in your markup.
- **MongoDB**: MongoDB is an open-source NoSQL database that stores data in flexible, JSON-like documents, allowing for scalable, high-performance data management and real-time data processing.
- **Prisma**: A next-generation ORM for Node.js and TypeScript that simplifies database access and management with an intuitive query API.
- **NextAuth**: A complete open-source authentication solution for Next.js applications.
- **Shadcn**: Different component/UI libraries used for design
### Framework
- **Front-end Framework**: Next.js (v13.4.12)
### UI
- **UI Library**: shadcn-ui
- **UI Styling**: tailwindcss (v3.4.1) with tailwindcss-animate (v1.0.7)
- **Theming**: next-themes (v0.3.0)
- **Icons**: react-icons (v5.3.0) & lucide-react (v0.434.0)
- **CSS Utility**: clsx (v2.1.1)
- **Class Variance Management**: class-variance-authority (v0.7.0)
### Backend & Authentication
- **Prisma ORM**: @prisma/client (v5.18.0) with prisma (v5.18.0) as a dev dependency
- **User Authentication**: next-auth (v4.24.7) with prisma-adapter (v1.0.7)
- **TypeScript**: (v^5)
- **Type Definitions**: @types/node (v^20), @types/react (^18), @types/react-dom (v^18)
---
## License
This project is licensed under the MIT License.