CodeFlow was created to help bridge the gap to employed status for students. Based on the idea of the seasonal Hackathons held by Code Institute, where a brief is given and students collaborate to create finished projects, similarly, developers (or anyone with an idea) can upload projects that require full or partial contribution, called 'Piece projects' (derived from the term 'Piece work'). The idea is that the more experience a student developer gains by collaborating in a team or from developing code snippets for real-world projects, the more skilled they become at breaking down project parts into smaller more manageable pieces or problems; thus resulting in a more confident developer who is naturally more appealing in the talent pool.
As a student, I find that describing and realising the whole-parts or 'pieces' of my projects is a challenging task and leaves me questioning how long it will take for me to become suitably experienced and/or skilled enough for employment within the industry of software developement. I would like exposure to others' projects and an opportunity to offer pieces of code I have written according to a brief to help me improve my skillset, increase speed and boost my confidence. I am certain that I am not alone and that the majority of software developer students, whether they are studying through an institution or self-teaching will find value in the same.
CodeFlow aims to provide a platform that makes it easy to keep track of the projects that any person/entity with a project or idea, be it project manager, developer, student or whomever, who would like to share it in part or whole with collaborators.
All 'noobs' are blessed when we can stand on the shoulders of giants and learn from more experienced developers/programmers. The CodeFlow Blog page is an area of the app that invites the community to post articles that impart knowledge or learning based on experience, interesting articles about new technologies, events, recommended books or courses or absolutely anything of relevance that benefits the readers.
Create a platform that helps me and my peers on our journey towards employment as Software Developers and beyond.
Acquire 'Domain' knowledge.
Develop an application that is easy to use and meets the needs of the target audience and one which is aesthetically pleasing and intuitive to all users/visitors.
Purposefully implement a database design suitable for the application.
Become proficient at developing a Flask Web Application that successfully stores and retrieves data from a MongoDB database.
Create a project plan that outlines my project idea and the elements required to complete it.
Learn additional material and develop a deeper understanding of the material already covered in the course.
Produce a project that meets all the requirements of the MileStone Project criteria.
Produce a project that I am proud of.
Software Development Students (Bootcamp, College/University or self-teaching).
Project Managers.
Developers.
Mentors.
Anyone/entity with a coding project.
Have a community platform to:
Post or find projects open for collaboration.
Post or search profiles of users who are available to collaborate.
Share useful and relevant content.
Find articles and project helpers.
Establish a reputation within the community.
In addition to the current goals:
A platform where hiring personnel search for potential candidates based on ratings.
A site that is monetised via:
Author's advertising their books and courses.
Business' advertising their products/services/events.
Implement additional features that facilitate the above goals.
As a site visitor, I expect/want/need: A responsive and intuitive site that helps me effectively achieve my goals. Content to be separated into clearly distinguishable pages and sections and presented to me as per my current needs or actions taken. Informative feedback on the actions I take when necessary or when there is a problem that prevents my actions from being successful.
As a student, I want a place to showcase my profile that highlights my skills to project owners and also indicate the types of projects I am interested in working on. I want to be able to update my profile with new skills and languages as I progress. I want to be able to find projects that are open for collaboration and a means to be able to express my interest directly to the project owner. I want to be able to view any pieces that I have been given and their current status. I want to be able to submit pieces once I have completed them and update their status. I want to receive feedback on the work I have submitted. I want a platform that provides a way for me to build up a reputation as a software developer. I want a platform that I can read interesting articles directed at students software developers.
As an owner, I would like to have a way to connect with students that are looking for opportunities to collaborate on small projects. I want to be able to see student profiles and be able to establish suitability for my projects. I want a means to communicate with students directly regarding my projects and pieces I have created for them. I want to be able to keep track of and check the status of all project pieces I have created. I want to be able to update and delete my projects as necessary.
As an experienced developer, I would like to be able to share helpful articles and content with students and the community in general, on a relevant platform.
The initial mockups and database design are included below. I found the need to change some of the design decisions during development, particularly for the user dashboard. Initially, I had planned on using accordions to display the content but realised that it was too heavy and changed to tabs because it was better suited to display so much content. This also meant I could separate the content even further and provide more real estate for each dashboard feature which was visually better from a readability perspective.
The Database Schema was the first task I started upon for the project which took a lot of time. I particularly wanted to get this part as close as possible to what I believed to be required for the app before starting to code. There was very little change required during development and I found this approach gave me a much better insight as to what was required for the project. I didn't need to include the category collection in the end.
As I was a implementing RWD methodology, I only created mockups for Desktop as, with the Bootstrap framework, a lot of the responsiveness is taken care of already. I decided during the development process how to structure elements for what I felt was the most optimal user view and experience across all screen sizes with the minimum of changes necessary. I based this decision on that fact that I believe that this application would be predominently accessed on a Desktop, when considering the User Types.
(Unable to display other mockups as they have been deleted accidentally)
The initial Database Design was a constant reference point when creating forms and view functions and was invaluable. It would have been more difficult without it. It was worth the amount of time spent on it.
The app relies on a number of collections with documents having back references to the user collection. Collections list
- user
- articles
- article_comments
- profiles
- profile_msgs
- languages
- frameworks
- projects
- project_msgs
- project_pieces
The colour scheme was derived from colours taken from the landing page image. I used a combination of colormind.io, Adobe Color CC and palettegenerator.com to come up with a colour palette that I felt was complimentary to the app and the hero image.
I entered all the colour codes generated from the above into Adobe Color CC and used the 'color wheel' tab to find complementary colours and based my choices on my findings but not on the actual colour themes that were generated.
I used Adobe Illustrator to create the logo, default user image, and feature card icons for the home page.
-
Blog page
The blog page is publicly accessible so anyone can read the articles that are posted. Only logged in users can post articles and comments, however. The feature is aimed to satisfy all user types as well as the community at large. -
Profiles Page
Showcasing user-profiles - this page helps project owners find collaborators that they feel will be a suitable candidate for their projects. It provides a student user type with a place to present themselves and make known their interest and availability as a collaborator. -
Projects Page
This page helps a project owner/manager user type present their projects to members that are a student user type. The project pieces form is accessed via this page and helps this user type to create piece projects for specific users. -
User Dashboard
4.1 User Profile Image
This feature makes the platform a little more social. Profile images will be linked to user posts in the next sprint facilitating familiarity between users based on the notion that an image is more easily recognised than a username. The images are stored in a S3 bucket, renamed with the user's username, converted to jpg and saved as a string in the database. This means that only one profile image is saved per user account.
4.2 All User Content
The Dashboard is the place where users will find all their content, either created by them or sent to them. They can edit and delete their content here. This helps both owner and student user type manage and keep track of their content and commitments. -
Direct Messages
This feature helps both owner and student user type with their need to communicate regarding collaboration and projects. Direct messages are sent via the profiles or projects page but are only displayed to users on their dashboard. This feature enables private, P2P communication between the relevant parties. Having the DM's in the user's dashboard, separated between sent and received messages, means users can find and respond more quickly to invitations and requests as well as acting as a store of messages they have sent. This exposes messages that have not received a response. -
Piece Projects
This feature was the main feature that I wanted to implement as it provides a way for a project to be shared and managed. Breaking a project up and sharing it between several collaborators would be very challenging without a means of keeping track. The project pieces are listed in the various stages of the lifecycle, namely:
Pending Acceptance:- pieces that have been created for a collaborator but not yet accepted. Accepted:- pieces that have been accepted by a collaborator indicating their intention to complete and submit the work.
Pending Approval:- pieces that have been completed and submitted but not yet accepted by the project owner.
Closed:- pieces that have been accepted will have their status changed to closed.As the pieces are listed on the page according to their status, both owner and collaborator can easily keep track of the active pieces.
-
File uploads
File uploads assist both owner and collaborator types with the projects. It helps owner user types the to provide additional information about their project and collaborator user types to submit completed pieces. -
ReCaptcha: A ReCaptcha widget was implemented to help protect the app from spam and other abusive actions and helps prevent bots from being able to register accounts. It is used for registering an account and for updating passwords or uploading profile images and files. This feature helps to provide a measure of comfort for all user types that the content they are accessing has been created by a real person.
-
CkEditor: A text editor with standard configuration has been implemented for text area boxes that could potentially require additional formatting.
-
Keyword Search:
while this is a very useful feature, it is currently listed for the second sprint which I intend to implement soon, particularly if I see that the application is being used and it becomes a necessity. -
User Feedback Survey:
I would like to have this feature as a button on the landing page to learn how to improve the app for users. This feature provides market research than can only be gained if users are actively accessing and using the application. -
Pagination:
Again, this is a feature that would be useful to have when enough content has been created and is easily implemented. -
User ratings (votes) - to build up a reputation for collaborators:
This feature will be very beneficial to the student user type as it would serve as a verification/reference of collaboration and also to Hiring managers and the owner user type when considering requests for pieces while viewing profiles. -
Message notifications:
This feature would be great to implement as it would help users know that they have received messages when they log in and perhaps be a motivator for users to log in if notifications are sent via email. -
Email authentication:
Currently, there is email address validation but this is definitely something that I would change on the next sprint and use JWTokens. -
Automation of tasks:
For instance, when the status of a particular project piece is changed, the referenced piece in the project document gets updated as well. This is something I will need to figure out and would make for a more user-friendly application requiring less user management. -
Database Housekeeping:
Implementing an expiry on 'closed' project pieces will help to maintain a clean database. This would require much more than I am capable of currently but something that is very necessary. Having the task automated via MongoDB would be the most ideal method. (Since implementing file uploads to AWS s3, this feature is no longer required as the removal has, to an extent, been passed to the project owners discretion on the dashboard Sent Pieces 'closed pieces' section, however, the bucket objects can have an expiry placed upon them and this is now the intention going forward, instead). -
Integration with Slack: Considering the nature of the app, once I can figure out how to make it a useful feature to implement for project owners, I would like to include this a feature.
-
Social Media: Adding social media sharing icons would create more user enagagement.
Testing has been carried out continuously throughout the development lifecycle. With each feature addition or update, testing and retesting was done from different user accounts that were purposefully created for testing and sending data between different user accounts.
User testing and feedback was also provided by family and friends in different regions using a variety of devices and browsers at various stages of development.
Testing has been done on all major broweser including the brave browser on mobile and desktop and android and iOS of several sizes.
Personal Findings:
Mobile browsers provide a different perspective and the buttons appear differently on each of them and in some cases, they are not uniform even on the same browser.
Checking Chrome dev tools for mobile rendering provided a very inaccurate representation.
Feedback: Final testing between several parties was conducted on completion of the functionality, via users without any undertanding of web development and the feedback was positive; mostly of the nature that the site everything seemed to work and no real difficulty understanding how the site worked, especially after clicking through the navigation. I am not able to accurately identify all that was done by the testers, the content that has been populated and displayed on the site and in the database,is satisfactory and indicates a good deal of testing was done.
To install this project to run on a local machine the following steps are required:
Ensure the following is installed
- Python 3.7
- PIP
- pipenv (recommended) or venv
- Git
- MongoDB Compass; otherwise MongoDB Atlas can be used (an account is required for either). See MongoDB for documentation, information and to learn about using a Python driver such as Pymongo to connect your app with the database and the commands used to perform operations on the database.
-
Find the repository on GitHub and either save a copy of the repository locally to your chosen folder in your local file system by clicking the green code download button and choosing 'Download ZIP' and extracting the zip file or using Git to clone this repository the link is also found within the same button on the repository page.
-
Open a terminal either in your code editor or the one installed on your machine to unzip the download or use the command
git clone https://github.com/SPH73/codeflow.git. -
Setup your virtual environment. I recommend using pipenv but venv otherwise - refer to the links provided in the installation section on how to use pipenv and venv for your operating system.
-
To use pipenv to install using the Pipfile change into the directory you are using for the application and use the command
pipenv installor if using pip then use the commandpip -r requirements.txt. Both methods install all the required modules to run the application. -
Run
pipenv shellto activate the virtual environment,
exitto deactivate
pipenv update --outdatedto find out if there are any changes in the packages or
pipenv updateto upgrade them all. -
Create files to serve your environment variables for the application please note that these should NOT be pushed to your repository but stored in a
.gitignorefile. Create.flaskenvto set the flask environment variables as follows: FLASK_ENV=development FLASK_APP=run.py TESTING=True You will change these for a production environment.Create
.envstore your own keys as follows: SECRET_KEY = 'yoursecretkey'
If you are using a google recaptcha (link in Technologies section) RECAPTCHA_PUBLIC_KEY = 'yoursecretkey' RECAPTCHA_PRIVATE_KEY = 'yoursecretkey'
Obtained from your mongodb database under 'Connect' MONGO_URI = "yourconnectionstring"
If you are storing file uploads in an AWS S3 bucket (link in Technologies section)
S3_BUCKET=yourbucketname
AWS_ACCESS_KEY_ID=yourawsaccesskey
AWS_SECRET_ACCESS_KEY=yourawssecretaccesskey
The application should run successfully once the above instructions have been completed.
A Heroku account
An app created on Heroku - click on 'New' and 'Create new app' to create an app with a unique name and specify the region.
Within the app select the 'Deploy' tab, select GitHub as the deployment method and choose automatic deploys from master.
Under the 'Settings tab, click on 'Reveal Config Vars' and add your environment configuration variables as the KEY and the values as the VALUE.
Add in IP: 0.0.0.0 and PORT: 5000 in addition to the variables listed above.
Within your application files, Heroku requires:
Pipfile if using PIPENV - you will need to pin the versions of the package for deployment (please take some time to learn about pipenv), otherwise, a requirements file is needed. Update the requirements file by running the command pip freeze > requirements.txt
Create a Procfile using the command echo web: python run.py, which tells Heroku how to run the application.
Completing the above steps should result in your site being deployed successfully.
Inspect the logs if there are any problems that result in a 500 error. Logs are found under Settings and clicking on 'More' then 'View logs' to see where the error is.
Hero image - Photo by Joseph Barrientos on Unsplash Bridge Top - Photo by Joshua Sortino on Unsplash CSS code for Recaptach resizing for mobile screens by GeekGodess
The script and function to get the file size before upload was taken from pythonise.com as I had been unsuccessful in consistently getting the filesize before saving the file. Some browsers do not send content.length information and this was a better solution. jinja datetimefilter and partial code to upload to Amazon S3 taken from the Flask with Amazon S3 Tutorial. Corey Shafer Full Featured Flask Blog Tutorial was used to get started with building the app particularly the wtforms section, although there is no copied code the idea for the nav division and logged in and out views was take from the tutorial.
The dashboard tabs were an adaption from W3Schools how to and modified slightly and the accordions functionality came from various YouTube tutorials, of which I have not able to find again.
Special thanks to the following individuals for without their help I might still be struggling along:
Brian Macharia - my mentor for supporting through this journey and for helping me get the SelectMultipleField option working in my profile form.
To Haley Shafer for helping me debug the project messages route function during a screen share session and extra thanks for finding an alternative method of screen share when the slack option wasn't working;
to Michael Parks for helping me understand why some content on the dashboard wasn't rendering and suggesting a way to achieve it;
to IgorB (data-centric channel lead at the time) for spotting an error on the user 'pieces' loops on the dashboard feature and
to Simen (@Eventyret_mentor) for giving me a showing me a method of getting an element ID in a loop.
I am also very grateful to my children and friends for their patience and understanding of my absence and lack of time during the development of this project.
This is a list of resources I used for the project. It is by no means exhaustive but added for the benefit of other students and as a personal reference during development.
pipenv was used to create a virtual environment. It is the recommended python virtual environment management according to the official docs.
Python secret key generator generated in the python repl using secrets.token_hex(16), which is designed for security and cryptography and returns a random text string in hexadecimal using the os and secrets module.
Flask
Flask tutorial
flask-wtf
Wtforms
File uploads
Recaptcha Tutorial
Google reCAPTCHA Tutorial
Flask_PyMongo Docs
Flask-Pymongo
Flask deployment options
Deploying to Heroku
Favicon-generator
TextEditor
Date Picker Widget
Python Pillow Package
Flask Project Structure Best Practices
boto3
jinja filters
I updated the project structure by turning the application into a package with __init__.py and moving the routes to routes.py. To avoid confusion I renamed app.py to run.py to be different from the package name. At the same time I created a requirements.txt to be inclusive of choice/preference for other developers, deployment and the assessors.
I had wanted to create a scrolling effect on the impact text section of the home page, which is why I used grid columns but as I wanted to ensure the site had functionality above cool design effects, I have left that for the next sprint. I left in the data-rates and the scroll class beacause I intend to fork the project and complete that design aspect immediately after submitting. however I removed the script block as that was incomplete code.
The code, particularly the routes module, needs to be refactored, as there is a lot of repeated code. This is something I will do as a learning exercise when I have forked the project after submission. Also, I have duplicated some data being pushed to the database, which needs to be evaluated for future use in the next sprint and a decision made regarding the original intention and wherther it will be useful or not but as I am not certain it has remained for now, since it is valid code. It felt risky to attempt big changes at this stage given the time I had remaining to complete the project.
Throughout developement, I noticed that I regularly jumped around instead of completing each part before tackling another. As a goal for my next project, I want to work on this area. I believe it will help me to take less time to complete projects and hopefully mean fewer mistakes are made.