Code Together

Code Together was created as a free platform to connect software developers with mentors, and pair programmers to learn, help, and build together.

Table of Contents

1. UX

   • Goals
   • User Stories
   • Wireframes

2. Features

   • Existing Features
   • Features Left to Implement

3. Information Architecture

4. Technologies Used

5. Testing

6. Deployment

   • Local Deployment
   • Heroku Deployment

7. Credits

UX

Goals

The goal of this project is to create a web application to connect software developers with mentors, and pair programmers. It's aim was to be built in Python in conjunction with the Flask framework, and MongoDB to enable users to create, read, update and delete (CRUD).

User Goals

The target audience for this project are:

• Developers looking to find a mentor
• Developers looking to find a pair programming partner
• Developers looking to start mentoring other developers

The user goals are to have:

• A platform that easily connects developers with mentors, and pair programmers
• A simple, user friendly search functionality to find who they're looking for
• Their own profile with relevant information that they can edit themselves
• The ability to contact another developer

User Stories

A user of Code Together expects to:

• Be able to register, login, and logout
• Have their own profile which they can create, read, update or delete
• Search through the database for all mentors and pair programmers
• Search for mentors/pair programmers with a specific expertise
• Search for mentors/pair programmers with a specific name
• View another users profile
• Contact another user

Wireframes

These wireframes were created using Balsamiq.

• Home
• Login/Register
• My Profile
• Edit Profile
• Mentors
• Pair programmers
• User Profile
• Messages

Features

Existing Features

Navbar

• For users who are not logged in, only the following links are visible:

  1. Mentors
  2. Pair Programmers
  3. Login/Register

• For users who are logged in, the following links are visible:

  1. Mentors
  2. Pair Programmers
  3. A circular user icon (when clicked it displays a dropdown menu)
     • Profile
     • Messages
     • Log out

Home Page

• This is used as the landing page. It gives some information about what the website is and gives users the option to register or login.

Login Page

• This page displays the form that users can use to login so that they can gain access to all the features of the website. It also gives an option that will bring you to the register page.

Register Page

• This page displays the form that users can use to register an account.

Edit Profile Page

• This page displays the form that users can use to edit their profile.

My Profile Page

• This is the logged in users own profile page that's automatically generated with the information they provided to the database.

User Profile Page

• This is the profile page of another user that isn't the one logged in. It is also automatically generated with the information they provided to the database.

Mentors Page

• This page shows all of the people looking to mentor other developers. It also has search functionality.
• A user can search by:
  • First name and/or last name
  • Expertise
• A user can click on an expertise tag and it will automatically search for everyone with that expertise e.g Python

Pair Programmers Page

• This page shows all of the people looking to pair program with other developers. It also has search functionality.
• A user can search by:
  • First name and/or last name
  • Expertise
• A user can click on an expertise tag and it will automatically search for everyone with that expertise e.g Python

Global Chat

• Users can chat with each other in this global chatroom
• The messages aren't saved so they will disapear once you close the window

Features Left To Implement

Messaging

• The ability for users to contact each other within the website through the medium of:
  • Private text messaging
  • Screen share
  • Multiplayer live code share

Forgot Password Option

• Have the option to get the users password sent to their email if a user forgets it

Information Architecture

A MongoDB NoSQL database was used in the creation of this website.

Users Collection

This is the JSON structure of the users collection:

{
    _id : ObjectId(),
    first_name : String,
    last_name : String,
    password : Encrypted String,
    description : String,
    avatar : String,
    about : String,
    expertise : Array,
    looking_to : Array,
    contact : {
        email : String,
        skype : String,
        github : String,
        linkedin : String,
        discord : String,
    }
}

Technologies Used

Tools

• Cloud9
  • The IDE Cloud9 was used throughout the project for development.
• Git
  • The project uses Git for version control during the development process.
• GitHub
  • The project uses GitHub for a remote repository.
• Balsamiq
  • The project used Balsamiq to build wireframes in the planning stage of development.
• Google Chrome - Dev Tools
  • The project used Google Chrome - Dev Tools to test responsiveness, to debug code by utilising breakpoints and the console, and to speed up the design process.
• PIP
  • The project used PIP to install the tools needed in this project.
• MongoDB Atlas
  • The project uses MongoDB Atlas as the database for this project-
• AutoPrefixer
  • The project used AutoPrefixer to add prefixes in the CSS for cross-browser support.

Libraries

• JQuery
  • The project uses JQuery to simplify DOM manipulation.
• Materialize
  • The project uses the Materialize framework to help create a responsive design.
• Material Icons
  • The project uses Material Icons to create icons.
• PyMongo
  • The project uses PyMongo to facilitate communication between Python and MongoDB.
