MediCart

Your trusted partner in healthcare excellence

(Developer: Alexander Strauch)

Live site

Table of contents

1. Introduction

• Project description
• Purpose

2. UX

• User demographic
• User goals
• User expectations
• User stories

3. Design

• Colors
• Fonts
• Wireframes

4. Features

• Navigation
• Homepage
• Products
• Shopping cart
• Checkout
• User account
• Security features
• Admin features
• Wishlist
• Reviews
• Contact
• Additional features

5. Future features
6. Database
7. Technologies
8. Agile tools
9. Marketing
10. Testing

• User stories testing
• Manual testing
• Responsiveness testing
• Browser compatibility
• Lighthouse testing
• Code validation
• Bugs

11. Deployment
12. Forking
13. Credits

• Code resources
• Media
• Educational resources

14. Acknowledgements

Introduction

Project description

MediCart is a comprehensive e-commerce platform specializing in healthcare products and medical supplies. Built with Django and integrated with Stripe for secure payments, the platform offers a user-friendly interface for both healthcare professionals and individual consumers to purchase medical supplies, equipment, and personal care items.

Key features:

• Intuitive product catalog with categorized medical supplies
• Secure user authentication and profile management
• Real-time shopping cart functionality
• Stripe payment integration for secure transactions
• Newsletter subscription for updates and offers
• Responsive design for all devices
• SEO-optimized with accessibility features

Purpose

MediCart addresses the growing need for a reliable, user-friendly platform where healthcare professionals and individuals can easily purchase quality medical supplies and equipment. The platform aims to:

1. Provide easy access to essential medical supplies
2. Ensure a secure and efficient shopping experience
3. Maintain high standards of quality and reliability
4. Offer competitive pricing and regular updates on new products
5. Create a trusted community of healthcare professionals and consumers

Back to table of contents

UX

User demographic

The MediCart platform caters to several key user groups:

1. Healthcare professionals

   • Doctors and nurses in private practice
   • Medical clinic staff
   • Hospital department managers
   • Healthcare facility administrators

2. Healthcare facilities

   • Private medical clinics
   • Dental practices
   • Physiotherapy centers
   • Care homes and hospices
   • Diagnostic centers

3. Individual consumers

   • Patients with chronic conditions requiring regular supplies
   • Caregivers and family members managing medical needs
   • Health-conscious individuals seeking medical supplies
   • Home healthcare providers

4. Medical students and educators

   • Medical schools and training institutions
   • Healthcare education providers
   • Clinical skills labs

5. Small business owners

   • Independent pharmacies
   • Medical supply stores
   • Alternative medicine practitioners

User goals

• Convenient access to medical supplies: Users want a hassle-free experience to browse, compare, and purchase a wide range of healthcare products and medical supplies from a single platform without visiting multiple stores.

• Secure and seamless transactions: Ensuring that all financial transactions are secure, users aim to make payments quickly and safely through trusted payment gateways like Stripe.

• Efficient order management: Users expect an intuitive interface for tracking orders, managing returns, and accessing their purchase history to streamline their healthcare supply management.

• Customized user experience: Healthcare professionals and individual consumers seek tailored recommendations, relevant product categories, and personalized interfaces to meet their specific needs efficiently.

• Reliable customer support: Users look for accessible customer service to assist with inquiries, resolve issues promptly, and provide support throughout their shopping experience on the platform.

User expectations

• User-friendly interface: Users expect a clean, intuitive, and easy-to-navigate interface that allows them to find products quickly, with clear categorization and search functionality.

• Wide range of products: Users anticipate a comprehensive selection of healthcare products and medical supplies, covering everything from basic personal care items to specialized medical equipment.

• Fast and secure checkout: Users expect a streamlined checkout process with multiple payment options, including secure transactions through Stripe, and minimal friction during the purchase.

• Accurate product information: Users look for detailed and accurate product descriptions, including specifications, usage instructions, and reviews, to make informed purchasing decisions.

• Timely delivery and updates: Users expect prompt shipping with regular updates on the status of their orders, including estimated delivery times and tracking information.

User stories

User

• As a new customer, I want to create an account so that I can purchase medical supplies.

• As a registered user, I want to log in to my account to access my profile and orders.

• As a registered user, I want to manage my profile information and preferences.

• As a customer, I want to browse medical products by category so I can find what I need.

• As a customer, I want to view detailed product information before purchasing.

