Introduction

AR Agency was created by both Ayo Akinsola and Ruth Dara-Akinsola to help organizations grow by finding the right talents. Talents that really match the corporate culture. We believe that this is the basis for a long-term relationship. If talents believe in what you believe, it is possible to build a strong brand and achieve structural growth.

Table of Contents

1. UX

   • Objectives
     • Visitor Objectives
     • Business Objectives
     • AR Agency Objectives
     • User Stories
     • Visitor Stories
     • Business Stories
     • Design Choices
     • Wireframes
     • PDF

2. Features

   • Existing Features
     • Elements on every Page
     • Home Page
     • About Page
     • Employers Page
     • Contact Page
     • Login Page
     • Sign Up Page
     • Vacancy Page
     • Listing Page
   • Features Left to Implement

3. Information Architecture

   • Database choice
   • Data Storage Types
   • Database Structure
   • Template Style

4. Technologies Used

5. Testing

   • Validation services
   • Python Testing
   • User Stories Testing
     • Visitor Stories
     • Business Stories
   • Manual Testing

6. Deployment

   • Heroku Deployment
   • How to run this project locally

7. Credits

   • Content
   • Media
   • Acknowledgements

UX

Objectives

Visitor Objectives

The central target audience for AR Agency are:

• Stdents looking for a student jobs.
• Dutch/English speaking candidates.
• High Skilled Migrants.
• Graduates.

User Objectives are:

• Job seekers have a place to search for jobs in the Netherlands, that offers its listings in both Dutch & English.

• Employers can have access to best candidates.

• Saves time of both Employers and prospective candidates.

• Job seekers would be helped through the application process.

• Candidates can be sure they have access to more opportunities.

• Users can have their data stored so they can be contacted for jobs at anytime.

AR Agency is a great way to meet user needs because:

• AR recruitment agency has access to the best talent available.

• AR recruitment agency saves time because they take care of the initial steps in the hiring process.

• AR Recruitment agency conducts background checks on candidates, which is essential when considering potential employees.

Business Objectives

• Searching for specialised & executive roles.

• Fulfil both short & long term needs.

• Provide a pipeline full of talent to make business decisions.

• Recruiting agencies are partners, not foes.

Business User objectives are:

• A well thought-out, well designed, user-friendly platform that will benefit sell the core function of AR Agency.

• A user interface that is user friendly manage data easily, efficiently & effectively.

• Value creation. Having an online presence to market AR Agency properly.

AR Agency Objectives

• Provide access to key strategic skills

• AR recruitment agency can speed up the time it takes to find a new employee

• Offer specialist knowledge by telling you what the job market currently looks like and also also let you know how to best achieve your recruitment needs.

• The data management structure has been put in place to manage data and make sure what is provided fits the needs of the database structure.

• The listing page can only be edited by logged in users who post a job.

• The listing page for the business user shows all their existing listings and gives them the option to view, edit or delete them from this location.

• THe site offers the business user links and buttons to make navigation easy.

User Stories

Visitor Stories

As a visitor to AR Agency I expect/want/need:

1. I would like the app to be easy to use.

2. I would like to easily find what I am looking for, I want the layout of the site to make sense so I am not confused or put off using it.

3. Be able to register to have my own profile.

4. I would like to be able to delete my job posting and all content added by me at any point.

5. I would like to be able to edit my job posting and all content added by me at any point.

6. As a user of AR Agency, I expect to be able to easily get in contact via a contact form.

7. I would like to post jobs on a online database.

8. As a user accessing this site from a mobile phone or tablet, I want the site to have been designed responsively so that it is still easy to navigate and use on my smaller devices.

9. As a user, I would like to view the jobs that I have posted.

10. As a user of the AR Agency website, I expect to be able to connect to their social media channels, to keep up to date with new entries on the site..

Business Stories

1. To be able to log in to access my existing vacancies, and for my data to only be editable with my account.

2. To see that various methods of contacting my business are available to users using AR Agency.

3. To create, edit and delete vacancies in my account.

4. A user interface that is simple and easy to use, that is laid out in a logical way.

5. Forms for inputting my data to make the process of posting a vacancy very smooth and fast.

Design Choices

The AR Agency has an overall professional feel, with emphasis on appealing to both visitors and business users. The following design choices were made with this in mind:

Fonts

• The primary font Poppins was chosen because geometric shape of the letter form is near equal in terms of height and the spacing between characters is perfect. It looks great as a heading font and as body text.

• The secondary font Raleway was chosen the appearance is sharp and functional. Raleway brings an elegant, yet bold presence to any website.