• Flask
  • The project uses Flask to dynamically render pages.
• Jinja
  • The project uses Jinja to efficiently provide data from the backend to the templates.
• Flask-Login
  • The project uses Flask-Login to handle user sessions for login functionality.
• Flask-WTF
  • The project uses Flask-WTF to effectively handle form data.
• Flask-SocketIO
  • The project uses Flask-SocketIO to handle messaging functionality between users.

Programming Languages

• This project uses HTML, CSS, JavaScript and Python.

Testing

Validation Tools

These tools were used to test the validity of the code for this project:

• W3C HTML Validator was used to validate HTML.
• W3C CSS validator was used to validate CSS.
• Pythoniter was used to format python.

Testing Matrix

A testing matrix was created using google spreadsheets. It details all of the tests to make sure the site is responsive and works on different screen sizes, devices, and browsers. The testing matrix can be found here.

Deployment

Local Deployment

To run this project locally the following must be installed in your IDE:

• Git
• Python 3
• PIP
• MongoDB

Instructions

1. Follow this link to the main page of the isaacwoodruff/code-together repository.

2. On the right side of the page click the green Clone or download button.

3. In the 'Clone with HTTPS' section, copy the URL for the repository.

4. Open your terminal/Git Bash.

5. Change the current working directory to the location where you want the cloned directory to be made.

6. Type git clone, and then paste the URL that was copied in Step 3 or copy and paste this command:

   git clone https://github.com/isaacwoodruff/codetogether.git

7. Press Enter.

8. You can either

   • Create a virtual environment and create environment variables for IP, PORT, MONGO_URI, and SECRET_KEY.
   • Or edit the app.py file like the following variables:

     'IP', '127.0.0.1'
     

     'PORT', '5000'
     

     'SECRET_KEY', '<somethingsecret>'
     

     'MONGO_URI', 'mongodb+srv://<username>:<password>@<cluster_name>-ocous.mongodb.net/<database_name>?retryWrites=true&w=majority'
     

9. Install all required modules from requirements.txt with the command:

   pip3 install -r requirements.txt.
   

10. Now you can run the website with the command:

    python3 app.py
    

11. You can now access the website at http://127.0.0.1:5000

Heroku Deployment

1. In your terminal create a requirements.txt file using the command:

   pip freeze > requirements.txt
   

2. Then create a Procfile with the terminal command:

   echo web: python3 app.py > Procfile
   

3. Commit your changes and push to GitHub with the terminal commands:

   Note: set your GitHub remote to origin if not done already

   git add requirements.txt Procfile
   

   git commit -m "Your commit message"
   

   git push origin
   

4. Go to Heroku and create a new app by clicking the New button in your dashboard. Set your app name and set the region to whichever is closest to you.

5. In the heroku dashboard of your application, click on Deploy then Deployment method and select GitHub.

6. Click confirm in the pop up window to link the heroku app to the GitHub repository.

7. In the heroku dashboard of your application, click on Settings then Reveal Config Vars and set the following:

Key	Value
IP	0.0.0.0
PORT	5000
MONGO_URI	mongodb+srv://<username>:<password>@<cluster_name>-ocous.mongodb.net/<database_name>?retryWrites=true&w=majority
SECRET_KEY	<somethingsecret>
DEBUG	FALSE

To get your MONGO_URI please reference the MongoDB Atlas documentation.

7. In the heroku dashboard of your app you can either click Deploy or enable Automatic Deploys in the Automatic Deployment section.

8. To pick your branch for manual deployment go to the Manual Deploy section and set the branch to master then click Deploy Branch.

9. Your site is now successfully deployed at:

   your-heroku-app-name.herokuapp.com
   

Credits

Content

• All written content was created by the developer

Media

• Some avatars used were from these sources
  • Flaticon-hipster
  • Flaticon-hacker
• The favicon for this website is from Flaticon-code
• The index page uses images from these sources
  • Freepik-image-1
  • Freepik-image-2
  • Freepik-image-3
  • Freepik-image-4
• The GitHub logo in the footer was sourced from FlatIcon-GitHub
• All wireframe images were created by the developer and uploaded to imgBB

Code

• The nav bar and mobile nav bar were taken from Materialize and modified to suit the website
• The tabbed content structure on the user profiles was taken from a CodePen by Mohit Aneja and modified heavily
• The login system was adapted from How to use MongoDB (and PyMongo) with Flask-Login
• The messaging functionality was created from parts of this article Building your first Chat Application using Flask in 7 minutes

Acknowledgements

• The flask-login, and flask-socketio docs were invaluable during the development process
• Materialize sped up the development process considerably
• Thanks to Aaron Sinnott for his suggestions throughout the project