MasteryHub: Skill-Sharing Platform for Professionals

Welcome to MasteryHub, your go-to platform for mentorship and skill development. This application connects mentees with experienced mentors across various fields, offering personalized guidance and support.

Live link to MasteryHub

Key Features

Personalized mentorship sessions
Expert-led skill development
Real-time session booking
Secure payment processing
User profiles and progress tracking
Interactive learning resources

Some features are available exclusively to registered users, including accessing the dashboard, booking mentorship sessions, and tracking progress.

UX

The Strategy Plane

Targeted Users

Professionals seeking to acquire new skills.
Experts looking to share their knowledge and mentor others.
Individuals interested in continuous learning and career advancement.

Site Goals

Enabling users to easily find and join skill-sharing sessions.
Facilitating seamless mentor-mentee matching.
Providing users with the ability to create and manage their learning profiles.
Allowing users to track their skill development progress.
Offering users the ability to provide and receive feedback on sessions.

Project Goals

Develop a functional skill-sharing platform.
Incorporate comprehensive features for an engaging and educational experience.
Apply knowledge gained from previous projects to make this platform more advanced.
Introduce new elements, such as mentorship programs and Q&A forums, to enhance interactivity.
Ensure a user-friendly interface for easy navigation and a seamless learning experience.

Back to Top

Agile Planning

My project followed an agile planning approach, based on user stories. Each user story was meticulously planned and included in a specific iteration.

To prioritize development efforts, features were categorized as Must Have, Should Have, Could Have, and Won't Have. This classification helped determine the importance of each feature.

The skill-sharing section took precedence as the primary focus of the platform, receiving the most attention and time for completion.

The Project board here.

Back to Top

User Stories

Based on the collected and studied user stories, a project implementation plan was developed. You can read user stories here.

Back to Top

Fundamental Structure

Wireframes

To facilitate the design of the website, I created wireframes for every page. Adhering to best practices, wireframes were crafted for mobile and desktop dimensions. Balsamiq was employed as the tool for creating the site's wireframes.

Click to view wireframes

Note: Mobile wireframes will be developed in a future iteration of the project, focusing on responsive design principles to ensure optimal user experience across all devices.

Database Scheme

ERD Diagram

I created an entity relationship diagram (ERD) for my Django project using Graphviz and Django Extensions. This visual guide has streamlined my development process by clearly representing the connections between data structures.

Main plan

Designing a captivating homepage with striking hero images that clearly convey the website's purpose to visitors.
Implementing user account registration for secure access to content editing, profile management, and efficient checkout with saved user information.
Developing a fully responsive website to ensure smooth functionality across all devices and optimized navigation for mobile users.
Equipping superusers with the ability to create, view, update, and delete reviews for both users and products.

Back to Top

Structure Plane

Features

Existing Features

Home Page Preview

The Home page of this online resource is an attractive and informative landing page, designed to capture users' attention.

Back to Top

Skill-Sharing Sessions Section

The Skill-Sharing Sessions page allows users to explore and register for various sessions. Prompts to log in or register if not authorized.

Back to Top

Footer

The footer is consistently present on every page, featuring links to Contact, Returns, Privacy Policies, and an email address.
Additionally, the footer incorporates our newsletter signup, powered by MailChimp. This ensures its visibility on every page, maximizing the likelihood of visitors subscribing.

Back to Top

Contact Page

On the contact page, concise information is presented using small icons for quick and easy comprehension, including a phone number, address, and email.
Additionally, the page includes a contact form enabling users to reach out to the business. The information submitted through this form is stored in the Admin panel, ensuring easy access for staff to review.

Back to Top

Main Nav Menu

At the very top, there is an information board in which a motivational phrase is used as a call to action which is updated every three seconds. It also has a user login option.

Throughout the site, the user has access to the main navigation menu. Features include a search bar, account/profile access, cart link and subtotal if the user has added items to their carts. Once logged in, users have access to the dashboard page.

Back to Top

Restricted Pages

Certain pages are accessible only to users who have logged in. Links to these pages are displayed in the Navbar exclusively when a user is logged in.

Back to Top

Search Bar

Dropdown Menu Content

Authenticated Users:
- Admin Dashboard: Link visible to superusers.
- Mentee Dashboard: Visible to non-expert users.
- Mentor Matching: Link to mentor matching page.
- My Profile: Link to the user's profile.
- Logout: Link to log out.
- Expert Dashboard: Visible to expert users.
- Manage Mentorship Requests: Link to manage mentorship requests.
Unauthenticated Users:
- Login: Link to login page.
- Sign Up: Link to registration page.

