WorkTrac

​ NAME is a website which allows charities to request gifts for the children during the holiday season as well as for the donators to support the charities by choosing the gift they would like to donate.
​ ​

​

Contents

​

• NAME
  • Contents
  • UX
    • Project Goals
    • Site Owner Goals
    • Site Visitor/User Goals
    • User Stories
    • User Requirements and Expectations
      • Requirements
      • Expectations
    • Design Choices
      • Fonts
      • Colours
  • Wireframes
    • Site Layout
  • Information Architecture
  • Technologies
    • Languages
    • Libraries & Frameworks
    • Tools
  • Features
    • Implemented Features
    • Future Features
    • Redundant features
  • Changes applied since planning
  • Testing
  • Deployment
    • Local Deployment
    • Deployment to Github
  • Credits
    • Images
    • Image editing
    • Code ideas
  • Acknowledgements ​

---

​

UX

​

Project Goals

​ The main goal of this project is to ​

Site Owner Goals

​

• Provide the users with a ​

Site Visitor/User Goals

​

• View the
• Ability to ​

User Stories

​ Applies to all site users: ​

• As a user, I am able to ​ Applies to new site users: ​
• As a user, I am able to ​ Applies to all returning users: ​
• As a user, I am able to ​ Applies to a superuser (site owner): ​
• As a user, I am able to ​ Back to content ​

User Requirements and Expectations

​

Requirements

​

• Visually pleasant app design
• Easy site navigation
• Information of the content layed out in a simple and clear way on both mobile and larger screens
• Self-explanatory icons where text is absent ​

Expectations

​

• Quick app load time ​ Back to content ​

Design Choices

​

Fonts

​

• All fonts ​ font-family: Baloo Bhaijaan 2', sans-serif; ​
• Special font - logo ​ font-family: ''Meow Script', cursive; ​

Colours

​ ​ Back to content ​

Wireframes

​

Site Layout

​ Site moc-ups were designed using figma. The focus was on defining the basic layout structure of the app and identifying how displays would change on different screen sizes such as mobile, tablet and larger screens. ​ You can view the wireframes created for this project in site wireframes folder. ​ *Please note, as we were developing the project, we have identified some weaknesses in the UX and therefore made the required changes. The deployed site looks somewhat different in comparison to the wireframes. These changes will allow the user to have a better experience and allow easier navigation. The design theme of the features is a close match to the overall site to ensure continuation and flow. ​ Back to content ​

​

Information Architecture

​ ​ Back to content ​

​

Technologies

​

Languages

​

• HTML
• CSS
• JavaScript ​

Libraries & Frameworks

​

• jQuery
• Bootstrap
• Google fonts
• Font-Awesome ​

Tools

​

• Git
• GitHub
• Visual Studio Code
• Color editor
• Favicons ​ Back to content ​

---

​

Features

​ The website is designed as a one page application. ​

Implemented Features

​

• The site has responsive design when viewed on a mobile, tablet, and desktop.
• Easy navigation to external sites, such as social media accounts.
• The user is given feedback when they interact with the website (i.e. login to the website, add new gift, commit to buying a gift etc). ​ Back to content ​

---

​

Changes applied since planning

​

​

Testing

​

Functional Testing

​ TC001 ​ Description ​ Test something. ​ Steps ​

• Navigate to https://website

​ Expected ​ This happened ​ Actual ​ This happened ​ ​

---

​ TC002 ​ ​ ## Validator Testing ​ ### CSS ​ Base Css ​  ​ ### JavaScript ​ Base JS ​  ​ ### HTML ​ The following Validated with no errors: - Home Page - ​  ​ The Following Validator with the same error: - The something page ​  ​ ​ [Back to content](#contents) ​ --- ​ ## Deployment ​ **NAME** project was deployed using the **VS Code IDE**, using **Git** and **GitHub**. ​ Before deploying the application, install the following: ​ - Python 3 - Git ​ ### Local Deployment ​ To deploy Art-ial locally, take the following steps: ​ 1. From the applications [repository](link-to-repo), click the *code* button and download the zip file. ​ Alternatively, you can clone the repository using the following line in your terminal: ​ ```terminal git clone link-to-repo ``` ​ 2. Access the folder in your terminal window ​ [Back to content](#contents) ​ ### Deployment to ​ [Back to content](#contents) ​ --- ​ ## Credits ​ ### Images ​ * ​ ### Image editing ​ * ​ ### Code ideas ​ * ​ [Back to content](#contents) ​ --- ​ ## Acknowledgements ​ Site creators: ​ [Sean Meade](https://github.com/sean-meade) - Primarily Front End ​ [Back to content](#contents)