Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/itsdrvgo/nextjs-14-template

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/itsdrvgo/nextjs-14-template
Owner: itsdrvgo
License: mit
Created: 2023-11-15T16:27:09.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2024-01-06T13:54:22.000Z (12 months ago)
Last Synced: 2024-05-15T22:27:46.382Z (7 months ago)
Language: TypeScript
Size: 324 KB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # **Next.JS 14 Template**

This is a template for Next.JS 14 with TypeScript. It is also configured with the following:

-   [ESLint](https://eslint.org/) : Linting for JavaScript and TypeScript.

-   [Prettier](https://prettier.io/) : Enforces a consistent code style.

-   [TailwindCSS](https://tailwindcss.com/) : Utility-first CSS framework.

-   [NextUI v2](https://nextui.org/) : Easy to use React UI Library.

-   [Supabase PostreSQL](https://supabase.com/) : PostgreSQL Database.

-   [Drizzle ORM](https://orm.drizzle.team/) : ORM for SQL Databases.

-   [Clerk](https://clerk.dev/) : Authentication and User Management.

-   [Upstash Redis](https://upstash.com/) : Redis Database for Caching, powered by Upstash.

-   [tRPC](https://trpc.io/) : Typed RPC Framework for Next.js.

-   [SVIX](https://svix.com/) : Webhooks for the Web.

-   [Zustand](https://zustand-demo.pmnd.rs/) : Global State Management.

-   [React Query / Tanstack Query](https://tanstack.com/query/latest) : Data Fetching and Caching.

-   [React Hook Form](https://react-hook-form.com/) : Form Validation.

-   [React Hot Toast](https://react-hot-toast.com/) : Toast Notifications.

-   [Vercel Analytics](https://vercel.com/docs/analytics) : Analytics for Vercel.

-   [Icons w/ Lucide Icons](https://lucide.dev/) : Icons for the Web.

-   [UploadThing](https://uploadthing.com/) : Pre-built Upload Dropzone.

## Getting Started

### 1. Clone the repository

```bash

git clone https://github.com/itsdrvgo/nextjs-14-template.git

```

### 2. Install dependencies

-   Using [pnpm](https://pnpm.io/):

```bash

pnpm install

```

-   Using [Yarn](https://yarnpkg.com/):

```bash

yarn install

```

-   Using [npm](https://www.npmjs.com/):

```bash

npm install

```

### 3. Configure the environment variables

-   Copy the `.env.example` file and rename it to `.env`.

-   Fill in the environment variables.

### 4. Configure Clerk

-   Create a Clerk account and a Clerk application.

-   Get the Clerk API Key and fill it in the `.env` file.

-   Get the Clerk Frontend API Key and fill it in the `.env` file.

-   From `Webhooks` in the Clerk Dashboard, create a new Endpoint and subscribe to the following events :

    -   `user.created`

    -   `user.updated`

    -   `user.deleted`

-   Get the Endpoint Secret Key and fill it in the `.env` file inside `SVIX_SECRET`.

-   From `User & Authentication` in the Clerk Dashboard, enable the following features :

    -   `Email Address`

        ![Email Address](./public/images/email_auth.png)

    -   `Username`

        ![Username](./public/images/username_auth.png)

    -   `Email Verification Link` from `Authentication factors`

        ![Email Verification Link](public/images/email_link_auth.png)

    -   `Allow users to delete their accounts` from `Default user permissions`

        ![Delete Account](./public/images/delete_account_auth.png)

### 5. Configure HTTPS for development

-   Update VSCode to the latest version.

-   Go to `Ports` in the VSCode settings.

-   Click on `Forward a Port`, and enter `3000` as the port number.

-   Right click on the generated URL and set `Port Visibility` to `Public`.

-   Copy the HTTPS URL and go to the `Webhooks` section in the Clerk Dashboard.

-   Paste the HTTPS URL in the `Endpoint URL` field and add `/api/users` at the end.

-   The final URL should look like this : `https:///api/users`.

### 6. Configure Upstash

-   Create an Upstash account and a Redis database.

-   Get the Redis URL and Token and fill them in the `.env` file.

### 7. Start the development server

-   Using [pnpm](https://pnpm.io/):

```bash

pnpm dev

```

-   Using [Yarn](https://yarnpkg.com/):

```bash

yarn dev

```

-   Using [npm](https://www.npmjs.com/):

```bash

npm run dev

```

### 8. Start building your app

-   Start building your app by editing the files in the `app` directory.

-   You can also edit the files in the `components` directory to add more functionality to your app.

-   You can create new functions, schemas, validation methods and more in the `lib` directory.

### 9. Test Build

-   Build the app using the following command :

```bash

pnpm build

```

-   Start the app using the following command :

```bash

pnpm start

```

-   Open the app in your browser at `http://localhost:3000`.

## Community

Join the [DRVGO Discord Server](https://itsdrvgo.me/support) to connect with the community and get help with your projects.

## License

This project is licensed under the [MIT License](LICENSE).

## Let's Connect

[![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?logo=Instagram&logoColor=white)](https://instagram.com/itsdrvgo)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://linkedin.com/in/itsdrvgo)

[![Twitch](https://img.shields.io/badge/Twitch-%239146FF.svg?logo=Twitch&logoColor=white)](https://twitch.tv/itsdrvgo)

[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?logo=Twitter&logoColor=white)](https://twitter.com/itsdrvgo)

[![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?logo=YouTube&logoColor=white)](https://youtube.com/@itsdrvgodev)