Basket Page

Access: The basket can be accessed from the main navigation menu. It displays the running total of items.
Basket Details: Displays items in the basket, individual prices, subtotals for multiple quantities, and quantity adjustment buttons.
Empty Basket: If no items are in the basket, a message prompts users to continue shopping.
Quantity Adjustment: Users can adjust the quantity of each session or remove the item.
Action Buttons: Users can proceed to checkout.

Back to Top

Checkout Page

Checkout Process: Includes a form for payment information, and a summary of the order. Logged-in users can save shipping details for future orders.
Order Summary: Shows cart items, quantities, and total cost.
Payment Information: Users must enter payment details, processed through Stripe.
Completion: Displays buttons for setting up a cart or placing an order, and the total amount to be charged.
Confirmation Email: After completing the order, users receive a confirmation email with the order number and receipt.

Back to Top

Models

Payment: Stores payment information including user, amount, date, and associated session.
Cart: Represents the user's cart.
CartItem: Links products to a cart with a quantity.
Order: Stores order details including user, address, and total amounts.

Back to Top

Error Page

If a user lands on a page that either doesn't exist or that they shouldn't be on (a regular user using links on an admin page or trying to edit/delete something from a link), they will be shown an error message and button to return to sessions or home.

Back to Top

Future Features

If I had extra time, I would implement several new features on the site. Currently, session ratings are simply random numbers entered when adding a session through the settings file. However, I want users to also be able to give a session rating, calculated as an average.
There are also plans to implement functionality that allows you to display the number of sessions held and their popularity in the administrative panel, as well as provide information about the availability of sessions by skill.

Back to Top

Design

Color Scheme

The following colors were chosen for the website:

