Match_up

Developer: Chahinez Boutemine (Scaphix)

Project Introduction

Match_up is a modern dating platform built with Django, designed to help people meet and connect in a simple, stress-free way. The goal was to keep things easy and intuitive — users can create profiles, upload photos, browse other profiles, and interact securely without being overwhelmed by unnecessary features.

I chose to build a dating app mainly because the idea sounded fun and genuinely interesting to implement. Dating platforms are very user-focused, which made this project a great way to think about real user journeys, design choices, and how people actually interact with an app. What started as a “simple” portfolio project quickly turned into a much bigger challenge than expected.

Along the way, I ran into several problems I didn’t anticipate at all — from authentication logic to handling user data and edge cases — many of which went well beyond the original scope of what I planned to build. While challenging at times, these hurdles pushed me to learn more about Django, problem-solving, and building something that feels realistic and usable. Overall, match_up became a project that was not only enjoyable to work on, but also a strong learning experience that helped me grow as a developer.

source: match_up amiresponsive

Important

match_up is built with Django, leveraging django-allauth for secure authentication and Cloudinary for reliable image storage.

UX

The 5 Planes of UX

1. Strategy

Purpose

• Provide users with a safe, welcoming platform to create profiles and discover potential romantic matches.
• Enable authenticated users to browse profiles, express interest through likes, and connect when there's mutual interest.
• Facilitate meaningful connections through a mutual matching system that creates matches when two users like each other.
• Maintain user privacy and data security throughout the discovery, matching, and connection process.

Primary User Needs

• New users need an easy registration and profile creation process to get started quickly.
• Active users need the ability to browse profiles, express interest (like) or pass, and receive notifications when mutual matches occur.
• Users need to review their liked profiles and manage their connections through a dedicated matches page.
• Users need confidence that their data is secure and their privacy is protected.
• Users need clear visual feedback when interacting with profiles and seamless navigation throughout the platform.

Business Goals

• Foster a growing community of engaged users seeking relationships through mutual connections.
• Build trust through secure authentication, data handling, and transparent matching system.
• Provide a smooth, intuitive user experience that encourages profile completion and active engagement.
• Facilitate successful connections by ensuring users can easily discover, evaluate, and connect with potential matches.

2. Scope

Features (see below)

The MVP focuses on the essential user journey: Sign Up → Create Profile → Browse → Like/Pass → Match (For detailed user flow, refer to Structure).

1. Authentication & Onboarding

• Sign up/login via Django-allauth
• Redirect to profile creation after signup
• Required fields: age (18+), gender, bio
• Optional fields: location, profile photo

2. User Profiles