• As a customer, I want to manage items in my shopping cart.

• As a customer, I want a smooth checkout process to complete my purchase.

• As a customer, I want to view my past orders.

• As a user, I want to receive notifications for authentication-related actions.

• As a customer, I want to receive notifications for cart-related actions.

• As a customer, I want to receive notifications during the checkout process.

• As a user, I want to receive clear notifications when errors occur.

• As a customer, I want to read and write product reviews.

• As a customer, I want to save items for future purchase.

• As a customer, I want to be able to contact the store with questions or concerns so that I can get assistance with my inquiries and receive timely responses.

Site owner

• As an admin, I want to manage the product inventory.

• As an admin, I want to manage and process orders.

• As an admin, I want to manage user accounts.

• As an admin, I want to receive notifications for product management actions.

Back to table of contents

Design

Colors

Logo color (click me)

Welcome message color (click me)

Social media icons normal color (click me)

Social media icons hover color (click me)

Link color (click me)

Garbage can color (click me)

Cancel button color (click me)

Remove button color (click me)

Fonts

• Poppins: Main body text

  • Clean and modern sans-serif font
  • Excellent readability across different screen sizes
  • Used for general content, descriptions, and form elements

• Montserrat: Headings and titles

  • Bold and professional appearance
  • Used for h1-h6 elements
  • Provides clear visual hierarchy

Wireframes

Desktop (click me)

Tablet (click me)

Mobile (click me)

Back to table of contents

Features

Navigation

• Responsive navigation bar that adapts to different screen sizes
• Search functionality to find products quickly
• Shopping cart icon with real-time item count
• User account dropdown menu for quick access to profile features
• Category navigation for easy product browsing

Homepage

• Hero section with featured products
• Category showcase with direct links
• Newsletter signup form
• Quick links to popular medical supplies

Products

• Product catalog with filtering and sorting options
• Detailed product pages with:
  • High-quality product images
  • Detailed descriptions
  • Price information
• Category-based browsing
• Search functionality with filters

Shopping cart

• Real-time cart updates
• Quantity adjustment functionality
• Running total calculation
• Product image thumbnails in cart
• Remove item functionality
• Clear cart option
• Cart total and delivery cost calculation

Checkout

• Secure payment processing through Stripe
• Order summary before payment
• Delivery information form
• Secure payment with error handling
• Loading overlay during payment processing

User account

• User registration and authentication
• Profile management
• Order history view
• Default delivery information storage
• Password reset functionality
• Email verification

Security features

• Secure user authentication
• Protected admin routes
• Secure payment processing
• CSRF protection
• Secure password handling

Admin features

• Product management (add, edit, delete)
• User management
• Category management
• Stock level monitoring

Wishlist

• Save products for future purchase
• Persistent across sessions
• Remove items from wishlist
• Visual heart icon indicator
• One wishlist per user

Reviews

• Star rating system (1-5)
• Written review comments
• Review moderation system
• One review per product per user
• Display average product rating
• Review date tracking

Contact

• User-friendly contact form
• Subject categorization
• Auto-fill for logged-in users
• Email notifications
• Status tracking for inquiries
• Admin response management

Additional features

• Responsive design for all screen sizes
• Error handling with user-friendly messages
• Form validation with clear error messages
• Newsletter subscription functionality

Back to table of contents

Future features

• Product comparison

• Guest checkout

• Order tracking

• Delivery preferences

• Sales analytics

• Prescription management

• Live chat support

• Subscription service

• Mobile app

• AI product recommendations

• Real-time search results

Back to table of contents

Database

Database

