Next.js 14 PetSoft 🐕

🌐 Live Demo

Explore the live demonstration of the project: nextjs14-petsoft

📝 Description

PetSoft Manage Your pet daycare with ease. Use PetSoft to easily keep track of pets under your care.

Folder Structure

nextjs14-devoverflow/
├── actions/
├   ├── petActions.ts
├── app/
├   ├── (app)/
├   ├   ├── app/
├   ├   ├   ├── account/
├   ├   ├   ├   └── page.tsx
├   ├   ├   ├── dashboard/
├   ├   ├   ├   └── page.tsx
├   ├   ├   └── layout.tsx
├   ├── (auth)/
├   ├   ├   ├── login/
├   ├   ├   ├   └── page.tsx
├   ├   ├   ├── payment/
├   ├   ├   ├   └── page.tsx
├   ├   ├   ├── signup/
├   ├   ├   ├   └── page.tsx
├   ├   ├   └── layout.tsx
├   ├── (marketing)/
├   ├   └── page.tsx
├   ├── icon.svg
├   ├── layout.tsx
├   └── api/
├       ├── stripe/
├       ├   └── route.ts
├── components/
├   ├── context/
├   ├   ├── pet-context-provider.tsx
├   ├   ├── search-context-provider.tsx
├   └── ui/ (generated by shadcn-ui)
├       ├── app-footer.tsx
├       ├── app-header.tsx
├       ├── auth-form-btn.tsx
├       ├── auth-form.tsx
├       ├── background-pattern.tsx
├       ├── branding.tsx
├       ├── contenBlock.tsx
├       ├── h1.tsx
├       ├── logo.tsx
├       ├── pet-button.tsx
├       ├── pet-form-btn.tsx
├       ├── pet-form.tsx
├       ├── petDetails.tsx
├       └── petlist.ts
├       ├── search-form.tsx
├       └── sign-out-btn.ts
├       └── stats.ts
├── constants/
├   ├── filters.ts
├   └── index.ts
├── content/
├   ├── countries.json
├   └── jsearch.json
├── context/
├   └── ThemeProvider.ts
├── prisma/
├   ├── schema.prisma
├   ├── seed.ts
├── lib/
├   ├── auth-edge.ts
├   ├── constant.ts
├   ├── db.ts
├   ├── hooks.ts
├   ├── next-auth.d.ts
├   ├── server-utils.ts
├   ├── types.ts
├   ├── utils.ts
├   ├── validation.ts
├── public/
├   ├── logo.svg
├── styles/
├   ├── global.css
├── .eslintrc.json
├── .gitignore
├── README.md
├── components.json
├── middleware.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
└── tsconfig.ts

✨ Technologies Used

PetSoft is built using the following technologies:

• TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
• Prettier: Prettier is an opinionated code formatter.
• Clerk: Next auth is a developer-first authentication API that handles all the logic for user sign up, sign in, and more.
• Shadcn-UI: Shadcn UI is a React UI library that helps developers rapidly build modern web applications.
• Postgresql: Postgresql is a powerful, open-source object-relational database system.
• Prisma: Prisma is a modern database access toolkit that makes it easy to build type-safe, composable database access.
• reacthook-form: React Hook Form is a performant, flexible, and extensible forms with easy-to-use validation.
• Zod: Zod is a TypeScript-first schema declaration and validation library.
• Stripe: Stripe is a suite of payment APIs that powers commerce for online businesses of all sizes.
• Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

🧰 Get Started

To get this project up and running in your development environment, follow these step-by-step instructions.

📋 Prerequisites

In order to install and run this project locally, you would need to have the following installed on your local machine.

• Node.js
• NPM
• Git

🚀 Installation

1. Clone the repository

git clone

2. Change the working directory

cd nextjs14-petsoft

3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Open the project in your browser

http://localhost:3000

📜 Scripts

All scripts are defined in the package.json file. Here is a list of all scripts:

Script	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run start	Start your production site locally
npm run lint	Run ESLint

Environment variables[^12] can be used for configuration. They must be set before running the app.

Create a .env file in the root directory of the project and add the following environment variables:

POSTGRES_URL=<YOUR_API_KEY>
POSTGRES_PRISMA_URL=<YOUR_API_KEY>
POSTGRES_URL_NO_SSL=<YOUR_API_KEY>
POSTGRES_URL_NON_POOLING=<YOUR_API_KEY>
POSTGRES_USER="default"
POSTGRES_HOST=<YOUR_API_KEY>
POSTGRES_PASSWORD=<YOUR_PASSWORD>
POSTGRES_DATABASE="verceldb"

AUTH_SECRET=<YOUR_AUTH_SECRET_KEY>


NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<YOUR_STRIPE_API_KEY>

STRIPE_SECRET_KEY=<YOUR_SECRET_STRIPE_API_KEY>
STRIPE_WEBHOOK_SECRET=<YOUR_STRIPE_WEBHOOK_API_KEY>


CANONICAL_URL="http://localhost:3000"

🚀 Deployment

Deploy to production (manual)

You can create an optimized production build with the following command:

npm run build

🔧 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

To fix a bug or enhance an existing module, follow these steps:

1. Fork the repo
2. Create a new branch (git checkout -b improve-feature)
3. Make the appropriate changes in the files
4. Commit your changes (git commit -am 'Improve feature')
5. Push to the branch (git push origin improve-feature)
6. Create a Pull Request 🎉

📝 License

petsoft is open source software licensed as MIT and is free to use — See LICENSE for more details.

📧 Contact

If you want to contact me you can reach me at..... LINK for more details.