ARKA

Veterinary Clinic Landing Page and Appointment Booking System

Report Bug · Request Feature

Table of Contents

1. About The Project
2. Tech Stack
3. Getting Started
4. Contributing
5. License
6. Contact
7. ToDo

About the Project

https://arka-weterynaria.pl

This project is a re-build of the Arka Weterynaria website I receintly build with Remix and MongoDB Atlas for one of my clients in Poland. I decided to re-build it with the latest and greatest in tech for my own learning purposes.

The client wanted a simple website with a contact form and a full booking management system, where he would be able to confirm or reject bookings and notify the client via email. The website is hosted on Vercel. When completed, I intend to replace the original website with this rebuild.

This project is currently in development. Please check back soon.

(back to top)

Tech Stack

• Framework: Next.js 13
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Database: MySQL (PlanetScale)
• ORM: Drizzle ORM
• Authentication: Clerk
• Forms: React Hook Form
• Email: React Email and Resend
• Validations: Zod
• Hosting: Vercel
• Project Management: Jira

(back to top)

Getting Started

Prerequisites:

• Node.js (version 18 or higher)
• pNPM (alternatively, you can use npm or yarn)
  

Installation:

1. Clone the repo

   git clone https://github.com/pjborowiecki/ARKA-Veterinary-Clinic-Page-and-Appointment-Booking-System.git

   
   

2. Install the required packages

    pnpm install

   
   

3. Rename a .env.example file in the project's root directory and fill in the required values. See below for details on obtaining the keys:
   

   • Clerk:
     
     

     • Create a new account with Clerk
     • ToDo: Complete the setup instructions
       
       

   • PlanetScale:
     
     

     • Create a new account with PlanetScale
     • ToDo: Complete the setup instructions
       
       

   • PlanetScale:
     
     

     • Create a new account with Resend
     • ToDo: Complete the setup instructions
       
       

   • Google Maps:
     
     

     • ToDo: Complete the setup instructions
       
       

(back to top)

Development:

1. Start the development server

   pnpm dev

   
   

2. Your app should be available at http://localhost:3000
   

(back to top)

Deployment:

ToDo: Complete the deployment instructions

(back to top)

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.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Run code linting (pnpm lint)
5. Run code formatting (pnpm format)
6. Push to the Branch (git push origin feature/AmazingFeature)
7. Open a Pull Request

(back to top)

License

Distributed under the MIT License.

(back to top)

Contact

Piotr Borowiecki - @pjborowiecki - hello@pjborowiecki.com

(back to top)

ToDo

• Style and complete the appointment booking dialog
• Fix urls and paths (dashboard, reservations, settings, etc.)
• Decide on the type of time slots and update the data schema
• Fix server actions
• Implement the landing page:
  • Add navbar
  • Add mobile menu
  • Add hero section
  • Add about section
  • Add services section
  • Add contact section
  • Add footer
• Investigate the opacity issue (e.g., /10)
• Add favicon
• Add OpenGRaph image (og.jpg)
• Add robots.txt file
• Add sitemap.xml file
• Add site description in siteConfig
• Improve README

(back to top)