• One-to-one relationship with User model
• Fields: age (18+), gender, bio, location, optional profile picture
• Simple profile view and edit functionality
• Separate views: ProfileDetail (view others by ID) and ProfileAbout (current user's own profile)

3. Discovery & Matching Flow

• Browse feed/list of compatible profiles
• Like or pass (dislike) actions via POST endpoints
• Prevent users from liking themselves
• Exclude already interacted profiles from feed (passed, liked, or matched)

4. Matching System

• Mutual likes automatically create a Match record
• Simple "Matches" list showing all mutual matches
• Match creation handled via signals when both users like each other

5. User Interface

• Clean, responsive base template
• Auth-aware navigation (shows login/logout based on authentication state)
• Basic profile browsing UI
• Flash messages for user feedback

6. Admin & Development Tools

• Admin interface with filters and search
• Seed data management commands for local testing
• Profile validation and edge case handling

3. Structure

Information Architecture

• Navigation Menu:
  • Links to Home, My Profile, Discover, Liked Profiles, Matches, and Logout.
  • Contextual redirects for unauthenticated users to signup/login.
  • Liked Profiles link appears conditionally when user has liked profiles.
• Hierarchy:
  • Home page with call-to-action to get started.
  • Discover page for browsing and interacting with profiles (like/pass).
  • Profile detail views with comprehensive user information and photos.
  • Matches page displaying mutual matches.
  • Liked Profiles page showing all one-way likes for review.
  • Profile management pages (create, edit, delete).

User Flow

1. Unauthenticated users land on home page → view features → register for account.
2. New users complete registration → redirected to profile creation.
3. Users create profile → add photo, bio, interests, location, and demographics.
4. Users browse profiles on Discover page → view profile cards → like or pass on profiles.
5. When user likes a profile that has already liked them → automatic match created → user redirected to Matches page with notification.
6. Users view their matches → see mutual connections → access detailed profile views.
7. Users can review all profiles they've liked on Liked Profiles page → revisit and view details.
8. Users can view detailed profile information from any page → navigate back to previous page seamlessly.
9. Users manage their profile → edit or delete as needed throughout their journey.

Content Requirements

• User registration and authentication system (Django Allauth).
• Profile creation with photos (Cloudinary), bio, interests, and demographic information (age, gender, location).
• Profile management (create, update, delete) with comprehensive editing capabilities.
• Profile discovery and browsing system showing profiles users haven't interacted with yet.
• Like and Pass functionality allowing users to express interest or skip profiles.
• Mutual matching system that automatically creates matches when two users like each other.
• Matches page displaying all mutual matches with match details.
• Liked profiles page showing all one-way likes for review and revisiting.
• Detailed profile view with full information display and navigation back to previous page.
• New match notifications with automatic redirect to matches page when a mutual match occurs.
• Visual feedback animations (fade-out effects) when liking or passing on profiles.
• Responsive design for seamless experience across mobile, tablet, and desktop devices.

4. Skeleton

Wireframes (see below)

5. Surface

Visual Design Elements

• Colours (see below)
• Typography (see below)

Colour Scheme

I used coolors.co to generate my color palette.

• #FFF9F8 neutral backgrounds for clean design.
• #FF5A7A primary accent color for call-to-action buttons.
• #FF2F9B secondary accent for hover states and highlights.
• #C7A7FF tertiary color for subtle elements.
• #1A1A1 dark text for readability.

Typography

• Poppins was used for primary headers and titles.
• Inter was used for all body text.
• Montserrat was used for secondary content.
• Font Awesome icons were used throughout the site for visual clarity and user guidance.

Wireframes

To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes using Balsamiq.

Page	Mobile	Tablet	Desktop
Home
Register
Login
Edit/Delete Profile
Browse Profiles
Liked Profiles

Epics/User Stories

Epics

• Epic 1 : User Accounts & Profiles
• Epic 2 : Browsing Users & Rating
• Epic 3: Chat & Messaging

MoSCoW Prioritization

I've decomposed my Epics into User Stories for prioritizing and implementing them. Using this approach, I was able to apply "MoSCoW" prioritization and labels to my User Stories within the Issues tab.

• Must Have: guaranteed to be delivered - required to Pass the project.
• Should Have: adds significant value, but not vital.
• Could Have: has small impact if left out.
• Future Log: not a priority for this iteration - future features.

User Stories

Target	Expectation	Outcome	Prioritization
As a guest user	I would like to view the home page	so that I can understand what the platform offers.
As a new user	I can create an account/login to my account	so that I can access the dating platform.
As a registered user	I can create/edit my profile	so that others users can learn about me.
As a registered user	I can delete my profile and account	so that I can remove my presence from the platform.
As a registered user	I can view other profiles	so that I can discover potential matches.
As a registered user	I can rate a person	so that this person can be my match or not
As a registered user	I can see my mutual matches	so that I can connect with people who also like me.
As a user	I would like responsive design on mobile	so that I can browse matches on any device.
As a registered user	I want to be notified and automatically redirected to the matches page when I have a new match	so that I don't miss opportunities to connect.
As a registered user	I can see profiles fade out after I like or pass on them	so that I get visual feedback that my action was successful.
As a registered user	I can view detailed profile information	so that I can learn more about someone before connecting.
As a registered user	I can return to the previous page when viewing a profile detail	so that I can easily continue browsing from where I left off.
As a registered user	I can see profiles I've liked	so that I can review my interests and revisit profiles.
As a registered user	I can see all the chats I'm part of	so that I can continue writing my matches.

Features

Existing Features

Feature	Notes	Screenshot
Register	django-allauth handles user registration with email verification.
Login	django-allauth manages secure user login with session handling.
Logout	Users can securely log out of their accounts.
Home Page	Landing page with call-to-action and platform overview for both authenticated and guest users.
Create Profile	New users must create a detailed profile including age, gender, location, bio, interests, and photo upload.
Edit Profile	Users can update their profile information including photo, bio, interests, and demographics.
Delete Profile	Users can permanently delete their profile and associated account data.
My Profile / Profile About	Quick access to view the current user's own profile.
Discover	Browse profiles of other members that users haven't interacted with yet. Excludes own profile and already liked/passed profiles.
Like Profile	Express interest in a profile by clicking the Like button. Uses AJAX for seamless interaction without page refresh.
Pass Profile	Skip a profile by clicking the Pass button. Profiles that are passed are excluded from future discovery.
Matches	View all mutual matches where both users have liked each other. Displays match details and allows viewing matched profiles.
Liked Profiles	Review all profiles the user has liked (one-way likes). Enables revisiting and viewing details of previously liked profiles.
Profile Detail	Detailed view of a profile showing all user information including photo, bio, interests, and location. Includes navigation back to previous page.
About page
Contact page
Match Notifications	Automatic notification and redirect to matches page when a mutual match occurs. Visual alert displays when new matches are created.
Pagination	Paginated views for Discover, Matches, and Liked Profiles pages to handle large numbers of profiles efficiently.
User Feedback	Django messages provide clear feedback for user actions (profile created, updated, deleted).
Error Handling	Comprehensive error handling with user-friendly error messages for form validation.
404 Error Page	Custom 404 error page that indicates when a user has navigated to a page that doesn't exist, replacing the default Heroku 404 page with one that ties into the site's look and feel.

Future Features

• Messaging: Real-time chat functionality allowing matched users to communicate directly within the platform.
• Tracking unread matches: Showing notifications for new matches even if user wasn't redirected, with persistent indicators across the application.
• Search & Filters: Advanced filtering by age, location, interests, and gender to help users find more relevant matches.
• Profile Verification: Phone or identity verification badges to increase trust and authenticity on the platform.
• Safety Features: Block user and report features for community safety and user protection.
• Activity Tracking: Show last seen status or activity level to indicate user engagement.
• Advanced Analytics: Dashboard for users showing profile views, match history, and interaction statistics.
• SEO Optimization: Implement features for SEO, such as meta tags, custom URLs, and keywords for better search engine ranking.
• Convert Contact to an individual app and model.
• Convert FAQs to an individual app and model.

Tools & Technologies

Tool / Tech	Use
	Version control.
	Secure online code storage.
	Local IDE for development.
	Main site content and layout.
	Design and layout.
	Responsive front-end framework.
	User interaction on the site.
	Back-end programming language.
	Python framework for the site.
	User authentication and account management.
	Relational database management.
	Cloud storage for user profile photos.
	Serving static files with Heroku.
	Hosting the deployed application.
	Icons throughout the site.

Database Design

Data Model

Entity Relationship Diagrams (ERD) help visualize database architecture before and during development.

I have used Mermaid to generate an interactive ERD of my project.

Summary of Diagram:

Shows four entities: User, Profile, Like, Match, and Message. Relationships: Each Profile is associated to exactly one User (1:1). Like and Match both reference two User foreign keys, modeling user-to-user relationships. Each Message is sent from a User and belongs to a Match. This gives you a solid visual of the relationships and main fields in your data model! You can add further fields or constraints as needed.

erDiagram
    direction TB

    Profile ||--|| User : "has"
    Like }o--|| User : "from_user"
    Like }o--|| User : "to_user"
    Match }o--|| User : "user1"
    Match }o--|| User : "user2"
    Message }o--|| Match : "belongs to"
    Message }o--|| User : "sender"

    User {
        int id PK
        string username
    }

    Profile {
        int id PK
        int user_id FK "references User"
        string bio
        int age "18-100"
        string gender "M/F/O"
        string location
        string profile_picture "ImageField"
        datetime created_at
        datetime updated_at
        boolean is_profile_complete
    }

    Like {
        int id PK
        int from_user_id FK
        int to_user_id FK
        string action "like/dislike"
        datetime created_at
    }

    Match {
        int id PK
        int user1_id FK
        int user2_id FK
        datetime created_at
        boolean is_active
    }

    Message {
        int id PK
        int match_id FK
        int sender_id FK
        string content
        datetime created_at
        boolean is_read
        datetime read_at
    }