Icons

• Social media icons for facebook, instagram and twitter are used only in the footer on the site.

Template Style

I opted for the Bootstrap 4 framework. As a tool, Bootstrap 4 is excellent to get started,it offers improved grid system with a new tier that allows you to target mobile users better than ever before. Additionally, semantic mixins have undergone the major update as well.

Wireframes

The wireframe was created using Figma during the conceptul phase and project proposal to my mentor.

You can find the wireframe here.

PDF

• AR Agency Database Schema

This document was created during the planning phase of this project. The final website has some slight differences from what was planned. But I included this document in the project to provide insight into the original planning and direction of the site during the planning stages.

To top

Features

Existing Features

Elements on every page

• Navbar

  • The navigation bar features the AR Receuitment logo in the top left corner.

  • For visitors to the site, list items links are available for them to use.

    1. Home
    2. About
    3. Employers
    4. Contact
    5. User icon(this is a dropdown menu)
       • Log in
       • Sign up

  • For users who are logged in, the list items are as follows:

    1. Home
    2. About
    3. Employers
    4. Contact
    5. User icon(this is a dropdown menu)
       • Log out

  • Python determines if the user is logged in or not by checking if 'user' in session and passes this data to Jinja to display the correct navbar for the user.

  • The navbar is collapsed into a hamburger icon on mobile view.

• Footer

  • The footer features:
    • Links to social media locations (which are facebook, twitter, linkedin and youtube ).

Home Page

• The AR home page features a colorful image of myself. I had earlier chosen a different picture but my wife convinced me to go ahead with this.. I chose this image because it is eye catching and striking, and it shows that AR Agency is ready for business.
  This image was coded as a background-image in css and set to background-size: cover; so that it is responsive while never getting stretched or distorted.

About Page

• The AR about page features a colorful image. This image was coded as a background-image in css and set to background-size: cover; so that it is responsive while never getting stretched or distorted. Also, there are 8 companies which we currently have in our portfolio
  • Wire
  • Real Wave
  • Inner
  • Gabo
  • Crosswill
  • Pitch
  • Job line
  • Loud Nick

Employers Page

• The AR employers page features a colorful background image. This image was coded as a background-image in css and set to background-size: cover; so that it is responsive while never getting stretched or distorted. Also, there is a post a job button that links to a form for employers to post a vacancy. Finally, there are 8 companies which we currently have in our portfolio

  • Wire
  • Real Wave
  • Inner
  • Gabo
  • Crosswill
  • Pitch
  • Job line
  • Loud Nick

• Finally there are 6 reasons why you should work with AR Agency

  • Fast Hiring Process
  • Low Fees
  • Large Talent Pool
  • Local & Remote
  • 20 years experience
  • Custom Consulting

Contact Page

• The AR contact page features a colorful background image. This image was coded as a background-image in css and set to background-size: cover; so that it is responsive while never getting stretched or distorted. Also, there is a Email button that scroll down to the contact form. When the contact form is filled a message is flashed to show that form has been filled andthe details are saved in mongodb.

Login Page

• The AR login page features no background image.
• The log in page features a simple form where the user can enter their username and their password.
• If the user inputs incorrect data a message is flashed ìnvalid username/password.
• When the form is correctly filled a message is flashed to show that form has been filled and the details are saved in mongodb. Thereafter, the user is logged in.
• While logged-in, the log-in button disappears and the only button that shows is the log-out button.

Sign Up Page

• The AR sign-up page features no background image.
• The sign up page also features a simple form where the user can enter their username, email and their password.
• When the form is filled a message is flashed to show that form has been filled and the details are saved in mongodb. Thereafter, the user is redirected to the login page for them to login.

Vacancy Page

• The AR vacancy page features no background image.

• The vacancies page features a listing of jobs that have been posted by prospective employers.

• When the employers post a job, it gets fetched from mongodb through a for loop and posted automatically to the vacancy page.

• The following gets fetched from mongodb:

  • {{employer.job}}
  • {{employer.address}}
  • {{employer.salary}}
  • {{employer.employment}}

Listing Page

• The listing page for an entry in the database displays that information in clearly laid out and easy format. Utilizing set out template on listing.html. The following data is fetched from mongo using these templates:

  • {{employer.job}}
  • {{employer.address}}
  • {{employer.employment}}

• The job description for the listing page are displayed in a way that is easy to read and understand.

• The responsibilities for the listing page are displayed in a way that is easy to read and understand.

• The qualifications for the listing page are displayed in a way that is easy to read and understand.