erDiagram
    User ||--o{ UserProfile : has
    User ||--o{ Order : places
    User ||--o{ Address : has
    User ||--o{ Review : writes
    User ||--o{ ContactRequest : submits
    User ||--|| Wishlist : has
    User ||--o{ NewsletterSubscription : subscribes
    UserProfile ||--o{ Address : contains
    Product ||--o{ OrderItem : contains
    Product ||--o{ CartItem : contains
    Product ||--o{ Review : receives
    Product ||--o{ WishlistItem : saved_in
    Product }|--|| Category : belongs_to
    Order ||--|{ OrderItem : contains
    Order ||--|| Address : ships_to
    Cart ||--|{ CartItem : contains
    Cart ||--|| User : belongs_to
    Wishlist ||--|{ WishlistItem : contains

    User {
        int id PK
        string email
        string password
        boolean is_active
        boolean is_staff
        datetime date_joined
        datetime last_login
    }

    UserProfile {
        int id PK
        int user_id FK
        string first_name
        string last_name
        string phone_number
        boolean newsletter_subscribed
        datetime created_at
        datetime updated_at
    }

    Address {
        int id PK
        int user_id FK
        string street_address1
        string street_address2
        string city
        string state
        string postal_code
        string country
        boolean default_shipping
        boolean default_billing
    }

    Product {
        int id PK
        int category_id FK
        string name
        string brand
        string slug
        text description
        decimal price
        int stock
        string sku
        string image
        float avg_rating
        boolean is_active
        datetime created_at
        datetime updated_at
    }



    Category {
        int id PK
        string name
        string slug
        text description
        boolean is_active
        datetime created_at
        datetime updated_at
    }

    Order {
        int id PK
        int user_id FK
        int address_id FK
        string order_number
        decimal total
        decimal delivery_cost
        decimal grand_total
        string status
        string payment_status
        string shipping_method
        string stripe_pid
        datetime created_at
        datetime updated_at
    }

    OrderItem {
        int id PK
        int order_id FK
        int product_id FK
        string product_name
        decimal price
        int quantity
        decimal line_total
        datetime created_at
    }

    Review {
        int id PK
        int user_id FK
        int product_id FK
        string title
        int rating
        text comment
        boolean is_approved
        datetime created_at
        datetime updated_at
    }

    ContactRequest {
        int id PK
        int user_id FK
        string email
        string subject
        text message
        string status
        datetime created_at
        datetime updated_at
    }

    Wishlist {
        int id PK
        int user_id FK
        datetime created_at
    }

    WishlistItem {
        int id PK
        int wishlist_id FK
        int product_id FK
        datetime added_at
    }

    NewsletterSubscription {
        int id PK
        int user_id FK
        string email
        boolean is_active
        datetime subscribed_at
        datetime unsubscribed_at
    }

    Cart {
        int id PK
        int user_id FK
        decimal total
        datetime created_at
        datetime updated_at
    }

    CartItem {
        int id PK
        int cart_id FK
        int product_id FK
        int quantity
        decimal price
        decimal line_total
        datetime added_at
        datetime updated_at
    }

Loading

Table descriptions

User

• Core user table for authentication and basic user information
• Email and password required for login
• Staff flag controls admin access
• Tracks account status and last login

UserProfile

• Extended user information including name and contact details
• One profile per user (1:1 relationship)
• Newsletter preference tracked here
• Phone number stored in E.164 format

Address

• Full international address format

Product

• Complete product details including brand and SKU
• Stock levels actively managed
• Average rating calculated from reviews
• SEO-friendly slugs for URLs

Category

• Hierarchical product organization
• Active/inactive status for seasonal categories
• SEO-friendly slugs for URLs
• Created/updated timestamps for auditing

Order

• Full order lifecycle tracking
• Multiple status fields: order status, payment status, shipping
• Links to shipping address and payment info
• Calculates delivery and grand totals

OrderItem

• Captures product details at time of purchase
• Stores individual and line total prices
• Quantity and product reference maintained
• Created timestamp for order history

Cart

• One active cart per user
• Maintains running total of items
• Timestamps for abandonment tracking
• Session-based for guest users

CartItem

• Stores current product price
• Calculates line totals automatically
• Tracks quantity changes
• Records when items were added

Review

• Rating system (1-5 stars)
• Moderation through approval flag
• Title and detailed comment fields
• One review per product per user

ContactRequest

• Handles both user and guest inquiries
• Email required for guest submissions
• Status tracking for support workflow
• Timestamps for response time monitoring

Wishlist

• One wishlist per user enforced
• Persistent across sessions
• Creation date for analytics
• Easy add-to-cart functionality

WishlistItem

• Links products to user's wishlist
• Tracks when items were added
• No quantity tracking needed
• Allows duplicate removal

NewsletterSubscription

• Handles both user and guest subscriptions
• Active flag for subscription status
• Tracks subscribe/unsubscribe dates
• GDPR compliance support

Back to table of contents

Technologies

Core technologies

• Python 3.9+: The primary programming language used for the backend development
• Django 4.2.17: High-level Python web framework that encourages rapid development and clean, pragmatic design
• JavaScript: Used for frontend interactivity and dynamic content
• HTML5: Structure and content of web pages
• CSS3: Styling and responsive design
• Bootstrap 5: Frontend framework for responsive design and mobile-first approach
• SQLite3: Development database
• PostgreSQL: Production database

Authentication and user management

• django-allauth 0.58.2: Integrated set of Django applications addressing authentication, registration, account management
• django-countries 7.5.1: Provides country choices for use with forms, and a country field for models

Forms and styling

• django-crispy-forms 2.1: Controls the rendering behavior of Django forms
• crispy-bootstrap5 2023.10: Bootstrap 5 template pack for django-crispy-forms
• django-summernote 0.8.20.0: WYSIWYG editor for product descriptions

Payment processing

• Stripe 7.6.0: Payment processing integration for secure checkout

Image and file management

• Pillow 10.1.0: Python Imaging Library for image processing
• Cloudinary 1.36.0: Cloud-based image and video management
• django-cloudinary-storage 0.3.0: Cloudinary storage backend for Django

Email and marketing

• mailchimp-marketing 3.0.75: Mailchimp integration for email marketing and newsletter functionality
• Facebook business page: Facebook business page for brand presence, customer engagement, marketing & promotionm business information and customer service

Database and storage

• psycopg2-binary 2.9.9: PostgreSQL database adapter
• dj-database-url 2.1.0: Database configuration with URLs
• django-storages 1.14.2: Collection of custom storage backends for Django

Development and environment

• python-dotenv 1.0.0: Loads environment variables from a .env file
• whitenoise 6.6.0: Static file serving for Python web apps
• gunicorn 21.2.0: Python WSGI HTTP Server for UNIX

Development tools

• Git: Version control
• GitHub: Code repository and version control hosting
• GitPod: Cloud development environment
• Heroku: Cloud platform for deployment

Additional tools and services

• Font Awesome: Icon library
• Google Fonts: Web font library
• Chrome DevTools: Browser developer tools for testing and debugging
• W3C Validator: HTML and CSS validation
• JSHint: JavaScript code quality tool
• PEP8: Python code style guide
• Leonardo.ai: Product image generator
• Balsamiq: for wireframes
• Mermaid.js: for database schema

Back to table of contents

Agile tools

Project board (click me)

Back to table of contents

Marketing

mailchimp-marketing 3.0.75: Mailchimp integration for email marketing and newsletter functionality

Mailchimp email for newsletter subscription (click me)

Facebook business page: Facebook business page for brand presence, customer engagement, marketing & promotionm business information and customer service

Wireframe for Facebook business page (click me)

Business model

MediCart operates as a B2C (Business-to-Consumer) e-commerce platform specializing in medical supplies and healthcare products. The platform bridges the gap between healthcare product manufacturers and end consumers, including both individual customers and healthcare professionals.

Target market

• Individual consumers seeking medical supplies
• Healthcare professionals
• Small medical practices
• Home care providers
• Sports medicine practitioners

Revenue model

• Direct product sales
• Premium membership options
• Professional account benefits
• Bulk purchase discounts

Core business intent

1. Accessibility

   • Make medical supplies easily accessible to the public
   • Provide a user-friendly platform for healthcare product procurement
   • Offer competitive pricing through direct supplier relationships

2. Quality assurance

   • Partner with reputable medical supply manufacturers
   • Implement strict quality control measures
   • Maintain proper storage and handling standards

3. Customer education

   • Provide detailed product information
   • Offer usage guidelines and recommendations
   • Share healthcare-related content and updates

4. Professional services

   • Special accounts for healthcare professionals
   • Bulk ordering capabilities
   • Priority support for medical practices

Marketing strategies

Digital Marketing

1. Email marketing

   • Mailchimp newsletter integration
   • Segmented email campaigns
   • Personalized product recommendations
   • Health tips and product updates
   • Special offers and promotions
   • Abandoned cart recovery emails

2. Social media

   • Facebook business page
     • Regular product updates
     • Health tips and advice
     • Customer testimonials
     • Community engagement
     • Live Q&A sessions
     • Special offers and promotions

3. Content marketing

   • Health and wellness blog
   • Product usage guides
   • Educational content
   • Industry news and updates
   • Expert interviews

4. SEO strategy

   • Healthcare-focused keywords
   • Local SEO for medical practices
   • Product-specific optimization
   • Medical terminology integration

Customer retention

1. Loyalty program

   • Points system for purchases
   • Member-only discounts
   • Early access to new products
   • Referral rewards

2. Professional partnerships

   • Healthcare provider discounts
   • Bulk purchase programs
   • Professional account benefits

3. Customer service

   • Dedicated support team
   • Product expertise
   • Quick response times
   • Multiple contact channels

Marketing channels

1. Primary channels

   • Website/E-commerce Platform
   • Email Marketing (Mailchimp)
   • Facebook Business Page

2. Secondary channels

   • Professional healthcare networks
   • Medical conferences
   • Healthcare industry events
   • Local medical practices

Future marketing plans

1. Platform expansion

   • Mobile app development
   • Additional social media platforms
   • Healthcare professional network

2. Content development

   • Video product guides
   • Expert webinars
   • Healthcare podcasts
   • Educational series

3. Partnership growth

   • Medical institution collaborations
   • Healthcare influencer partnerships
   • Industry event sponsorships

Back to table of contents

Testing

User stories testing

This outlines the testing procedures and results for each user story in the MediCart project. Each user story has been tested according to its acceptance criteria.

✅ = Passed | ❌ = Failed | 🟡 = Partially implemented | ⏳ = Not yet implemented

Epic 1: User authentication & profile management

User story	Testing steps	Expected result	Status
1.1 User registration	1. Navigate to registration page 2. Enter email and password 3. Submit registration form 4. Check email for verification 5. Click verification link	- Form submits successfully - Verification email received - Account created after verification - Welcome email received	✅
1.2 User login	1. Navigate to login page 2. Enter credentials 3. Test password reset	- Successful login - Password reset email received	✅
1.3 Profile management	1. Access profile settings 2. Update personal information 3. Add shipping address 4. View order history	- Information updates saved - Order history displayed correctly	✅

Epic 2: Product management

User story	Testing steps	Expected result	Status
2.1 Product browsing	1. Browse product categories 2. Apply filters 3. Test sorting options 4. Use search function	- Products display in grid - Filters work correctly - Sorting updates display - Search returns relevant results	✅
2.2 Product details	1. Click product card 2. View images and description 3. Check price and availability 4. Test "Add to Cart"	- Details page loads correctly - Images display properly - Product info is clear - Add to cart works	✅
2.3 Product reviews	1. Submit product review 2. Rate product 3. View other reviews	- Review submission works - Star rating system functions - Average ratings display on product cards	✅
2.4 Product comparison	1. Select products to compare 2. View comparison table 3. Test sharing function	- Comparison table displays - Features compared correctly - Sharing works	⏳
2.5 Real-time search	1. Type in search box 2. Check dropdown results 3. Test on mobile devices	- Results appear while typing - Dropdown is responsive - Works on all devices	⏳

Epic 3: Shopping cart & checkout

User story	Testing steps	Expected result	Status
3.1 Shopping cart management	1. Add items to cart 2. Update quantities 3. Remove items 4. Check cart persistence	- Items add/remove correctly - Quantities update - Totals calculate properly - Cart saves between sessions	✅
3.2 Checkout process	1. Proceed to checkout 2. Select shipping address 3. Enter payment info 4. Complete purchase	- Checkout flow works - Payment processes - Order confirms - Email received	✅
3.3 Guest checkout	1. Checkout as guest 2. Enter email 3. Complete purchase 4. Check order tracking	- Guest checkout works - Order processes - Tracking available - Account creation offered	✅
3.4 Wishlist	1. Click heart icon on product 2. View wishlist page 3. Remove from wishlist 4. Check persistence after logout	- Items add/remove from wishlist - Heart icon updates (red/grey) - Wishlist persists for users - Visual feedback shows	✅

Epic 4: Order management

User story	Testing steps	Expected result	Status
4.1 Order tracking	1. View order status 2. Check shipping updates 3. Test email notifications	- Status updates show - Shipping info accurate - Notifications received	⏳
4.2 Order history	1. View past orders 2. Download invoice 3. Test reorder function	- History displays correctly - Invoices download - Reorder works	🟡
4.3 Delivery preferences	1. Set delivery preferences 2. Add special instructions 3. Update notification settings	- Preferences save - Instructions recorded - Notifications work	⏳

Epic 5: Admin functionality

User story	Testing steps	Expected result	Status
5.1 Product management	1. Add new product 2. Edit existing product 3. Manage inventory	- Products add/edit - Inventory updates - Categories manage	✅
5.2 Order management	1. View orders 2. Update status 3. Search orders	- Orders viewable - Status updates - Search works	⏳
5.3 User management	1. Search users 2. Edit user roles 3. Manage accounts	- User search works - Roles update - Account management works	✅
5.4 Sales analytics	1. View dashboard 2. Generate reports 3. Export data	- Dashboard displays - Reports generate - Exports work	⏳
5.5 Customer support	1. View customer details 2. Modify orders 3. Track issues	- Customer info accessible - Order modifications work - Issue tracking functions	⏳
5.6 Customer request	1. Submit contact form 2. Check email confirmation 3. View in admin panel 4. Test auto-fill for logged-in users	- Form submits successfully - Confirmation emails send - Requests show in admin - User info pre-fills	✅

Epic 6: Future features

User story	Testing steps	Expected result	Status
6.1 Prescription management	1. Upload prescription 2. Verify process 3. Check reminders	- Upload works - Verification process - Reminders send	⏳
6.2 Live chat support	1. Start chat 2. Connect with staff 3. Rate session	- Chat connects - Staff available - Rating works	⏳
6.3 Subscription service	1. Set up subscription 2. Test billing 3. Modify schedule	- Subscription creates - Billing works - Modifications save	⏳
6.4 Mobile app	1. Install app 2. Test features 3. Check notifications	- App functions - Features work - Notifications receive	⏳
6.5 AI recommendations	1. Create health profile 2. Check recommendations 3. Test personalization	- Profile creates - Recommendations show - Personalization works	⏳

Epic 7: User notifications

User story	Testing steps	Expected result	Status
7.1 Authentication notifications	1. Complete registration 2. Login/logout 3. Reset password	- Success messages show - Login confirms - Reset notifications work	✅
7.2 Shopping cart notifications	1. Add to cart 2. Update quantity 3. Remove item	- Add confirms - Updates notify - Removal confirms	✅
7.3 Checkout notifications	1. Place order 2. Process payment 3. Complete checkout	- Order confirms - Payment notifies - Completion confirms	✅
7.4 Product management notifications	1. Add product 2. Update stock 3. Delete product	- Addition confirms - Stock alerts show - Deletion confirms	✅
7.5 Error Notifications	1. Test form validation 2. Trigger payment error	- Validation shows - Errors display	✅

Legend

• ✅ = Passed: Feature is fully implemented and all tests pass
• ❌ = Failed: Feature is implemented but tests are failing
• 🟡 = Partially implemented: Feature is partially complete or under development
• ⏳ = Not yet implemented: Feature is planned but not yet implemented or tested

Back to table of contents

Manual testing

Registration

Test case	Steps	Expected result	Status
User Registration	1. Click "Register" 2. Fill in form with valid data 3. Submit form	User account created and verification email sent	✅
Email Verification	1. Click verification link in email 2. Confirm email	Email verified and user can log in	✅
Invalid Registration	Try to register with: 1. Existing email 2. Mismatched passwords 3. Invalid email format	Appropriate error messages shown	✅

Login/Logout

Test Case	Steps	Expected result	Status
User Login	1. Enter valid credentials 2. Click login	Successfully logged in and redirected to home	✅
Invalid Login	Try to login with: 1. Wrong password 2. Unregistered email	Error message shown	✅
Logout	Click logout button	User logged out and redirected to home	✅

Product browsing

Test case	Steps	Expected result	Status
View products	Visit products page	All products displayed with images and prices	✅
Product categories	Click different categories	Products filtered by category	✅
Product search	Use search bar	Relevant products shown based on search terms	✅
Product sorting	Use sort dropdown	Products sorted by selected criterion	✅

Reviews

Test case	Steps	Expected result	Status
Add Review	1. Navigate to product 2. Click add review 3. Submit review	Review posted and visible after approval	✅
Star Rating	1. Select star rating 2. Submit review	Correct rating displayed with review	✅
Review Moderation	1. Submit review 2. Check admin panel	Review appears in admin for moderation	✅
Review Display	1. View product 2. Check reviews section	All approved reviews shown with dates	✅

Wishlist

Test case	Steps	Expected result	Status
Add to Wishlist	1. Click heart icon 2. Check wishlist page	Product appears in wishlist	✅
Remove from Wishlist	1. View wishlist 2. Click heart icon to remove product	Product removed from wishlist	✅
Wishlist Persistence	1. Add items 2. Logout 3. Login again	Wishlist items remain through sessions	✅
Heart Icon Toggle	1. Add to wishlist 2. Check heart icon	Heart icon shows filled/unfilled correctly	✅

Contact

Test case	Steps	Expected result	Status
Submit Inquiry	1. Fill contact form 2. Submit inquiry	Form submits, confirmation shown	✅
Guest Inquiry	1. Submit as guest 2. Check email field	Email required for guest submission	✅
User Inquiry	1. Login 2. Open contact form	User details auto-filled	✅
Admin Response	1. Submit inquiry 2. Check admin panel	Inquiry appears in admin for response	✅

Product details

Test case	Steps	Expected result	Status
View details	Click on product	Full product details shown	✅
Image gallery	Click product images	Image gallery opens and functions	✅

Cart operations

Test case	Steps	Expected result	Status
Add to cart	Click "Add to Cart" button	Product added and cart updated	✅
Update quantity	Modify quantity in cart	Quantity and total price updated	✅
Remove item	Click remove button	Item removed from cart	✅
Cart total	Add multiple items	Cart total correctly calculated	✅

Payment

Test case	Steps	Expected result	Status
Valid payment	Complete checkout with valid card	Order processed successfully	✅
Invalid payment	Try invalid card details	Appropriate error message shown	✅
Order confirmation	Complete purchase	Confirmation notification and order visible in profile	✅

Profile management

Test case	Steps	Expected result	Status
Update profile	Edit profile information	Profile successfully updated	✅
Order history	View order history	Past orders displayed correctly	✅
Delivery info	Save delivery information	Information saved for future use	✅

Subscription

Test case	Steps	Expected result	Status
Subscribe	Enter email and subscribe	Confirmation email sent	✅
Unsubscribe	Click unsubscribe link	Successfully unsubscribed	✅
Invalid email	Try invalid email format	Error message shown	✅

Custom error pages

Test case	Steps	Expected result	Status
404 Page	Visit non-existent URL	Custom 404 page shown	✅
500 Page	Server error occurs	Custom 500 page shown	✅
502 Page	Bad gateway error	Custom 502 page shown	✅

Back to table of contents

Responsiveness testing

Device testing

Device	Viewport size	Status
iPhone 12	390px × 844px	✅
iPad Pro 11	834px × 1194px	✅
Desktop	1920x1080	✅

Elements tested for responsiveness

• Navigation menu
• Product cards
• Shopping cart
• Checkout forms
• Profile pages
• Footer
• Error pages

Back to table of contents

Browser compatibility

Browser testing

Browser	Version	Status
Chrome	Latest	✅
Firefox	Latest	✅
Safari	Latest	✅
Edge	Latest	✅

Back to table of contents

Lighthouse testing

Mobile lighthouse test (click me)

Desktop lighthouse test (click me)

Back to table of contents

Code validation

HTML validation

HTML validation (click me)

CSS validation

CSS validation (click me)

JavaScript validation

JavaScript validation (click me)

Python validation

Python validation (click me)

Back to table of contents

Bugs

Bug	Fix
Currency was US Dollars not €
Style quantity buttons
Text not centered
Product name not showing
Mobile homepage height
On mobile: Subscribe message overflow

Back to table of contents

Deployment

I deployed this Django application on Heroku, taking advantage of its integration with GitHub. Here's a step-by-step overview of my deployment process:

1. Heroku app creation: I accessed my Heroku dashboard, navigated to “New,” and selected “Create new app.” Then, I picked a unique name for the app and chose the correct region.

2. GitHub integration: On the app’s “Deploy” tab, I chose GitHub as the deployment method. I linked my GitHub account and selected the repository with my Django app.

3. Environment configuration: In the "Settings" tab, I clicked on "Reveal Config Vars" and added the necessary environment variables:

• CLOUDINARY_API_KEY: My Cloudinary API key
• CLOUDINARY_API_SECRET: My Cloudinary API secret
• CLOUDINARY_CLOUD_NAME: My Cloudinary cloud name
• DATABASE_URL: The URL provided by Code Institute for the database
• DEFAULT_FROM_EMAIL: My default email address used with Gmail
• EMAIL_HOST_PASSWORD: My email host password with Gmail
• EMAIL_HOST_USER: My email address with Gmail
• MAILCHIMP_API_KEY: My Mailchimp API key
• MAILCHIMP_AUDIENCE_ID: My Mailchimp audience ID
• MAILCHIMP_REGION: My Mailchimp region
• STRIPE_PUBLIC_KEY: My Stripe public key
• STRIPE_SECRET_KEY: My Stripe secret key
• STRIPE_WH_SECRET: My Stripe webhooks secret

4. Database configuration: Since my database is supplied by Code Institute, I verified that the DATABASE_URL in Config Vars was correctly configured with the provided database URL. In my Django settings, I ensured this environment variable was used to set up the database connection.

5. Buildpack configuration: In the “Settings” tab, I navigated to the “Buildpacks” section, clicked “Add buildpack,” and chose “heroku/python.”

6. Deployment configuration: On the “Deploy” tab, under “Deployment method,” I verified that GitHub was chosen. In the “App connected to GitHub” section, I made sure my repository was linked.

7. Manual deploy: I scrolled down to the “Manual deploy” section, selected the main branch, and clicked “Deploy Branch.”

8. Verify deployment: After the deployment was complete, I clicked “View” to open the app and confirm it was functioning properly.

Back to table of contents

Forking

If you'd like to fork this repository and run it locally, follow these steps:

1. Fork the repository:

   • Navigate to the GitHub repository: MediCart
   • In the top-right corner of the page, click the "Fork" button.
   • This will create a copy of the repository in your GitHub account.

2. Clone your fork:

   • On your forked repository page, click the "Code" button and copy the URL.
   • Open your terminal and run:

     git clone [URL you just copied]
     

   • This creates a local copy of the repository on your machine.

3. Set up virtual environment:

   • Navigate into the project directory:

     cd [project directory name]
     

   • Create a virtual environment:

     python -m venv venv
     

   • Activate the virtual environment:
     • On Windows: venv\Scripts\activate
     • On macOS and Linux: source venv/bin/activate

4. Install dependencies:

   • With your virtual environment activated, install the required packages:

     pip install -r requirements.txt
     

5. Set up environment variables:

   • Create a env.py file in the root directory of the project.
   • Add the following variables (replace with your actual values):

     SECRET_KEY=your_secret_key
     DATABASE_URL=your_database_url
     CLOUDINARY_API_KEY=your_cloudinary_api_key
     CLOUDINARY_API_SECRET=your_cloudinary_api_secret
     CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
     DEFAULT_FROM_EMAIL=your_email_address
     EMAIL_HOST_PASSWORD=your_email_host_password
     EMAIL_HOST_USER=your_email_host_user
     MAILCHIMP_API_KEY=your_mailchimp_api_key
     MAILCHIMP_AUDIENCE_ID=your_mailchimp_audience_id
     MAILCHIMP_REGION=your_mailchimp_region
     STRIPE_PUBLIC_KEY=your_stripe_public_key
     STRIPE_SECRET_KEY=your_stripe_secret_key
     STRIPE_WH_SECRET=your_stripe_wh_secret
     DEBUG=True
     

   Important notes:

   • Make sure to set DEBUG=True for local development and testing in env.py. This should be set to DEBUG=False in production / when the app is live.
   • Remember to never commit the env.py file or any sensitive information to version control. If you plan to deploy your fork, make sure to set up the necessary environment variables in your deployment environment.

6. Apply Migrations:

   • Run the following commands to apply database migrations:

     python manage.py makemigrations
     python manage.py migrate
     

7. Run the development server:

   • Start the Django development server:

     python manage.py runserver
     

   • Open a web browser and navigate to http://127.0.0.1:8000/ to view the application.

Back to table of contents

Credits

Code resources

Django & Python

• Django Documentation - Official Django documentation
• Django Allauth - Authentication system
• Django Crispy Forms - Form rendering
• Django Countries - Country field implementation

Frontend resources

• Bootstrap 5 - Frontend framework
• Font Awesome - Icons used throughout the site
• Google Fonts - Typography

Payment processing

• Stripe Documentation - Payment integration guides

Image hosting

• Cloudinary - Image management

Media

Images

• Product images generated with Leonardo AI

Educational resources

• Mozilla Developer Network (MDN) - Web development resources
• Real Python - Python tutorials
• CSS-Tricks - CSS guides and tutorials
• Google

Back to table of contents

Acknowledgements

I would like to thank Code Institute, the cohort facilitators, the awesome Slack community and my mentor Gareth McGirr.

Back to table of contents