🩺 MediConnect – Patient Healthcare App

A modern, scalable healthcare application for patients built with React Native

Book appointments • View prescriptions • Manage medical data — all in one place

---

🧭 Table of Contents

• ✨ Features
• 🛠️ Tech Stack
• 📂 Project Structure
• 🖼️ Screenshots
• 🚀 Getting Started
  • 📋 Prerequisites
  • 📱 Frontend Setup
  • 🔧 Backend Setup
• 🔐 Authentication Flow
• 🤝 Contributing
• 📧 Contact
• 📄 License

---

✨ Features

🔐	Secure Authentication OTP-based login with JWT tokens and Google OAuth support
🔍	Doctor Search Find healthcare providers by specialty, location, and availability
📅	Appointment Booking Schedule and manage appointments with ease
💊	Prescription Management View and track your prescriptions digitally
📋	Medical Records Access your complete medical history and information
👤	Profile Management Update personal information and app preferences
🏠	Dashboard Clean, intuitive home screen with quick access to key features
📱	Responsive Design Optimized for mobile with component-based architecture

---

🛠️ Tech Stack

Frontend

• React Native - Cross-platform mobile development
• React.js - Web version (planned)
• Native Components - Custom styling and UI components

Backend

• Node.js - Runtime environment
• Express.js - Web application framework
• PostgreSQL - Database (hosted on NEON)

Authentication & Security

• JWT - JSON Web Tokens for secure authentication
• Google OAuth - Social login integration
• OTP Email - One-time password verification

Additional Tools

• Nodemailer - Email service for OTP delivery
• Sessions - User session management

---

📂 Project Structure

MediConnect/
├── 📱 App/                         # React Native Application
│   ├── 🧩 components/              # Reusable UI components
│   ├── 📺 screens/                 # Application screens
│   ├── 🎨 constants/               # Colors, themes, and constants
│   ├── 🧭 navigation/              # Tab & Stack navigation setup
│   └── 🖼️ assets/                  # Images, icons, and static files
│       └──Application assets        # Application images
│
├── 📸 App_pictures/                # Screenshots for documentation
│   └── picture (1-9).png          # App screenshots
│
├── 🔧 Backend/                     # Backend API (separate repository)
└── 📄 README.md                    # Project documentation

---

🖼️ Screenshots

📱 Mobile App Preview

---

🚀 Getting Started

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn
• Android Studio (for Android development)
• Xcode (for iOS development - macOS only)
• PostgreSQL database access

📱 Frontend Setup

1. Clone the repository

   git clone https://github.com/Adeel-116/Medi-Connect-app.git
   cd Medi-Connect-app

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   # For Expo CLI
   npx expo start
   
   # For React Native CLI
   npx react-native run-android  # Android
   npx react-native run-ios      # iOS (macOS only)

⚠️ Important: Make sure you have Android Studio with SDK environment properly configured for Android development.

🔧 Backend Setup

The backend is maintained in a separate repository for better organization.

1. Clone the backend repository

   git clone https://github.com/Adeel-116/Medi-Connect-app-Backend.git
   cd Medi-Connect-app-Backend

2. Install backend dependencies

   npm install

3. Environment Configuration

   Create a .env file in the backend root directory:

   # Server Configuration
   PORT=3000
   
   # Database
   DATABASE_URL=your_neon_postgresql_connection_string
   
   # Email Service (for OTP)
   EMAIL=your_email@example.com
   APP_PASSWORD=your_email_app_password
   
   # Google OAuth
   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   
   # JWT Secret
   JWT_SECRET=your_jwt_secret_key

4. Start the backend server

   npm start
   # or
   node index.js

The backend will be available at http://localhost:3000

---

🔐 Authentication Flow

Our secure authentication system follows these steps:

graph TD
    A[User enters email] --> B[System sends OTP via email]
    B --> C[User enters OTP code]
    C --> D{OTP Valid?}
    D -->|Yes| E[Generate JWT Token]
    D -->|No| F[Show error message]
    E --> G[Initialize user session]
    G --> H[Redirect to dashboard]
    F --> C
    
    I[Google OAuth Option] --> J[Google authentication]
    J --> E

Loading

Authentication Methods:

• 📧 Email + OTP: Primary authentication method using Nodemailer
• 🔑 Google OAuth: Social login integration
• 🛡️ JWT Tokens: Secure session management
• 🔄 Session Persistence: Automatic login for returning users

---

🤝 Contributing

We welcome contributions! Here's how you can help make MediConnect better:

Getting Started with Contributions

1. Fork the repository

   git fork https://github.com/Adeel-116/Medi-Connect-app.git

2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes

   • Follow the existing code style
   • Add comments for complex logic
   • Test your changes thoroughly

4. Commit your changes

   git commit -m "✨ Add amazing feature"

5. Push to your branch

   git push origin feature/amazing-feature

6. Open a Pull Request

   • Describe your changes clearly
   • Include screenshots if applicable
   • Reference any related issues

Code Style Guidelines

• Use meaningful variable and function names
• Follow React Native best practices
• Maintain consistent indentation
• Add JSDoc comments for functions
• Write unit tests for new features

---

📧 Contact

Muhammad Adeel

🚀 MERN Stack Developer & React Native Expert

---

Need help setting up the app or have questions? Don't hesitate to reach out!

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License - Feel free to use this project for learning and development purposes.

---

💙 Built with passion by Muhammad Adeel

Empowering healthcare through technology

⭐ Star this repo if you found it helpful!