MyPetCard

MyPetCard is a project developed to manage and organize pet-related information. It provides a user-friendly interface for storing and accessing details about pets, including their names, breeds, ages, and medical histories.

Table of Contents

• Features
• Technologies Used
• Installation
• Usage
• Screenshots

Features

• Pet Profiles: Create and manage individual profiles for each pet.
• Medical Records: Keep track of vaccinations, treatments, and appointments.
• User Authentication: Secure login and registration system.
• Responsive Design: Optimized for both desktop and mobile devices.

Technologies Used

• Frontend: React Native, Tailwind
• Backend: Node.js, Express
• Database: MySQL
• Authentication: JWT (JSON Web Token)

Installation

To run the project locally:

1. Clone the repository:

   git clone https://github.com/deanvidovic/MyPetCard.git
   cd MyPetCard

2. Install backend dependencies:

   cd backend
   npm install

3. Install frontend dependencies:

   cd frontend
   npm install

4. Setup environment variables:

• Create a .env file in the backend directory with the following variables:

  # Backend port
  PORT=5000
  
  # MySQL database configuration
  DB_HOST=localhost
  DB_USER=your_mysql_username
  DB_PASSWORD=your_mysql_password
  DB_NAME=your_database_name
  
  # JWT secret for signing tokens
  SECRET_KEY=your_jwt_secret
  
  # Google OAuth credentials
  GOOGLE_WEB_CLIENT_ID=your_google_web_client_id
  GOOGLE_ANDROID_CLIENT_ID=your_google_android_client_id
  GOOGLE_IOS_CLIENT_ID=your_google_ios_client_id

• Create a .env file in the frontend directory with the following variables:

  # Backend API URLs
  BASE_URL=http://your-production-backend.com
  BASE_URL_EMULATOR=http://localhost:5000   # for local development
  
  # Google OAuth Client IDs
  GOOGLE_WEB_CLIENT_ID=your_google_web_client_id
  GOOGLE_IOS_CLIENT_ID=your_google_ios_client_id
  GOOGLE_ANDROID_CLIENT_ID=your_google_android_client_id
  
  # Stripe
  STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key

Usage

1. Navigate to frontend folder:

   cd frontend

2. Run this command:

   npm run android

3. Navigate to backend folder:

   cd backend

4. Run this command:

   npm run start:dev

Screenshots

Welcome screen

---

Register and login screens

---

My pets screen

---

Vets screen

---

My profile screen