The listing page also features 2 buttons Apply now & I'm Interested. Once both buttons are clicked it opens the candidate form where they can submit their vacancies.

Features Left to Implement

1. Email authentication

   • Implementation of email authentication of user account before registration is complete.

2. Full text search

   • A search bar at te home page but it is hard to implement given the time required to complete this course.

3. Pagination

   • I did not implement this as it was beyond the scope of this course but it would be useful to implement flask-paginate on the vacancies page.

4. Filter pane.

   • In order to filter by date, employment and type of job.

5. Content

   • I was not bale to add enough content becuase of time. But since this project is going to be eventually deployed, I will add more conted in due time.

6. Upload Image

   • In future projects, I would like to add a upload a image button to allow the user to upload a images of their companies so that it gets fetched when they post a job.

To top

Information Architecture

Database Choice

For this project, a NoSQL database structure is required. In that regards, Mongodb which is a document based databased is used to store data.

To have easy access to relational data, inner objects were used inside the data structure so that they could be accessed and looped through where needed.

Data Storage Types

The types of data stored in MongoDB for this project are:

• ObjectId
• String
• Boolean
• Object

Database Structure

contacts: {
_id: 5f214f5d7118fff4378bf9c0
first_name: "string"
last_name: "string"
email: "string"
message:  "string"
}

candidates: {
_id: 5f1e4bd7ae7f3a29b7ae72dd
salutation: "string"
first_name: "string"
last_name: "string"
email: "string"
phone:  "integer"
job: "string"
file:  "string"
}

employer: {
_id: 5f22a3ecba875592b4abeb14
salutation: "string"
first_name: "string"
last_name: "string"
company_name: "string"
size: "string"
email: "string"
employment: "string"
address: "string"
phone:  "integer"
job: "string"
file:  "string"
}

users: {
_id: 5f0fa3f8623dadac19744ad2
password: "string"
name: "string"
}

To top

Tools

• Gitpod is the IDE used for developing this project.
• PIP for installation of tools needed in this project.
• Git to handle version control.
• MongoDB Atlas is the database for this project
• GitHub to store and share all project code remotely.
• Am I Responsive to create the images in this readme file of each page displayed on different screen sizes.

Libraries

• JQuery to simplify DOM manipulation.
• Bootstrap to simplify the structure of the website and make the website responsive easily.
• FontAwesome to provide icons for AR Agency.
• Google Fonts to style the website fonts.
• PyMongo to make communication between Python and MongoDB possible.
• Flask to construct and render pages.
• Jinja to simplify displaying data from the backend of this project smoothly and effectively in html.

Languages

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

Other Resources

• w3schools
• Stack Overflow
• Slack

To top

Testing

Validation Services

The following validation services and linter were used to check the validity of the website code.

• W3C Markup Validation was used to validate HTML.

• W3C CSS validation was used to validate CSS.

• Python Buddy was used to validate Python.

User Stories Testing

Visitor Stories

As a visitor to AR Agency I expect/want/need

1. I would like the app to be easy to use.

   • The AR Agency navbar is laid out in the conventional way:

     • Navbar is at the top of the screen.

     • The logo on the far left of the navbar and links to the right of the home page.

     • The About, Employers, contact, login & log out links are all provided in the navbar where the user would expect to find them.

     • The navbar shows the user appropriate links depending on if they are logged in or out.

   • The footer is also laid out in a conventional way:

     • Social media links also provided in the footer where the user would expect to find them. When they are clicked upon, they link to the appropriate social media platform.

2. I would like to easily find what I am looking for, I want the layout of the site to make sense so I am not confused or put off using it.

   • On the home page, two buttons are available where the visitor can post or search for a job.

     • The looking for a job button links the visitor directly to the vacancies page where all jobs are posted.

     • The searching for a talent button links to a form where employers can post a vacancy which would be directly posted on the vacancies page.

3. Be able to register to have my own profile.

   • On the navbar there is an dropdown menu icon wehre the user can register and have their profile saved.

     • Once logged in the user/visitor can delete or edit a vacancy.

4. I would like to be able to delete my job posting and all content added by me at any point

   • On the navbar there is an dropdown menu icon wehre the user can register and have their profile saved.

     • A visitor can only delete a vacancy only when they are logged in.

5. I would like to be able to edit my job posting and all content added by me at any point.

    - On the navbar there is an dropdown menu icon wehre the user can register and have their profile saved. 
   
    - Once logged in the user/visitor can edit a vacancy. 
   

6. As a user of AR Agency, I expect to be able to easily get in contact via a contact form.

   • When the user clicks on the contact link in the navbar, it leads them directly to the contacts page where a contact form is available.

