Animal Haven

An all round application built for pet lovers by a pet lover where users can share ideas, form communities and can learn a lot of stuff!

Features

• Magic Link Authentication
• Google and Github Authentication
• Content using Sanity
• Light/dark mode toggle
• Authentication using Clerk
• User Account Management
• Middleware
• Protected content behind paywall
• Payments handled by Stripe
• Best Next.js 13 practices to ensure UI does not get broken when the content is loading

---

Tech Stack

Client: Next.js 13, Shadcn UI, TailwindCSS, TypeScript

Server: SanityCMS, TypeScript, Prisma, PlanetScale

Authentication: Clerk

Payments: Stripe

---

Screenshots

Hero Section - Dark Mode

Hero Section - Light Mode

About Page

Course Page - Guarded by middleware and paywall

Blogs Page

Pricing Page

User Management - 1

User Management - 2

Mobile View

Navbar Responsive

Stripe Checkout

Logout Stage

Authentication Modal

---

Run Locally

Clone the project

  git clone https://github.com/Devrajsinh-Jhala/PetsLife

Go to the project directory

  cd PetsLife

Install dependencies

  npm install

Start the server

  npm run dev

Make sure to include the environment variables listed in the below section.

---

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

NEXT_PUBLIC_SANITY_PROJECT_ID

NEXT_PUBLIC_SANITY_DATASET

NEXT_PUBLIC_SANITY_API_VERSION

DATABASE_URL

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

STRIPE_SECRET_KEY

STRIPE_WEBHOOK_SECRET

NEXTAUTH_URL

NEXTAUTH_SECRET

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

CLERK_SECRET_KEY

---

Appendix

Don't forget to leave a star if you like my work and you can give your valuable feedback to me by connecting me on socials. Links are given below:

Github

LinkedIn

Twitter

---

Authors

• @Devrajsinh Jhala