Explore the live demonstration of the project: nextjs14-petsoft
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
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.
To get this project up and running in your development environment, follow these step-by-step instructions.
In order to install and run this project locally, you would need to have the following installed on your local machine.
- Clone the repository
git clone
- Change the working directory
cd nextjs14-petsoft
- Install dependencies
npm install
- Start the development server
npm run dev
- Open the project in your browser
http://localhost:3000
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"
You can create an optimized production build with the following command:
npm run build
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:
- Fork the repo
- Create a new branch (
git checkout -b improve-feature
) - Make the appropriate changes in the files
- Commit your changes (
git commit -am 'Improve feature'
) - Push to the branch (
git push origin improve-feature
) - Create a Pull Request ๐
petsoft is open source software licensed as MIT and is free to use โ See LICENSE for more details.
If you want to contact me you can reach me at..... LINK for more details.