7. I would like to post jobs on a online database.

   • The employers page provides:

     • A link to employers form where a form can be filled to post a vacancy.

8. As a user accessing this site from a mobile phone or tablet, I want the site to have been designed responsively so that it is still easy to navigate and use on my smaller devices.

   • AR Agency was carefully built and designed to be responsive on mobile, tablet and desktop devices.

9. As a user, I would like to view the books that I have posted.

   • The posted jobs can be viewed on the vacany page.

10. As a user of the AR Agency website, I expect to be able to connect to their social media channels, to keep up to date with new entries on the site.

    • Social media links are provided on the footer of every page.

Business Stories

As a Business user on AR Agency I expect/want/need

1. To be able to log in to access my existing vacancies, and for my data to only be editable with my account.

   • Business users can create an account and only have access to edit and delete the listings they created when logged in.
   • When returning to the site and logging in again all their activities are saved and accessible in their account page.

2. To see that various methods of contacting my business are available to users using AR Agency.

   • AR Agency makes it possible for businesses to enter all of the following links to their own contacts:
     • Email form
     • Phone number
     • Address
     • Company name

3. To create, edit and delete entries in my account.

   • Business users have easy access to The "Post a Job" and "Edit" pages, and the delete button is easily accessible on the listing page too.

4. A user interface that is simple and easy to use, that is laid out in a logical way.

   • The AR Agency navbar is laid out in the conventional way:

     • Navbar is at the top of the screen.

     • The logo on the far left of the navbar and links to the right of the home page.

     • The About, Employers, contact, login & log out links are all provided in the navbar where the user would expect to find them.

     • The navbar shows the user appropriate links depending on if they are logged in or out.

   • The footer is also laid out in a conventional way:

     • Social media links also provided in the footer where the user would expect to find them. When they are clicked upon, they link to the appropriate social media platform.

5. Forms for inputting my data to make the process of posting a vacancy very smooth and fast.

   • The forms on AR Agency website is very easy and clear to use. The necessary information to post a vacancy or edit a vacancy are marked as required.

Manual Testing

Manual testing was used for this application to confirm all areas of the site work as expected.

Testing undertaken on desktop, tablet and phone devices

• All steps on desktop were repeated in browsers:

  • Firefox
  • Microsoft Edge
  • Chrome
  • 65 inch television.

• Phones

  • Galaxy Note 9
  • Galaxy S5
  • Galaxy S10
  • iPhone 5/SE
  • iPhone 6/7/8 Plus
  • iPhone X
  • LG Optimus L70
  • Nexus 6P
  • Nokia 8110 4G
  • Pixel 2
  • Pixel 2 XL
  • Moto G4

• Tablets

  • iPad
  • iPad Mini
  • iPad Pro
  • iPad Pro
  • Galaxy Fold

Elements on every page

1. Navbar

   • Hover over each link, confirm the hover effect works as expected.
   • Click the AR Recruitment, confirm it redirects the user to the home page.
   • Click the Home link, confirm it redirects the user to the home page.
   • Click the About link, confirm it redirects the user to the about page.
   • Click the Employers link, confirm it redirects the user to the employers page.
   • Click the Contact link, confirm it takes the user to the contact page.
   • Click the Log In link, confirm it takes the user to the log in page.
   • Click the Sign Up link, confirm it takes the user to the register page..

2. Footer

   • Click the Facebook, Instagram, Twitter & Youtube icons and confirm they open the respective social media pages in different browser tabs.

Home Page

1. Background Image

   • Confirm that background image loads properly, and that the image is sharp and clear.
   • Confirm the heading for the page is easy to read.

2. Buttons

   • Click the Looking for a job button and confirm if it redirects to the vacancy page.
   • Click the Searching for talent button and confirm if it redirects to the employer form page.
   • Click the Open Roles button and confirm if it redirects to the vacancy page.
   • Click the Post a job button and confirm if it redirects to the employer form page.

About Page

• When the about page is loaded, check if the background- image loaded properly.
• Check the grid system for the smaller images to see if they maintain a good grid system.

Employers Page

• Click the Post a job button and confirm if it redirects to the employer form page.
• Check the grid system for the smaller images to see if they maintain a good grid system.
• Check the grid system for the text to see if they maintain a good grid system.

Contact Page

• Click the Email button and confirm if it scrolls down to the contact form below on the same page.
• Click the form and confirm that we would be in contact with you! is flashed after you submit the form.

log In Page

• Go to the log in page, confirm that the log in form is displayed correctly.

