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.tsPetSoft 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:3000All 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 buildContributions 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent