search

dragon-fire-fly / developer_matcher

2 stars 1 forks source link

readme

Developer Connect

Repository

The live site can be found at developer-connect.herokuapp.com.

Objective

The objective of Developer Connect is to link software developers up with eachother so that they can form teams and work on projects. Furthermore, a project posting board allows the opportunity for people with app, website or software ideas to build a team with the appropriate skills and technological experience to bring their idea(s) to life. The platform also provides a way for developers to connect with one another and for potential employers to find their next ideal candidate.

Am I Responsive mockup

Am-i-responsive mockup

UX

Colour Scheme

Originally, the "minty" bootswatch theme was utilised for this project as it provides a simple, clean design with an appealing green colour as its base. The buttons have soft, rounded edges which are visually appealing and the colours used for primary, secondary, warning and danger buttons complement eachother nicely. Minty's card and modal styles are simple, aesthetically pleasing and do not distract from the content of the website.

Following Lighthouse testing, it became obvious that the vast majority of the "Minty" CSS was being unused on the site and was contributing to longer loading times and poor performance. For this reason, custom CSS was applied to supplement the import of regular Bootstrap 5 from the CDN and "Minty" was removed. Many of the colour combinations used in "Minty" were retained, and therefore it is still credited here in the creation of this project.

Following assessment with an EightShapes contrast grid, some of the Minty colours were deemed to not have sufficient contrast for visually impaired users. In particular, many of the areas where white text was used were replaced with black text to improve readability. More details about this can be found in the TESTING.md file.

Adaptations to the "minty" theme:

The general colour scheme can be seen below: Developer Connect colour scheme

The coolers colour scheme shown above shows the basic colours used for the site.

I've used CSS :root variables to easily update the global colour scheme by changing only one value, instead of everywhere in the CSS file. These are inspired by the "Minty" colour scheme mentioned earlier.

:root {
    --mint-green: #78C2AD;
    --hover-mint-green: #66a593;
    --disabled-green: #CCE8E0;
    --pink:#F3969A;
    --red: #C63D17;
    --black: #000;
    --white: #FFF;
    --off-white: #ccc;
    --dark-green: #006400;
    --dark-grey: #5a5a5a;
}

Typography

Fonts imported as part of the Bootstrap import are used throughout this project. Additional icons from the Font Awesome library were used. Icons were used throughout the site, including the social media icons in the footer and the edit/delete icons for messages. The icons used are shown below:

FontAwesome icons

User Stories

User stories are an integral part of software design and execution and help not only with the design on the features but also with the management of the project. User stories represent the small units of work which can be undertaken during an iteration (or "sprint").

In this project, User Stories are broken down from three "Epics". Epics are large overarching concepts which define the major parts of the software being developed. These epics were then dissected into smaller User Stories. The epics used for this project were:

  1. Account Management
  2. User interaction
  3. Project interaction

Epics

Github actions was used to record epics and user stories and a User Story template was created and used for the purpose of recording the user stories and for breaking them down into "acceptance criteria" - the conditions which must be met in order for the User Story to be considered "finished" - and "tasks" - the actual work that needs to be done in order to meet these acceptance criteria.

The User Stories are listed below and are linked to the respective issue on Github actions:

Issue # Epic User Story Prioritisation Implemented
1 Account Management As a new site user I can create a new user account so that I can log into and use the full functionality of the site Must-do Yes
2 Account Management As a registered user I can log in to my user account so that I can access full functionality of the site Must-do Yes
3 Account Management As a registered user I can view, update and delete my profile so that I can amend and delete my data Must-do Yes
5 User interaction As a registered user I can see an overview of other users on the site so that I can get an overview of the skills, interests and projects of other users Must-do Yes
6 User interaction As a registered user I can view the profiles of other users so that I can see whether this user is interesting to me based on my interests, programming languages, current projects, etc. Must-do Yes
8 Project interaction As a registered user I can see an overview of all the active projects posted on the site so that I can read details about the projects and decide which are potentially of interest to me Must-do Yes
9 Project interaction As a registered site user I can view the details of active projects so that I can assess if the project is of interest to me, if my skills and experience are suitable for the project and contact the project owner Must-do Yes
39 Project Interaction As a registered user I can create a new project so that I can advertise the project to other, potentially interested users Must-do Yes
40 Project Interaction As a project owner I can edit and delete my own projects so that I can update the details or remove the project from the site Must-do Yes
42 Project Interaction As a project owner I can add and remove images for my project so that other users can get a visual idea of the project Must-do Yes
4 Account Management As a google account holder I can log in with my Gmail account so that I do not have to manually enter my details or create a password when signing up to the site Should-do Yes
59 User Interaction As a logged in user I can see a maximum number of entries per page and navigate through pages so that the page loading time is not too long and I do not get overwhelmed with too many entries Should-do Yes
68 User Interaction As the sender of a message I can edit my message so that I can change its contents and as both a sender and receiver of a message I can delete a message so that I can remove it from my account Should-do Yes
10 User interaction As a registered site user I can like and message other users so that I can interact with other users and discuss interests or projects Could-do Partially
7 User interaction As a registered site user I can perform a search for other users based on a variety of parameters so that I can more easily find the type of user I am looking for Could-do Partially
12 Project interaction As a registered site user I can perform a search for projects based on a variety of parameters so that I can more easily find the type of project I am looking for Could-do Partially
11 Project interaction As a registered site user I can star and add comments to projects so that I can interact with projects, share my ideas and contact the project owner Could-do No