Loading

Agile Development Process

GitHub Projects

GitHub Projects served as an Agile tool for this project. Through it, EPICs, User Stories, issues/bugs, and Milestone tasks were planned, then subsequently tracked on a regular basis using the Kanban project board.

GitHub Issues

GitHub Issues served as an another Agile tool. There, I managed my User Stories and Milestone tasks, and tracked any issues/bugs.

Link	Screenshot

Testing

Note

For all testing, please refer to the TESTING.md file.

Debugging

Note

For the developpement process and Bugs documentation, please refer to the DEBUGGING.md file.

Deployment

The live deployed application can be found deployed on Heroku.

Heroku Deployment

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

• Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
• Your app name must be unique, and then choose a region closest to you (EU or USA), then finally, click Create App.
• From the new app Settings, click Reveal Config Vars, and set your environment variables to match your private env.py file.

Important

This is a sample only; you would replace the values with your own if cloning/forking this repository.

Key	Value
CLOUDINARY_URL	user-inserts-own-cloudinary-url
DATABASE_URL	user-inserts-own-postgres-database-url
DISABLE_COLLECTSTATIC	1
SECRET_KEY	any-random-secret-key

Heroku needs some additional files in order to deploy properly:

• requirements.txt
• Procfile

You can install this project's requirements.txt using:

• pip3 install -r requirements.txt

If you have your own packages that have been installed, then the requirements file needs updated using:

• pip3 freeze --local > requirements.txt

The Procfile can be created with the following command:

• echo web: gunicorn match_up.wsgi > Procfile

The .python-version file tells Heroku the specific version of Python to use when running your application.

• 3.12 (or similar)

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

Either (recommended):

• Select Automatic Deployment from the Heroku app.