Primary-color (#4285F4)
Secondary-color (#34A853)
Accent-color (#FBBC05)
Text-color (#333333)
Background-color (#FFFFFF)

Typography

The site chose the GT Walsheim Pro font due to its excellent readability, modern design, and versatility.

Images

All images used as educational material were taken from these sites Freepik, Adobe, Craiyon.

Back to Top

Business Model

This online resource follows a Business-to-Consumer (B2C) model, offering sessions for purchase directly to consumers. It simplifies the payment process for both registered and unregistered users, while providing extra features for registered users and newsletter subscribers.

Back to Top

Marketing Strategy

Social Media Marketing

This Facebook page primarily aims to inform followers about new sessions, notify subscribers about offers and promotions, and place targeted advertisements.

Newsletter Marketing

In the footer of the website is a Mailchimp newsletter in the footer which is used to send emails to subscribers about the latest products, promotions, and discounts.

Back to Top

Search Engine Optimization (SEO)

Keywords

Keywords were analyzed and added to the description of the online platform on the main page of the site.

Keyword Research Process

Brainstorm General Topics

Skills/expertise sharing
Professional development
Career mentorship
Online learning
Upskilling/reskilling

Brain Dump Potential Keywords

skill sharing, share skills, share expertise
professional development, career growth, career advancement
mentorship, mentor, mentee, coaching
online learning, virtual training, e-learning
upskilling, reskilling, learn new skills

Research Keywords in Google

Searched each potential keyword to see related searches and suggestions
Took note of longer keyword phrases that seemed relevant
Paid attention to the types of results (courses, services, etc.)

Ensure Mix of Head Terms and Long-Tail

Kept some of the shorter, head terms like "skill sharing"
Added more specific long-tail phrases like "find a career mentor"
Tried to cover different potential use cases

Assess Keyword Relevance and Search Volume

Used WordTracker to get volume and competition metrics
Prioritized keywords with higher search volume but moderate competition
Weeded out keywords that didn't seem clearly relevant

Final List of Keywords

This resulted in the final list of 10-15 keywords spanning general topics as well as more specific, long-tail phrases related to skills sharing, mentorship, online learning, and professional development for careers.

Back to Top

Sitemap.xml

I created a sitemap using XML-Sitemaps on my live website https://skill-sharing-446c0336ffb5.herokuapp.com/

The XML that was created is in the root directory of the website.

Robots.txt

The robots.txt file was created using this guide https://www.conductor.com/academy/robotstxt/.

Back to top

Main Technologies

Frameworks Used

Libraries And Installed Packages

coverage - Used for running automated tests.
crispy-bootstrap4 - Template pack used for django-crispy-forms.
django-crispy-forms - Used to render forms throughout the project.
dj-database-url - A package used to utilize DATABASE_URL environment variable.
django-allauth - Allows authentication, registration, and account management in Django.
django-countries, v7.2.1 - Django application used to provide country choices for use with forms, and a country field for models.
gunicorn - A Python WSGI HTTP Server for UNIX.
psycopg2 - A PostgreSQL database adapter.
boto3 - An Amazon Web Services (AWS) software development kit (SDK) used to connect to the S3 bucket.
Black - A Python code formatter.
django storages - Collection of custom storage backends for Django.
stripe - A Python library for Stripe's API.

Back to Top

Tools And Resources

Back to Top

Testing

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

Back to Top

Bugs

Back to Top

Credits

Below is a list of sources of information that helped me and inspired me with their ideas:

Back to Top

Deployment

The live deployed application can be found deployed on Heroku.

Neon PostgreSQL Database

This project now uses Neon for the PostgreSQL database.

Setting Up a Neon Database

To obtain your own Postgres database on Neon, follow these steps:

Sign up at Neon.tech using your GitHub or email.
Click Create a new project to set up a database.
Provide a project name and select PostgreSQL version (latest recommended).
Choose the Free Tier plan if you're just getting started.
Select a Region closest to you for better performance.
Once created, go to the Connection Details to find your database URL, username, password, and other credentials.

Connecting to the Database

Use the provided connection string in your application's environment variables to connect to the Neon database:

Amazon AWS

This project uses AWS to store media and static files online, due to the fact that Heroku doesn't persist this type of data.

Once you've created an AWS account and logged in, follow these series of steps to get your project connected. Make sure you're on the AWS Management Console page.

S3 Bucket

Search for S3.
Create a new bucket, give it a name (matching your Heroku app name), and choose the region closest to you.
Uncheck Block all public access, and acknowledge that the bucket will be public (required for it to work on Heroku).
From Object Ownership, make sure to have ACLs enabled, and Bucket owner preferred selected.
From the Properties tab, turn on static website hosting, and type index.html and error.html in their respective fields, then click Save.

From the Permissions tab, paste in the following CORS configuration:

[
	{
		"AllowedHeaders": [
			"Authorization"
		],
		"AllowedMethods": [
			"GET"
		],
		"AllowedOrigins": [
			"*"
		],
		"ExposeHeaders": []
	}
]

Copy your ARN string.
From the Bucket Policy tab, select the Policy Generator link, and use the following steps:
- Policy Type: S3 Bucket Policy
- Effect: Allow
- Principal: *
- Actions: GetObject
- Amazon Resource Name (ARN): paste-your-ARN-here
- Click Add Statement
- Click Generate Policy
- Copy the entire Policy, and paste it into the Bucket Policy Editor
```
{
	"Id": "Policy1234567890",
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Stmt1234567890",
			"Action": [
				"s3:GetObject"
			],
			"Effect": "Allow",
			"Resource": "arn:aws:s3:::your-bucket-name/*"
			"Principal": "*",
		}
	]
}
```
- Before you click "Save", add /* to the end of the Resource key in the Bucket Policy Editor (like above).
- Click Save.
From the Access Control List (ACL) section, click "Edit" and enable List for Everyone (public access), and accept the warning box.
- If the edit button is disabled, you need to change the Object Ownership section above to ACLs enabled (mentioned above).

IAM

Back on the AWS Services Menu, search for and open IAM (Identity and Access Management). Once on the IAM page, follow these steps:

From User Groups, click Create New Group.
- Suggested Name: group-skill-sharing (group + the project name)
Tags are optional, but you must click it to get to the review policy page.
From User Groups, select your newly created group, and go to the Permissions tab.
Open the Add Permissions dropdown, and click Attach Policies.
Select the policy, then click Add Permissions at the bottom when finished.
From the JSON tab, select the Import Managed Policy link.
- Search for S3, select the AmazonS3FullAccess policy, and then Import.
- You'll need your ARN from the S3 Bucket copied again, which is pasted into "Resources" key on the Policy.
```
{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": "s3:*",
			"Resource": [
				"arn:aws:s3:::your-bucket-name",
				"arn:aws:s3:::your-bucket-name/*"
			]
		}
	]
}
```
- Click Review Policy.
- Suggested Name: policy-skill-sharing (policy + the project name)
- Provide a description:
  - "Access to S3 Bucket for skill-sharing static files."
- Click Create Policy.
From User Groups, click your "group-skill-sharing".
Click Attach Policy.
Search for the policy you've just created ("policy-skill-sharing") and select it, then Attach Policy.
From User Groups, click Add User.
- Suggested Name: user-skill-sharing (user + the project name)
For "Select AWS Access Type", select Programmatic Access.
Select the group to add your new user to: group-skill-sharing
Tags are optional, but you must click it to get to the review user page.
Click Create User once done.
You should see a button to Download .csv, so click it to save a copy on your system.
- IMPORTANT: once you pass this page, you cannot come back to download it again, so do it immediately!
- This contains the user's Access key ID and Secret access key.
- AWS_ACCESS_KEY_ID = Access key ID
- AWS_SECRET_ACCESS_KEY = Secret access key

Final AWS Setup

If Heroku Config Vars has DISABLE_COLLECTSTATIC still, this can be removed now, so that AWS will handle the static files.
Back within S3, create a new folder called: media.
Select any existing media images for your project to prepare them for being uploaded into the new folder.
Under Manage Public Permissions, select Grant public read access to this object(s).
No further settings are required, so click Upload.

Stripe API

This project uses Stripe to handle the ecommerce payments.

Once you've created a Stripe account and logged in, follow these series of steps to get your project connected.

From your Stripe dashboard, click to expand the "Get your test API keys".
You'll have two keys here:
- STRIPE_PUBLIC_KEY = Publishable Key (starts with pk)
- STRIPE_SECRET_KEY = Secret Key (starts with sk)

As a backup, in case users prematurely close the purchase-order page during payment, we can include Stripe Webhooks.

From your Stripe dashboard, click Developers, and select Webhooks.
From there, click Add Endpoint.
- https://skill-sharing-446c0336ffb5.herokuapp.com/checkout/wh/
Click receive all events.
Click Add Endpoint to complete the process.
You'll have a new key here:
- STRIPE_WH_SECRET = Signing Secret (Wehbook) Key (starts with wh)

Gmail API

This project uses Gmail to handle sending emails to users for account verification and purchase order confirmations.

Once you've created a Gmail (Google) account and logged in, follow these series of steps to get your project connected.

Click on the Account Settings (cog icon) in the top-right corner of Gmail.
Click on the Accounts and Import tab.
Within the section called "Change account settings", click on the link for Other Google Account settings.
From this new page, select Security on the left.
Select 2-Step Verification to turn it on. (verify your password and account)
Once verified, select Turn On for 2FA.
Navigate back to the Security page, and you'll see a new option called App passwords.
This might prompt you once again to confirm your password and account.
Select Mail for the app type.
Select Other (Custom name) for the device type.
- Any custom name, such as "Django"
You'll be provided with a 16-character password (API key).
- Save this somewhere locally, as you cannot access this key again later!
- EMAIL_HOST_PASS = user's 16-character API key
- EMAIL_HOST_USER = user's own personal Gmail email address

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), and finally, select Create App.
From the new app Settings, click Reveal Config Vars, and set your environment variables.

Key	Value
`AWS_ACCESS_KEY_ID`	user's own value
`AWS_SECRET_ACCESS_KEY`	user's own value
`DATABASE_URL`	user's own value
`DISABLE_COLLECTSTATIC`	1 (this is temporary, and can be removed for the final deployment)
`EMAIL_HOST_PASS`	user's own value
`EMAIL_HOST_USER`	user's own value
`SECRET_KEY`	user's own value
`STRIPE_PUBLIC_KEY`	user's own value
`STRIPE_SECRET_KEY`	user's own value
`STRIPE_WH_SECRET`	user's own value
`USE_AWS`	True

Heroku needs two additional files in order to deploy properly.

requirements.txt
Procfile

You can install this project's requirements (where applicable) 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 app_name.wsgi > Procfile
replace app_name with the name of your primary Django app name; the folder where settings.py is located

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

Either:

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!

Local Deployment

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

For either method, you will need to install any applicable packages found within the requirements.txt file.

pip3 install -r requirements.txt.

You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.

Sample env.py file:

import os

os.environ.setdefault("AWS_ACCESS_KEY_ID", "user's own value")
os.environ.setdefault("AWS_SECRET_ACCESS_KEY", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("EMAIL_HOST_PASS", "user's own value")
os.environ.setdefault("EMAIL_HOST_USER", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")
os.environ.setdefault("STRIPE_PUBLIC_KEY", "user's own value")
os.environ.setdefault("STRIPE_SECRET_KEY", "user's own value")
os.environ.setdefault("STRIPE_WH_SECRET", "user's own value")

os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:

Start the Django app: python3 manage.py runserver
Stop the app once it's loaded: CTRL+C or ⌘+C (Mac)
Make any necessary migrations: python3 manage.py makemigrations
Migrate the data to the database: python3 manage.py migrate
Create a superuser: python3 manage.py createsuperuser
Load fixtures (if applicable): python3 manage.py loaddata file-name.json (repeat for each file)
Everything should be ready now, so run the Django app again: python3 manage.py runserver

If you'd like to backup your database models, use the following command for each model you'd like to create a fixture for:

python3 manage.py dumpdata your-model > your-model.json
repeat this action for each model you wish to backup

Cloning

You can clone the repository by following these steps:

Go to the GitHub repository
Locate the Code button above the list of files and click it
Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
Open Git Bash or Terminal
Change the current working directory to the one where you want the cloned directory
In your IDE Terminal, type the following command to clone my repository:
- git clone https://github.com/yosephdev/mastery-hub.git
Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
Once clicked, you should now have a copy of the original repository in your own GitHub account!

Acknowledgements

I wish to extend my heartfelt thanks to my mentor, Mitko Bachvarov, for his exceptional guidance and unwavering support throughout my learning journey.

I am also deeply appreciative of the entire Code Institute team for their outstanding management of the educational process and the high-quality resources they provided.

Furthermore, I am grateful to my classmates for their camaraderie and encouragement. Your shared knowledge and enthusiasm significantly enriched our learning experience and made the process both enjoyable and rewarding.

Back to Top

Recent Improvements and Fixes

The MasteryHub platform has undergone several important improvements to enhance user experience and fix functionality issues:

Authentication Enhancements

Fixed Google OAuth2 authentication to work properly with existing accounts
Improved email verification process with proper site name and domain
Enhanced social account adapter to better handle existing users

E-commerce Functionality

Improved checkout process with robust error handling and validation
Enhanced payment processing with detailed feedback for successful and failed payments
Fixed form validation for phone numbers and postal codes to ensure proper formats

Content Management

Enhanced forum post creation, editing, and deletion functionality
Fixed server errors when creating forum posts as admin users
Improved error messaging and user feedback throughout the platform

User Profile Management

Fixed profile deletion functionality to properly handle user accounts
Enhanced profile editing with improved validation
Added proper error handling for all profile operations

These improvements ensure a smoother user experience and more reliable functionality across the platform.

Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 607 Commits
.vscode		.vscode
accounts		accounts
checkout		checkout
docs		docs
home		home
masteryhub		masteryhub
media		media
profiles		profiles
skill_sharing_platform		skill_sharing_platform
static		static
staticfiles		staticfiles
templates		templates
tests		tests
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
Procfile		Procfile
README.md		README.md
Testing.md		Testing.md
custom_storages.py		custom_storages.py
manage.py		manage.py
openapi-schema.yml		openapi-schema.yml
requirements.txt		requirements.txt
robots.txt		robots.txt
sitemap.xml		sitemap.xml

yosephdev/mastery-hub

Folders and files

Latest commit

History

Repository files navigation

MasteryHub: Skill-Sharing Platform for Professionals

Key Features

Table of Contents

UX

The Strategy Plane

Targeted Users

Site Goals

Project Goals

Agile Planning

User Stories

Fundamental Structure

Wireframes

Database Scheme

ERD Diagram

Main plan

Structure Plane

Features

Existing Features

Home Page Preview

Skill-Sharing Sessions Section

Footer

Contact Page

Main Nav Menu

Restricted Pages

Search Bar

Dropdown Menu Content

Basket Page

Checkout Page

Models

Error Page

Future Features

Design

Color Scheme

Typography

Images

Business Model

Marketing Strategy

Social Media Marketing

Newsletter Marketing

Search Engine Optimization (SEO)

Keywords

Keyword Research Process

Brainstorm General Topics

Brain Dump Potential Keywords

Research Keywords in Google

Ensure Mix of Head Terms and Long-Tail

Assess Keyword Relevance and Search Volume

Final List of Keywords

Sitemap.xml

Robots.txt

Main Technologies

Frameworks Used

Libraries And Installed Packages

Tools And Resources

Testing

Bugs

Credits

Below is a list of sources of information that helped me and inspired me with their ideas:

Deployment

Neon PostgreSQL Database

Setting Up a Neon Database

Connecting to the Database

Amazon AWS

S3 Bucket

IAM

Final AWS Setup

Stripe API

Gmail API

Heroku Deployment

Local Deployment

Cloning

Forking

Acknowledgements

Recent Improvements and Fixes

Authentication Enhancements