More information about the Agile process can be found in the Agile Development Process section.

Wireframes

To follow best practice and to help with planning, wireframes were developed for mobile, tablet, and desktop sizes. Balsamiq was used to design the site wireframes. The table below shows the wireframes in all three sizes (mobile, tablet and desktop).

Home Page Wireframes

Page Wireframes (mobile, tablet, desktop)
Log in page screenshot
Registration page screenshot
Individual Profile page screenshot
About page screenshot
Find Developer Page screenshot
Find Projects page screenshot

Features

Existing Features

Hompage

About page (not logged in) About page (logged in)

Registration page Social registration:
Social sign ons

Login page Social sign in:
Social sign ons

Developer Overview Page

Project Overview Page

User Profile Page Placeholder picture

Edit profile page

Delete user account

Profile Picture Overview page

CRUD functions for profile pictures

CRUD functionality of projects

Different project views

Create new project form

CRUD functionality for project pictures

Message inbox Message outbox

CRUD functionality of messages

Send new message form

Edit message form

Delete message and modal

Individual sent message page Individual sent message page Individual received message page Individual received message page

The filtering panels

An example of filtering

Pagination feature

Pagination works alone but can also be combined with the filtering mentioned above. The site is set up to recieve arguments in the url for filtering, pagination, or both. The screenshot below demonstrates some of the different combinations possible. The base url for the developer page is https://developer-connect.herokuapp.com/developers/ and queries can be made using .../developers/? followed by the query. This can be either p_language=(num) or page=(num).

The urls for filtered and/or paginated pages

Future Features

There are many features which could be added to the project at a later date but were not deemed important for this iteration of the project implementation. Some ideas for future features include:

Tools & Technologies Used

The ERD is shown below. There are 6 models which interact with eachother in a relational manner. The six models are:

  1. User
  2. User profile picture
  3. Project
  4. Project profile picture
  5. Programming language
  6. Messages

The relationships are either one-to-many or many-to-many in nature, as discussed below.

Entity relationship diagram

The following models have a one-to-many relationship:

The remaining relationships are many to many:

These three models form a "square" on the ERD as they require intermediate tables to store the many-to-many relationship details. On the ERD these intermediate tables are labelled as "user-project", "project-p-language" and ""user-to-p-language" and they store the id of the two relevant tables. For example, in the "user-to-p-language" table, the id of a user1 could be associated with programming languages 1 and 2, but at the same time programming language 1 could be associated with many other users. This table provides an interface between the user table and the programming language table so that these relationships may be stored and related information may be accessed from both ends.

*This backwards relationship has not yet been implemented, but it is on the list of future features that each project may have many users associated with it.

An example of a model used in the project is shown below:

class Project(models.Model):
    user = models.ManyToManyField(User, blank=True)
    p_language = models.ManyToManyField("ProgramLang")
    title = models.CharField(
        help_text="What is the title for your project?",
        max_length=100,
        unique=True,
    )
    description = models.TextField(
        help_text="Enter your project description here", blank=True, null=True
    )

    def __str__(self):
        return f"<Project name: {self.title}>"

    def delete(self, *args, **kwargs):
        """
        Additional function to ensure pictures are deleted
        from cloudinary
        """
        # delete associated profile pics
        for pic in self.project_pic.all():
            pic.delete()
        # then delete itself
        super().delete(*args, **kwargs)

This Project model inherits from Django's inbuilt Model class and utilises two many-to-many relationships. One between itself and the User class (which may be blank, incase an associated user account is deleted), and one between itself and the ProgramLang class (which may not be blank). The model then has a title CharField with a maximum length of 100 characters (limited as this is displayed on a bootstrap card) which must be unique. An optional description TextField may be as long as a user desires and may be left blank.

The __str__ method returns <Project name: ((project title))> so that the project may be easily identified in the admin panel.

A delete method extends the default delete method to call the delete method for each picture associated with the project, which in turn deletes the pictures from Cloudinary (this Cloudinary delete method can be seen at app_user/models.py lines 137-144).

This Project model is represented as a table below as an example:

id (unique) Type Notes
user ManyToManyField MTM to User model
p_language ManyToManyField MTM to ProgramLang model
title CharField Max length 100 chars
description TextField

Agile Development Process

GitHub Projects

GitHub Projects served as an Agile tool for this project. It isn't a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.