• Try to log in with a username/password that do not exist in the database, confirm that there is a flash message that shows Incorrect Username and/or password.

• Try to log in using correct username and password, confirm that this is successful and that there is a flash message showing Welcome + {{username}}.

• While logged in confirm if the username is shown alongside the icon.

• Also while logged in confirm that the user cannot re-login and that the only action available to the user is to log out

Sign Up Page

• Go to sign uppage, confirm the the form is displayed correctly.

• Try to create a new account that already exists (same email and username), confirm that the flash message is launched informing the user that this Username already exists! Please try again.

• Try to create a new account with a new email address but a username that already exists in the database, confirm that the flash message informing the user that this username is already in use pops up.

• Try to create a new account with a new username but a email address that already exists in the database, confirm that the flash message informing the user that this email is already registered pops up.

• Click the log in button, confirm that it takes the user to the log in page.

Log Out Feature

• When logged in, click the log out link, confirm that the user is no longer logged in by checking that no session data can be seen in developer tools.

• Also confirm that the username of of the user is popped from the icon when logged out

• Confirm that the flash message informing the user that You have been logged out pops up when the user logs out of a session.

Vacancies Page

• Click the looking for a job button on the home page, and confirm it takes the user to the vacancies page.

• Click one of the jobs listed and confirms it redirects the user to the listing page.

Listing Page

• Click one of the jobs listed on the vacancies page and confirms it redirects the user to the listing page.

• See that the header matches the position you clicked on the vacancies page.

• If a user is logged out, they cannot edit or delete a listing. THey can only apply by clicking the Apply Now button.

• Click the edit and confirm that it redirects you to a form where you can edit the vacancy.

• Click the delete and confirm that it redirects you back to the vacancy page without the job listed.

• Confirm that the flash message informing the user that Your vacancy has been deleted! pops up when the user deletes a job listing.

• Fill the edited form and see that it is indeed updated on the listing page.

To top

Deployment

How to run this project locally

To run this project on your own IDE follow the instructions below:

Ensure you have the following tools:

• An IDE such as Gitpod

The following must be installed on your machine:

• PIP
• Python 3
• Git
• An account at MongoDB Atlas or MongoDB running locally on your machine.

Instructions

1. Save a copy of the github repository located at https://github.com/ayotundeakinsola/third-milestone-project by clicking the "download zip" button at the top of the page and extracting the zip file to your chosen folder. If you have Git installed on your system, you can clone the repository with the following command.

git clone https://github.com/ayotundeakinsola/third-milestone-project

2. If possible open a terminal session in the unzip folder or cd to the correct location.

3. If needed, Upgrade pip locally with

pip install --upgrade pip.

4. Install all required modules with the command

pip -r requirements.txt.

5. In your local IDE create a file called env.py.

6. Inside the env.py file, create a SECRET_KEY variable and a MONGO_URI to link to your own database. Please make sure to call your database recruitment, with 4 collections called contacts, employer, candidates and users.

7. You can now run the application with the command

python3 run.py

8. You can visit the website at http://0.0.0.0:8080/

Heroku Deployment

To deploy AR Agency to heroku, take the following steps:

1. Create a requirements.txt file using the terminal command pip freeze > requirements.txt.

2. Create a Procfile with the terminal command echo web: python app.py > Procfile.

3. git add and git commit the new requirements and Procfile and then git push the project to GitHub.

4. Create a new app on the Heroku website by clicking the "New" button in your dashboard. Give it a name and set the region to Europe.

5. From the heroku dashboard of your newly created application, click on "Deploy" > "Deployment method" and select GitHub.

6. Confirm the linking of the heroku app to the correct GitHub repository.

7. In the heroku dashboard for the application, click on "Settings" > "Reveal Config Vars".

8. Set the following config vars:

• To get you MONGO_URI read the MongoDB Atlas documentation here

8. In the heroku dashboard, click "Deploy".

9. In the "Manual Deployment" section of this page, made sure the master branch is selected and then click "Deploy Branch".

10. The site is now successfully deployed.

To top

Credits

Content

• The theme and inspiration for this website was gotten from Elegant Themes

• The Ziggo image was gotten from google

• All other text on AR Agency was written by me.

Media

Images

• The AR Agency logo was created by my wife(Ruth Dara) using Gimp.

• The images used were created by my wife and also my cousin Fadsongraphics

Acknowledgements

Special thanks to my mentor Maranatha Ilesanmi for his tips and advice on how I should build this website.

Also a special thanks to the tutors of code institute. Tim especially helped.

To top