Or:

• In the Terminal/CLI, connect to Heroku using this command: heroku login -i
• Set the remote for Heroku: heroku git:remote -a app_name (replace app_name with your app name)
• After performing the standard Git add, commit, and push to GitHub, you can now type:
  • git push heroku main

The project should now be connected and deployed to Heroku!

Cloudinary API

This project uses the Cloudinary API to store media assets online.

To obtain your own Cloudinary API key:

• Create an account and log in to Cloudinary.
• For "Primary Interest", choose Programmable Media for image and video API.
• On your Cloudinary Dashboard, copy your API Environment Variable.
• Be sure to remove the leading CLOUDINARY_URL= as part of the API value; this is the key.
  • cloudinary://123456789012345:AbCdEfGhIjKlMnOpQrStuVwXyZa@1a2b3c4d5)
• This goes into your env.py file and Heroku Config Vars as the key CLOUDINARY_URL.

PostgreSQL

This project uses a Code Institute PostgreSQL Database for the Relational Database with Django.

Caution

• PostgreSQL databases by Code Institute are only available to CI Students.
• You must acquire your own PostgreSQL database through some other method if you plan to clone/fork this repository.
• Code Institute students are allowed a maximum of 8 databases.
• Databases are subject to deletion after 18 months.

To obtain a PostgreSQL database from Code Institute, I followed these steps (CI students only):

• Submitted my email address to the CI PostgreSQL Database link above.
• An email was sent to me with my new Postgres Database.
• The Database connection string will resemble:
  • postgres://<db_username>:<db_password>@<db_host_url>/<db_name>
• You can use the above URL with Django; simply paste it into your env.py file and Heroku Config Vars as DATABASE_URL.

Other options:

• Option 1: Use a third-party provider like Heroku PostgreSQL or Railway.
• Option 2: UseAmazon RDS for managed database hosting.

Note

: superuser must be recreated after database resets.

Caution

Default db.sqlite3 DB should not be included in Git, It’s a generated, environment-specific file; committing it causes various issues: Issues:

• Causes merge conflicts
• Exposes local data
• File becomes stale when switching database backends
• Increases repository size unnecessarily

Note

Recommended: Add db.sqlite3 (and other local database files) to .gitignore and remove it from Git history if already tracked. Keep only migration files under version control.

WhiteNoise

This project uses WhiteNoise to serve static files on Heroku.

To include WhiteNoise in your own projects:

• Install the package: pip install whitenoise
• Update requirements: pip freeze --local > requirements.txt
• Edit settings.py and add to MIDDLEWARE:

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    # other middleware
]

Local Development

This project can be cloned or forked to make a local copy on your own system.

You will need to install packages from requirements.txt:

• pip3 install -r requirements.txt

Create a new file called env.py at the root-level with environment variables:

import os

os.environ["SECRET_KEY"]= "any-random-secret-key"
os.environ.setdefault("DATABASE_URL", "user-inserts-own-postgres-database-url")
os.environ["CLOUDINARY_URL"]="user-inserts-own-cloudinary-url"

To run locally:

• Start the Django app: python3 manage.py runserver
• Stop the app: CTRL+C (Windows/Linux) or ⌘+C (Mac)
• Make migrations: python3 manage.py makemigrations then python3 manage.py migrate
• Create a superuser: python3 manage.py createsuperuser
• Run the app again: python3 manage.py runserver

Cloning

1. Go to the GitHub repository.
2. Click the green "Code" button and select your preferred clone method (HTTPS, SSH, or GitHub CLI).
3. Copy the URL to your clipboard.
4. Open your terminal and type: git clone https://www.github.com/Scaphix/match_up.git
5. Press "Enter" to create your local clone.

Forking

1. Log in to GitHub and navigate to the GitHub Repository.
2. Click the "Fork" button in the top-right corner.
3. You now have a copy of the repository in your own GitHub account!

Local VS Deployment

There are no significant differences between the local development version and the deployed version on Heroku. The application functions consistently across both environments with the same features and user experience.

Credits

Content

Source	Notes
Django Documentation	Official Django framework documentation
django-allauth	User authentication and account management
Bootstrap Documentation	Responsive framework and components
Cloudinary API Docs	Cloud image storage and management
Stack Overflow	Troubleshooting and debugging assistance
ChatGPT	Help with code logic and explanations
Code Institute	Django and full-stack development education
Django Recipe Sharing Tutorial	Tutorial from developper Dee Mc

Media

Source	Notes
Font Awesome	Icons used throughout the site
Google AI Studio	Background images and visual assets
Favicon.io	Site favicon generation

Acknowledgements

• I would like to thank my Code Institute mentors, Tim Nelson for his valuable guidance and constructive feedback throughout this project, including during the holiday period.

• I would like to thank my husband for his help and support throughout the development of this project.