🚀 Medify-WebApp

A Full-Stack Web Application built collaboratively using modern frontend and backend technologies.
Designed with a scalable folder structure and clean architecture principles.

---

👥 Team Collaboration

Role	Contributor
Frontend Developer	Wajiha Zehra
Backend Developer	Rehan

This project was developed using a structured Git workflow with feature branches and pull requests.

---

🏗 Architecture Overview

• Client: React Single Page Application (Vite)
• Server: RESTful API (Node.js/Express)
• Database: PostgreSQL
• Authentication: JWT

The application follows separation of concerns:

• Frontend handles UI & API integration
• Backend handles business logic & database operations

---

📂 Project Structure

Medify-WebApp/
│
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── context/
│   ├── utils/
│   ├── App.jsx
│   └── api.js
├── package.json
├── vite.config.js
│
├── server/                     # Backend (Node/Express)
│   ├── controllers/
│   ├── routes/
│   ├── middleware/
│   ├── db.js
│   ├── server.js
│   ├── package.json
│   └── .env
│
├── .gitignore
└── README.md

---

💻 Tech Stack

🎨 Frontend

• React
• JavaScript (ES6+)
• TailwindCSS / Vanilla CSS
• Vite

⚙ Backend

• Node.js
• Express.js
• PostgreSQL
• PostgreSQL Node Client (pg)

🔐 Authentication

• JWT Auth
• Bcrypt Password Hashing

---

✨ Key Features

• User registration & login
• Role-based Dashboard (Consumer, Pharmacist, SuperAdmin)
• Database schema integrated via PostgreSQL
• AI Chat Support (Google Gemini API)
• Protected API routes
• Responsive UI
• Error handling & validation

---

👩‍💻 Frontend Contributions (Wajiha Zehra)

• Designed and structured frontend architecture
• Built reusable UI components
• Integrated REST APIs for user auth and data
• Implemented state management using Context API
• Created responsive layouts
• Organized modular folder structure

---

👨‍💻 Backend Contributions (Rehan)

• Designed PostgreSQL database schema
• Built REST API endpoints
• Implemented Google Gemini AI Chat API
• Set up JWT authentication logic
• Created middleware for routing & validation
• Handled server-side error management

---

🔄 Git Workflow

• Feature-based branches
• Pull requests for merging
• Structured commit messages

Example commit format:

feat(frontend): implement dashboard UI
fix(api): resolve token validation issue
refactor(server): reorganize route structure

---

🚀 Installation & Setup

1️⃣ Clone Repository

git clone https://github.com/wajihacodeofficial/Medify-WebApp.git

---

2️⃣ Setup Backend

cd Medify-WebApp/server
npm install
npm start

Backend runs on: http://localhost:5000

---

3️⃣ Setup Frontend

cd Medify-WebApp
npm install
npm run dev

Frontend runs on: http://localhost:5173

---

🔑 Environment Variables

Create a .env file in the server folder:

PORT=5000
DATABASE_URL=your_postgresql_database_url
GEMINI_API_KEY=your_gemini_api_key
JWT_SECRET=your_jwt_secret_key

---

🔐 Demo Credentials

To login to predefined roles, use the following:

• Consumer: sarah@medify.org | Password: Customer@2024
• Pharmacist: dromar@medify.org | Password: Pharma@2024
• SuperAdmin: admin@medify.org | Password: SuperAdmin@2024

---

📸 Screenshots

(Add application screenshots here)

---

🌍 Deployment

Frontend: (Vercel / Netlify / etc.)
Backend: (Render / Railway / etc.)
Database: (PostgreSQL on Supabase / Render / etc.)

Live Demo: [Add Link Here]

---

📚 Learning Outcomes

• Full-stack project architecture
• Frontend-backend integration
• Node.js + PostgreSQL integration
• Git collaboration workflow

---

📌 Future Improvements

• Add comprehensive unit testing
• Improve performance optimization
• Enhance UI design system

---

📄 License

This project is for educational and portfolio purposes.