Through it, user stories, issues, and milestone tasks were planned, then tracked on a weekly basis using the basic Kanban board. An overview of the Kanban board is shown below. Newly created issues began in the "Backlog" column and were moved through the "Ready to Begin", "In Progress" and "Testing" columns before being maked as closed and moved to the "Done" column.

GitHub Project Board

GitHub Issues

GitHub Issues served as an another Agile tool.

There, I used my own User Story Template to manage user stories and Bug Report Template to report bugs as they were discovered. For each User Story, at least three Acceptance Criteria were recorded to indicate the criteria that must be fulfilled in order for the User story to be completed and at least three Tasks which must be performed in order to fulfil said criteria. User Story Template

The Bug Report Template is based off the Bug report template provided by Github with some minor modifications to add the tag "bug" and automatically assign it to a user. Bug Report Template

Below, the open and closed issues can be seen. These helped with milestone iterations on a weekly basis. The list below includes all issues including User Stories and Bugs.

MoSCoW Prioritization

I've decomposed my Epics into stories prior to prioritizing and implementing them. Using this approach, I was able to apply the MoSCow prioritization and labels to my user stories within the Issues tab.

These labels were added to the default ones provided by Github and can be seen in the screenshot below: Github Labels

Branches

Branches were utilised within GitHub to help seperate areas of focus and to enable more information to be given about a series of commits and how they relate to the GitHub issues mentioned earlier. This was extremely valuable for managing which user story (or other task, such as testing or documentation) was being focused on at the time and helped keep the workflow organised.

Branching may be performed in in Visual Studio Code or GitPod using the following CLI commands:

CLI command Notes
git branch list current branches
git checkout <branchname> switch to specified branch
git checkout -b <branchname> create new branch (if it doesn't exist) and switch to it
git branch -d <branchname> delete specified branch
git push origin <branchname> pushes the specified branch to GitHub

Pull requests

Once ready to merge from the created branch back to the main branch, a pull request may be made on GitHub.

Below are some screenshots of the pull request and merging process:
Pull request and merge

Normally, a reviewer would be assigned to check the pull request before merging it to the main branch, however I was the only one working on this project and therefore this was not possible.

Pull requests from different branches are accessed here. Closed pull requests Open pull requests

Below is an example pull request. Pull requests contain the details of the commits contained within them and in most cases they have been linked to the issues and milestones that they relate to with a description.

Example pull request

Testing

For all testing, please refer to the TESTING.md file. This includes User Story testing.

Deployment

The live deployed application can be found deployed on Heroku.

ElephantSQL Database

This project uses ElephantSQL for the PostgreSQL Database.

To obtain your own Postgres Database, sign-up with your GitHub account, then follow these steps:

Cloudinary API

This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn't persist this type of data.

To obtain your own Cloudinary API key, create an account and log in.

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:

Key Value
CLOUDINARY_URL user's own value
DATABASE_URL user's own value
DISABLE_COLLECTSTATIC 1 (this is temporary, and can be removed for the final deployment)
SECRET_KEY user's own value

Heroku needs two additional files in order to deploy properly.

You can install this project's requirements (where applicable) using:

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

The Procfile can be created with the following command:

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

Either:

Or:

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.

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("CLOUDINARY_URL", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")

# local environment only (do not include these in production/deployment!)
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:

Cloning

You can clone the repository by following these steps:

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

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

Open in Gitpod

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:

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

Credits

Content

Source Location Notes
Markdown Builder by Tim Nelson README and TESTING tool to help generate the Markdown files
Pylessions user registration models and forms user registration
Generic views views generic views
Uploading Images image upload (projects and profile forms) uploading images in django
Profanity checking user and project creation and edit forms profanity checking
LoginRequiredMixin entire site authentication of user
Bootstrap Pagination templates and views Pagination for Django
Codemy Pagination Youtube templates and views Pagination for Django
Django unittesting entire site unittesting for Django
Learn Django AllAuth entire site authentication with AllAuth
Pylessons AllAuth entire site authentication with AllAuth
Crispy Forms forms, templates improving form styling with crispy forms
Cloudinary image upload API image uploads uploading images throught the cloudinary API
Bootstrap Navbar entire site implementing bootstrap navbar
Bootstrap Cards templates displaying cards in developer and project overview pages
Horizontal bootstrap cards templates making project overview cards display horizontally
Logo creation entire site, home page creation of a logo and favicon for the site
Cat sample images developer profiles AI for creating unique images for samples user profiles
WhiteNoise entire site hosting static files on Heroku temporarily

Media

Source Location Type Notes
404 image entire site image 404 page image
500 image entire site image 500 page image
Coffee image project page image image for online coffee shop sample project
No img/ upload img project page image placeholder image for projects without a user uploaded image
Gallery image project page image image for online gallery sample project
Poker image project page image image for online poker sample project
Face detection image project page image image for face detection sample project
Cat sample images developer page image Most of the images for the sample user accounts were created using dreamstudio

Acknowledgements