Welcome to the PetSoft Project! This is a comprehensive full-stack application designed for seamless pet care management. Dive into a world where managing your pet's needs becomes as easy as a few clicks.
Experience PetSoft in action: 🔗 Live Application
To get a hands-on feel of the PetSoft experience, use the following demo credentials:
- Email:
example@mail.com - Password:
example - Test Card for Stripe Payments:
4242 4242 4242 4242
PetSoft is built to streamline the management of pet care services. It offers:
- Pet Listing: A comprehensive view of all pets with a flexible search function.
- Pet Management: Easily create, edit, and manage pet details.
- User Authentication: Robust system including signup, login, and logout functionalities.
- Stripe Payments: Integrated Stripe (test-mode) for secure, hassle-free payments.
Navigate through a variety of pages designed for a user-friendly experience:
- Homepage: A captivating marketing page that outlines the features and benefits of PetSoft.
- Login/Signup Pages: Secure and straightforward user onboarding.
- Dashboard: A central hub for managing pet care tasks.
- Account Management: Personalize and manage account details.
PetSoft harnesses a range of modern technologies:
- Frontend: Next.js 14 with Server Components and Server Actions.
- Form Management: Utilizing
react hook formanduseOptimistic,useFormStatushooks for efficient form handling. - Validation: Robust data validation with Zod.
- UI Components: Styled with
shadcn-uicomponent library. - Database Management: Prisma for Postgres DB interactions and SQLite for development.
- Authentication: Secure user handling with NextAuth.
- Payments: Stripe for payment processing and Ngtok for local webhook testing from Stripe.
ByteGrad for the inspiring Professional React & Nextjs Course.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.