Tick It

Developer: Jamie King

View live website

Table of Contents

1. About
2. Project Goals
3. User Experience
   1. Target Audience
   2. User Requirements and Expectations
   3. User Stories
   4. Site Owner Stories
4. Technical Design
   1. Agile Design
   2. CRUD Functionality
   3. Colours
   4. Fonts
   5. Wireframes
5. Technologies Used
   1. Coding Languages
   2. Frameworks and Tools
   3. Libraries
6. Front-End
   1. React
7. Back-End API
   1. Django REST Framework
8. Features
9. Future features / improvements
10. Validation
    1. HTML
    2. CSS
    3. ESLint JavaScript JSX Validation
    4. Chrome Dev Tools Lighthouse
    5. WAVE Validation
11. Testing
    1. Device Testing
    2. Browser Compatibility
    3. Manual Testing
12. Bugs
13. Deployment
    1. Heroku
    2. Forking GitHub Repo
    3. Clone a GitHub Repo
14. Credits
    1. Tutorial
    2. Code
    3. Literature
    4. Misc
15. Acknowledgements

About

The Tick It web app has been developed to provide user's the chance to create and carry out tasks online.

Project Goals

The goal for this project was to build a productivity platform in which users can create tasks where other users who feel they can help, can carry out the work as described in the task detail. Tasks can be assigned to members and packs can also be created to group tasks together.

The key functionality aspects:

• The site to be simple and use intuitive navigation across all pages
• User authentication
• User interaction via tasks, comments and packs
• User's to have their own profiles with brief description, profile image and tab group consisting of their owned tasks, packs and other users tasks which they have been assigned
• CRUD functionality for task, comments, packs and their profile
• Tasks filtering by keyword search, new tasks and high priority tasks
• Responsiveness to allow pleasant usage of the app across a range of devices with varying display sizes

User Experience

Target Audience

• People who would like help with completing a task
• People who would like to keep track of outstanding tasks they may have
• People who are looking for some tasks to help others with

User Requirements and Expectations

• A site which provides a high level of interactiveness between users
• Links and functions to act as expected
• Notification to provide feedback on expected function outcomes
• Simple "to the point" content that a user can easily digest
• Accessibility for impaired users
• Responsiveness to allow pleasant use across devices of different screen sizes

User Stories

1. As a new user, I can register an account with Tick It so that I can become a member and use the app as intended.
2. As a user, I can use the navigation bar so that I can seamlessly navigate around the app.
3. As a user, I can see visual indicators for example of having watched / unwatched a task so that I can tell what my status of watching is.
4. As a user, I can watch and unwatch tasks so that I can keep up to date with that particular task via a filtered list.
5. As a user, I can view a list of my watched tasks so that I can focus on content I wish to view.
6. As a user, I can use the search bar on the Task list section so that I can find particular tasks easier.
7. As a user, I can delete my tasks so that I can permanently remove tasks I do not wish to keep.
8. As a user, I can edit my tasks so that I can correct spelling mistakes I may have entered into the task information fields.
9. As a user, I can view task comments so that I can obtain more information on the task in question.
10. As a user, I can comment on other tasks so that I can interact with other users.
11. As a user, I can edit or delete my comment on a task incase of input error.
12. As a user, I can manage my tasks so that I can add, edit or delete tasks as needed.
13. As a user, I can request a password so that I can log back into my account if I have forgotten my password.
14. As a user, I can log in so that I can access my account, view my profile, tasks and other user's tasks.
15. As a user, I can log out so that other users using the same device cannot access my account.
16. As a user, I can have a profile page so that I and other users can view my list of tasks, packs and assigned tasks.
17. As a user, I can update my profile so that my profile can stay up to date with my latest information.
18. As a user, I can add a profile picture so that other members can easily recognize my tasks or comments.
19. As a user, I can view the Home Page so that I can understand what the website is about, create an account or log in.
20. As a user, I can display basic info on my profile page so that other members can learn more about me.
21. As a user, I can search for tasks via a task list or search bar so that I can find specific tasks.
22. As a user, I can fill in a contact form so that I can enquire about issues I may have regarding the app.
23. As a user, I can receive feedback so that I can confirm whether the contact form submission was successful or not.
24. As a user, I can scroll through the latest tasks on the app so that I can find new tasks to complete.
25. As a user, I can browse a list of user accounts so that I can view that particular account.
26. As a user, I can create tasks so that I can partake in the main purpose of the site.
27. As a user, I can create packs so that I can group tasks together.
28. As a user, I can delete my packs so that I can permanently remove packs I do not wish to keep.
29. As a user, I can edit my packs so that I can correct spelling mistakes or I may have entered into the pack information fields.

Site Owner Stories

30. As the site owner, I would want to validate users' data entries on # so that users can create a log in which meets the requirements.
31. As the site owner, I would want to ensure only logged in users can post from their account and edit their profile so that data privacy is ensured.
32. As the site owner, I would want to have the ability to remove tasks and task comments so that I can keep the app clean and friendly.
33. As the site owner, I would want the site to be fully responsive so that users can use it across multiple devices and create a good user experience.
34. As the site owner, I would want to use the app search function so that I can search for particular tasks by their title.
35. As the site owner, I would want a 404 error page so that users do not have to use the back navigation button if an error occurs.

Back to top

Technical Design

Agile Design

An Agile approach to creating this app has been applied. GitHub's projects was used to track user stories and implement ideas based on their level of importance for allowing use of the app with no loss of functionality or user experience. Three categories were created indicating their level of importance, those were:

• MUST HAVE
• SHOULD HAVE
• COULD HAVE

By using AGILE methodology in this project I was able to deliver a site which had all required functionality and some more. Due to the time limit on this project I was not able to incorporate all initial listed features, but this is where an AGILE approach is great for app design. The project displays this by having User stories in the Done section and the ones which were decided to be left for future, put in the future implementations section of the readme.

The GitHub project can be found here

CRUD Functionality

Tick It handles data with full CRUD Functionality:

• Create - Users can create, an account, profile, tasks, comments, packs, contact messages and watch objects.
• Read - Users can view the tasks, comments, packs of other users and also the profiles of these users.
• Update - Users can update their profile, password, posted tasks, packs and watch status of tasks via the interactive forms and buttons on the site.
• Delete - Users can delete tasks, comments, packs and watch objects via the interactive buttons on the site.

Colours

The colour scheme for this application was kept minimal with a monochromatic theme kept in mind.

Colours

Fonts

Google Fonts were implemented on the website. 'Josefin Sans' with a back up of sans-serif was decided as the ideal font for the site.

Wireframes

Balsamiq was used to create wireframes of the sites pages

Wireframes

Back to top

Technologies Used

Coding Languages

• HTML
• CSS
• Javascript
  • React (17.0.2)

Frameworks and Tools

• Axios - Axios is a Promise API. Justification: I used axios to send API requests from the React project to the API and avoid any CORS errors when sending cookies.

• JWT - Library to decode JSON Web token. Justification: I used JWT to securely transmit data and to have the ability to verify that the content has not been tampered with.

• React 17 - JavaScript library for building user interfaces. Justification: To be able to showcase my newly learnt skills and for building interactive user interfaces quickly.

• React-Bootstrap 1.6.3 - CSS framework. Justification: I used Bootstrap React library for UI components, styling and responsiveness.

• React Infinite Scroll - React library. Justification: I used this component to load content (tasks/comments/users) automatically as the user scrolls towards the bottom of the page without having to jump to next/previous page.

• React Router - Javascript framework for routing. Justification: I used this library to enable navigation between views of components and to have the ability to control what is presented to the user based on the URL they have accessed in the browser.

• React ChartJS2 - React Library. Justification: I used this component for producing the doughnut chart on the main page.

• React Multi Select Component - React Library. Justification: I used this component to have the ability to select multiple tasks to assign to a pack.

• Am I Responsive - Website responsive test site. Justification: I used this to create the multi-device mock-up at the top of this README.md file

• Balsamiq - Mock up software. Justification: I used this to create the projects wireframes

• Chrome dev tools - Developer tool. Justification: I used this for debugging of the code and checking site for responsiveness

• Cloudinary - File storage. Justification: I used this to store static files

• Font Awesome - Icon library. Justification: I used this to style the site with icons.

• Google Fonts - Font library. Justification: I used this to import fonts

• Git - Version control system. Justification: I used this for version control and to push the code to GitHub

• GitHub - Cloud based hosting service. Justification: I used this as a remote repository to store project code

• Gitpod - Cloud development environment. Justification: I used this to host a virtual workspace

• Microsoft Paint - Graphics editor. Justification: I used this to edit the images for testing user stories.

• Affinity Designer - Graphics editor. Justification: I used this to create the 404 and no search results images.

• Validation:

  • WC3 Validator - HTML Validator. Justification: I used this to validate the applications HTML code
  • Jigsaw W3 Validator - CSS Validator. Justification: I used this to validate the applications CSS code
  • ESLint - JavaScript Validator. Justification: I used this to validate applications JSX code
  • Lighthouse Site auditing tool. Justification: I used this to validate performance, accessibility, best practice and SEO of the application
  • Wave - Site accesibility auditor. Justification: I used this to evaluate the applications accessibility

Libraries

Installed Libraries

Package	Version
axios	1.3.4
bootstrap	4.6.0
jwt-decode	3.1.2
react-bootstrap	1.6.3
react-chartjs-2	3.0.4
react-dom	17.0.2
react-infinite-scroll-component	6.1.0
react-multi-select-component	4.3.4
react-router-dom	5.3.0
react-scripts	5.0.1
react-scroll	1.8.9

Back to top

Front-End

React

The React.js framework is an open-source JavaScript framework and library developed by Jordan Walke, a software engineer at Meta. It's used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript

I used React for this application for several reasons:

• Flexibility – Due to having a modular structure React code is easier to maintain compared to other front-end frameworks.

• Speed – Creating sites/apps with React significantly increases the page loading speed as the entire page does not require to refresh and reload all components. Components are updated dynamically thus reducing the wait and load times, which affects user experience.

• React Bootstrap - When used for styling and responsiveness React Bootstrap is a great choice as it comes with ready-to-use React built components thus taking away alot of need to create commonly used code from scratch.

• It is the most widely used library for developing social networking and media content applications - Sites such as Meta (formerly Facebook), Instagram, Netflix, Airbnb are all made with React.

• Reusability of components – Components can be created and re used throughout the app with no need to re write code for the same features.

There were various components created and reused across this application.

• <Asset /> - multi purpose component, used to display a range of items due to being passed props. Those include a loading gif, image with source and alt attribute or a message consisting of a paragraph.

  • Used in user story: 21, 24 & 25

• <Avatar /> - resuable component, used to display the relevant user profile picture. This component uses props which can specify the source of the image and also its size, an example of this components re-use ability is the image size on the profile page being bigger than that of the one in the Nav Bar yet it is the same component and source image used.

  • Used in user story: 18

• <DropDown /> - resuable component, used to display the three dots option button based on the required rights of the user and the item in question for example if a user is on their own profile the drop down to edit the profile will appear, however this will not be the case when viewing other users profile pages.

  • Used in user story: 7, 8, 11, 12, 17, 28, 29, 30 & 31

• <HighPriorityTasks /> - specific component, used to display a filtered result of all task with the priority status of HIGH.

  • Used in user story: 24

• <NavBar /> - resuable component, used for easy navigation of the site. This component is re usable as it will display different icons based on a users logged in status. If no user is logged in a log in, # and contact icon will be available however if a user is currently logged in, the full range of icons will be available apart from log in.

  • Used in user story: 2

• <PageNotFound /> - specific component, used to display a 404 page made up of an image file and return home button for when the page does not exist.

  • Used in user story: 34

• <PasswordCriteria /> - specific component, used to display the validation criteria needed for a valid password entry.

  • Used in user story: 30

• <ScrollToTop /> - specific component, used to produce a button that will show when the user reaches the bottom of the page, this will allow the user to quickly return to the top of the page without the need for scrolling.

  • Used in user story: 24

• <TaskCompleteFilter /> - specific component, used to display a filtered result of all task with the complete status of incomplete or in-progress.

  • Used in user story: - This component is an extra feature

• <TaskDoughnutChart /> - specific component, used to display a doughnut chart of all tasks completion status providing an easy visual indication of the tasks status.

  • Used in user story: N/A - This component is an extra feature

• <TaskStatusTable /> - specific component, used to display a numbered table of all tasks completion status providing an easy visual indication of the tasks status.

  • Used in user story: N/A - This component is an extra feature

There were various pages created and used in this application

• auth - The auth page group consisted of the following files:

  • LoginForm.js - This file handles the Login form
  • #Form.js - This file handles the # form

• comments - The comments page group consisted of the following files:

  • Comment.js - This file returns the comments
  • CommentEditForm.js - This file handles the Comment Edit form
  • CommentForm.js - This file handles the create comment form

• contact - The contact page group consisted of the following files:

  • ContactForm.js - This file handles the contact form

• dashboard - The dashboard page group consisted of the following file:

  • Dashboard.js - This file returns the auth users main page (dashboard)

• landing - The landing page group consisted of the following file:

  • Landing.js - This file returns the main page to an anonymous user

• packs - The packs page group consisted of the following files:

  • Pack.js - This file returns the Pack and all its related info
  • PackCreateForm.js - This file handles the Pack create form
  • PackDetail.js - This file returns the pack detail
  • PackEditForm.js - This file handles the Pack edit form
  • PackListings.js - This file returns the list of packs

• profiles - The profiles page group consisted of the following files:

  • EditPasswordForm.js - This file handles the Edit Password form
  • EditProfileForm.js - This file handles the edit profile form
  • Profile.js - This file returns the profile section
  • ProfilePage.js - This file returns the entire Profile page
  • UserProfiles.js - This file returns all users of the site

• tasks - The tasks page group consisted of the following files:

  • Task.js - This file returns the Task and all its related info
  • TaskCreateForm.js - This file handles the Task create form
  • TaskDetail.js - This file returns the task detail
  • TaskEditForm.js - This file handles the Task edit form
  • TasksListings.js - This file returns the list of Tasks

Back-End API

Django REST Framework

The API for this Front-End application was built with the Django REST Framework. The repository with a README file for the DRF Back-End can be found here.

Back to top

Features

In its entirety the website consists of a variety of features across the many site pages as listed below.

Authentication

Authentication is a feature of the Tick It site, users will have to be authenticated whilst attempting to log in or else they will not be able to use any functionality of the site or view any information that Tick It users have posted.

Authentication image

• Covered in user stories: 1, 14, 31

Log In

Log in is a feature of the Tick It site this allows users to log in and view content relevant to their profiles, this feature also controls security and rights of the site with it requiring authentication

Log In image

• Covered in user stories: 14

Log Out

Log Out is a feature of the Tick It site this will give users the ability to log out of their profile providing a level of security if using the same device as others.

Log Out image

• Covered in user stories: 15

#

# is a feature of the Tick It site this will give users the ability to create an account and get involved in the site and use its features.

# image

• Covered in user stories: 1

Home page

Home page is a feature of the Tick It site users will gain an understanding of what the site is about if not logged in and if logged in will be shown various information which is of high priority.

Home page image

• Covered in user stories: 19

Nav Bar

Nav Bar is a feature of the Tick It site giving users the ability to seamlessly navigate the site

Nav Bar image

• Covered in user stories: 2

Profile Section

Profile Section is a feature of the Tick It site giving users some personality on the platform and also grouping all their relevant information in one central point.

Profile Section image

• Covered in user stories: 16 & 20

Profile Tabs

Profile tabs is a feature of the Tick It site giving users the ability to view tasks, packs and tasks assigned to the user of the currently view profile.

Profile Section image

• Covered in user stories: 16

Edit Profile

Edit Profile is a feature of the Tick It site giving users the ability to update their profile with their latest information

Edit Profile image

• Covered in user stories: 17 & 18

Change Password

Change Password is a feature of the Tick It site giving users the ability to change their password if they so desire.

Change Password image

• Covered in user stories: 13 & 17

Create task

Create task is a feature of the Tick It site giving users the ability to perform the main functionality of the site which is to create a task based from a form.

Create task image

• Covered in user stories: 12, 26

Delete task

Delete task is a feature of the Tick It site giving users the ability to delete their owned tasks at their will.

Delete task image

• Covered in user stories: 7, 12, 32

Edit task

Edit task is a feature of the Tick It site giving users the ability to edit their owned tasks at their will via a form.

Edit task image

• Covered in user stories: 8, 12

Task comment

Task comment is a feature of the Tick It site giving users the ability to read or create comments on tasks.

Task comment image

• Covered in user stories: 9

Create task comment

Create task comment is a feature of the Tick It site giving users the ability to create comments on tasks. This will then display in order of time create and have the users profile image and username next to it.

Create task comment image

• Covered in user stories: 10

Edit task comment

Edit task comment is a feature of the Tick It site giving users the ability to edit comments that they own and posted themselves.

Edit task comment image

• Covered in user stories: 11

Delete task comment

Delete task comment is a feature of the Tick It site giving users the ability to delete comments that they own.

Delete task comment image

• Covered in user stories: 11, 32

Task list

Task list is a feature of the Tick It site giving users the ability to view all tasks that have been created on the app.

Task list image

• Covered in user stories: 21, 24

Task Search

Task Search is a feature of the Tick It site giving users the ability to search for tasks or users via a keyword query search bar.

Task Search image

• Covered in user stories: 21, 34

Watch / Unwatch task

Watch / Unwatch task is a feature of the Tick It site giving users the ability to watch and unwatch tasks which if watched will be displayed in the users watched list, giving the user a means for keeping track of specific tasks.

Watch / Unwatch task image

• Covered in user stories: 4

Watch / Unwatch button

Watch / Unwatch button is a feature of the Tick It site giving users the ability to add or remove a watch object to a specific task.

Watch / Unwatch button image

• Covered in user stories: 3, 4

Watched list

Watched list is a feature of the Tick It site giving users the ability to view all of their watched tasks in one central place.

Watched list image

• Covered in user stories: 5

Input Validation

Input Validation is a feature of the Tick It used throughout the site for form inputs.

Input Validation image

• Covered in user stories: 1, 14, 30

Task Count

Task Count is a feature of the Tick It site giving users the ability to display the total amount of tasks they have created and display it on their profile page.

Task Count image

• Covered in user stories: 17

Responsiveness

Responsiveness is a feature which can be seen through the Tick It site giving users the ability to view the site on various display sizes whilst still having an enjoyable user experience.

Responsiveness image

• Covered in user stories: 33

Search Bar

Search Bar is a feature of the Tick It site giving users the ability to search for tasks or users based on key word input.

Search Bar image

• Covered in user stories: 6

Contact

Contact is a feature of the Tick It site giving users the ability to contact the site admin for any reason such as log in issues, reporting a comment or a general enquiry.

Contact image

• Covered in user stories: 22

Error pages

Error pages is a feature of the Tick It site which will display a 404 error page and allow the user to easily navigate back to the site.

Error pages image

• Covered in user stories: 35

Site Feedback

Site Feedback is a feature of the Tick It site which will presented to users at various times in the form of successful html pages and modal messages.

Site Feedback image

• Covered in user stories: 23

Users list

Users list is a feature of the Tick It site giving users the ability to view all users signed up to the site.

Users list image

• Covered in user stories: 25

Create Pack

Create Pack is a feature of the Tick It site giving users the ability to add tasks to a pack, thus grouping relevant tasks together in one central location.

Create Pack image

• Covered in user stories: 27

Edit Pack

Edit Pack is a feature of the Tick It site giving users the ability to add or remove tasks from the pack and also update the title and pack description if they own that particular pack via a form.

Edit Pack image

• Covered in user stories: 29

Delete Pack

Delete Pack is a feature of the Tick It site giving users the ability to delete an owned pack.

Delete Pack image

• Covered in user stories: 28

Future features / improvements

Although alot of effort was put into this project, due to time constraints there is still room for finer refactoring of code and additional functionality / features to implement to the site.

• Password recovery
  • Forgotten password option to recover access to the account using a one time link via email
• Account creation via socials
  • Allow user authentication with already existing accounts, e.g. LinkedIn, Google, etc.
• A notifications feature
  • A feature to have notifications related to tasks you are involed in / own and if their completion status has been updated.
• Involvement specific edit rights
  • Users to be able to make specific edits to a task dependant on their write rights. For example a user who is assigned a task could set it completion status to complete but wouldnt be allowed to edit the task body text or due date.

Back to top

Validation

HTML Validation

The W3C Markup Validation Service was used to validate the HTML of the website. No errors were identified.

Main page (not logged in)

Main page (logged in user)

# page

Login page

Tasks page

Task create page

Task detail page

Task edit page

Watched page

Pack page

Pack create page

Pack detail page

Pack edit page

Contact page

Users page

Profile page

Profile edit page

Change password page

404 page

CSS Validation

The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. All CSS modules pass the validation with no errors.

App.module.css

Asset.module.css

Avatar.module.css

Comment.module.css

CommentForm.module.css

CredentialsForm.module.css

Dashboard.module.css

DropdDown.module.css

DropdDown.module.css

LandingPage.module.css

NavBar.module.css

Pack.module.css

PackCreateEditForm.module.css

PackListings.module.css

ProfilePage.module.css

ScrollToTop.module.css

SearchBar.module.css

Task.module.css

TaskListings.module.css

UserProfiles.module.css

ESLint JavaScript JSX Validation

All JavaScript files were validated using ESLint JavaScript validator. All files passed however there were some rules that needed to be set in the eslintrc.js file as described below:

"rules": { "react/prop-types": 0, "react/no-children-prop": "off", "react/display-name": "off" }

• "react/prop-types": 0 was used to suppress the errors relating to prop-types
• "react/no-children-prop": "off" was used to suppress the errors related to the Infinit Scroll component using children={}
• "react/display-name": "off" was used to suppress the need for a component display name

Chrome Dev Tools Lighthouse Validation

Lighthouse was used to test the performance, accessibility, best practice and SEO of the site. The validation was done for both desktop & mobile.

Desktop

Results

Main page (not logged in)

Main page (logged in user)

# page

Login page

Tasks page

Task create page

Task edit page

Task detail page

Watched page

Pack page

Pack create page

Pack edit page

Pack detail page

Contact page

Users page

Profile page

Profile edit page

Change password page

404 page

Mobile

Results

Main page (not logged in)

Main page (logged in user)

# page

Login page

Tasks page

Task create page

Task edit page

Task detail page

Watched page

Pack page

Pack create page

Pack edit page

Pack detail page

Contact page

Users page

Profile page

Profile edit page

Change password page

404 page

Wave Validation

The WAVE WebAIM web accessibility evaluation tool was used to test the websites accessibility.

Results

Main page (not logged in)

Main page (logged in user)

# page

Login page

Tasks page

Task create page

Task edit page

Task detail page

Watched page

Pack page

Pack create page

Pack edit page

Pack detail page

Contact page

Users page

Profile page

Profile edit page

Change password page

404 page

Back to top

Testing

Device Testing

This site was tested on the following devices:

• Windows 10 PC with a 24" MSI Curved gaming monitor
• Raspberry Pi 4 with a 24" MSI Curved gaming monitor
• Xiaomi Redmi Note 10 Pro

Browser compatibility

The website was tested on the following web browsers:

• Google Chrome (Version 112.0.5615.121)
• DuckDuckGo

Manual testing

See Testing User Stories

Testing User Stories - Users

To avoid unnecessary repetition of images, only the feature being referred to will have screenshots. Information on how to navigate to the feature referred to will be described within its relevant table reference.

1. As a new user, I can register an account with Tick It so that I can become a member and use the app as intended.

Feature	Action	Expected Result	Actual Result
Authentication	Navigate to the # page, fill in the required fields and submit the # form	An account which requires authentication will be created upon a successful account creation	Works as expected
#	Navigate to the # page, fill in the required fields and submit the # form	User to navigate to the # page, enter all required fields and upon account creation be redirected to the log in page	Works as expected
Input Validation	Enter values into the # form fields	Fields requiring input will be validated and make the user aware if any validation errors occur	Works as expected

Screenshots

2. As a user, I can use the navigation bar so that I can seamlessly navigate around the app.

Feature	Action	Expected Result	Actual Result
Nav Bar	Locate the nav bar located at the top of each page and select the relevant link, if on smaller devices click on the burger dropdown button to access the same icons / links	User to be able to find the nav bar located at the top of each page and use to navigate their way through the site	Works as expected

Screenshots

3. As a user, I can see visual indicators for example of having watched / unwatched a task so that I can tell what my status of watching is.

Feature	Action	Expected Result	Actual Result
Watched / Unwatched button	Navigate to the task list page or a page detail page, the Watch / Unwatch status button will be located in the bottom right corner indicating if the task is watched or not by the current user	Watch icon to update dependant on the status of if a currently signed in user has a watch relationship with the task object	Works as expected

Screenshots

4. As a user, I can watch and unwatch tasks so that I can keep up to date with that particular task via a filtered list.

Feature	Action	Expected Result	Actual Result
Watch / Unwatch task	Navigate to the task list page or a page detail page, the Watch / Unwatch status button will be located in the bottom right corner indicating if the task is watched or not by the current user	Watch icon to update dependant on the status of if a currently signed in user has a watch relationship with the task object	Works as expected
Watched / Unwatched button	Navigate to the task list page or a page detail page, the Watch / Unwatch status button will be located in the bottom right, click on the icon to watch / unwatch a task	Watch icon to update dependant on the status of if a currently signed in user has a watch relationship with the task object	Works as expected

Screenshots

5. As a user, I can view a list of my watched tasks so that I can focus on content I wish to view.

Feature	Action	Expected Result	Actual Result
Watched list	Navigate to the watched list page via the link in the nav bar. View the list of currently watched tasks.	User to be presented with the list of all their currently watched task	Works as expected

Screenshots

6. As a user, I can use the search bar on the Task list section so that I can find particular tasks easier.

Feature	Action	Expected Result	Actual Result
Search Bar	Navigate to the task lists page via the icon / link in the nav bar. At the top of the page find the search bar, enter desired characters / keywords and be shown the results.	Users to be presented with a list of relevant tasks based on their search query and if there is no results a no results found image will display.	Works as expected

Screenshots

7. As a user, I can delete my tasks so that I can permanently remove tasks I do not wish to keep.

Feature	Action	Expected Result	Actual Result
Delete Task	Navigate to the task in questions task detail page, click on the 3 dots icon located in top right corner and click on the delete button to delete the task	User to click the delete button and the task to be deleted from the database	Works as expected

Screenshots

8. As a user, I can edit my tasks so that I can correct spelling mistakes I may have entered into the task information fields.

Feature	Action	Expected Result	Actual Result
Edit Task	Navigate to the task in questions task detail page, click on the 3 dots icon located in top right corner and click on the edit button to be taken to the edit task form. Enter relevant values into fields and click on save or cancel to cancel the current edit	User to click the edit button and the task edit form to be displayed in which the user can update the tasks information	Works as expected

Screenshots

9. As a user, I can view task comments so that I can obtain more information on the task in question.

Feature	Action	Expected Result	Actual Result
Task Comment	Navigate to a task by means of the tasks list or a users profile task list. Click on a task to view the task detail page. Scroll to bottom and the comment section for that particular task will be displayed	User to be able to view their own and other users comments on the currently displayed task.	Works as expected

Screenshots

10. As a user, I can comment on other tasks so that I can interact with other users.

Feature	Action	Expected Result	Actual Result
Create task comment	Navigate to a task by means of the tasks list or a users profile task list. Click on a task to view the task detail page. Scroll to bottom and the comment section for that particular task will be displayed . Enter comment into the comment box and click post to add the comment	User to be able to post a comment that will show their name, profile image and how long ago the comment was posted	Works as expected

Screenshots

11. As a user, I can edit or delete my comment on a task incase of input error.

Feature	Action	Expected Result	Actual Result
Edit task comment	Navigate to a task by means of the tasks list or a users profile task list. Click on a task to view the task detail page. Scroll to bottom and the comment section for that particular task will be displayed . Find the comment you wish to edit and click on the three dots icon. Enter updated comment and click save	User to be able to edit and update their owned comments	Works as expected
Delete task comment	Navigate to a task by means of the tasks list or a users profile task list. Click on a task to view the task detail page. Scroll to bottom and the comment section for that particular task will be displayed . Find the comment you wish to delete and click on the three dots icon. Click on the delete button to delete the comment	User to be able to edit and update their owned comments	Works as expected

Screenshots

12. As a user, I can manage my tasks so that I can add, edit or delete tasks as needed.

Feature	Action	Expected Result	Actual Result
Create task	Click on the Create task button which is located at the top of the task list page or from your own profile. Fill in the form with the relevant information into the form fields and click save.	User to be able to successfully create a task which will be added to the database and all relevant pages on the site	Works as expected
Delete task	Navigate to the task detail page by clicking on the relevant task on the task list, or from a users profile. Click on the 3 dots icon in the top right corner of the task. Click on the delete button	User to click the delete button and the task to be deleted from the database	Works as expected
Edit task	Navigate to the task in questions task detail page, click on the 3 dots icon located in top right corner and click on the edit button to be taken to the edit task form. Enter relevant values into fields and click on save or cancel to cancel the current edit	User to click the edit button and the task edit form to be displayed in which the user can update the tasks information	Works as expected

Screenshots

13. As a user, I can request a password so that I can log back into my account if I have forgotten my password.

Feature	Action	Expected Result	Actual Result
Change Password	From any page, click on the Contact icon in the Nav Bar. Fill out the form stating a password has been forgotten and submit the form	User will be giving a feedback message on successful contact message post and the admin will reset the password from the back end	Works as expected

Screenshots

14. As a user, I can log in so that I can access my account, view my profile, tasks and other user's tasks.

Feature	Action	Expected Result	Actual Result
Authentication	Navigate to the log in page, fill in the required fields and submit form to login	User log in credentials to be authenticated against the database and granted access if valid	Works as expected
Log in	Navigate to the log in page, fill in the required fields and submit form to login	User log in credentials to be authenticated against the database and granted access if valid	Works as expected
Input validation	From the log in page enter information to the username and password fields	User to be informed if entered values to not meet validation criteria	Works as expected

Screenshots

15. As a user, I can log out so that other users using the same device cannot access my account.

Feature	Action	Expected Result	Actual Result
Log out	From the nav bar click on the log out icon	User to be successfully logged out and return to the home page	Works as expected

Screenshots

16. As a user, I can have a profile page so that I and other users can view my list of tasks, packs and assigned tasks.

Feature	Action	Expected Result	Actual Result
Profile section	# to the site and then navigate to the profile page from the nav bar	User to be presented with their profile page which displays all relevant information of the user	Works as expected
Profile tabs	Navigate to the profile page. Using the tabs click on each one to display the desired information such as tasks, packs and assigned items.	User to be able to view all information related to their profile and prescence on the site.	Works as expected

Screenshots

17. As a user, I can update my profile so that my profile can stay up to date with my latest information.

Feature	Action	Expected Result	Actual Result
Edit Profile	Navigate to the users profile by clicking on the profile icon on the nav bar. Click on the 3 dots icon in the top right corner. Click on edit profile button. Enter new values for fields and click submit	Users profile to be updated with values entered to form fields.	Works as expected
Task count	Navigate to the users profile by clicking on the profile icon on the nav bar. View the task count located in the middle of the profile information panel	Users to be provided with the currently viewed profiles task count	Works as expected
Change Password	Navigate to the profile page by clicking on the profile button on the nav bar or the icon of posted by avatar on a task. Click the 3 dots icon in the top right corner of the profile. Click on edit profile, from the edit profile form click on the change password button. Enter new password and confirm password then submit.	User should be able to update their password and be presented with a modal to confirm on successfull update	Works as expected

Screenshots

18. As a user, I can add a profile picture so that other members can easily recognize my tasks or comments.

Feature	Action	Expected Result	Actual Result
Edit profile	Navigate to the users profile by clicking on the profile icon on the nav bar. Click on the 3 dots icon in the top right corner. Click on edit profile button. add image by clickon on the chose file button. Once image has been selected click save button	User to have the ability to update their profile image to whatever they select from their drive	Works as expected

Screenshots

19. As a user, I can view the Home Page so that I can understand what the website is about, create an account or log in.

Feature	Action	Expected Result	Actual Result
Home page	Navigate to the Tick It site in your internet browser. View the landing page.	User to view the landing page and be able to understand what the website is about	Works as expected

Screenshots

20. As a user, I can display basic info on my profile page so that other members can learn more about me.

Feature	Action	Expected Result	Actual Result
Profile section	Navigate to the users profile by clicking on the users icon from the nav bar and then searching for the user from the user list clicking on the desired profile to view	Users profile to be updated with values entered to form fields.	Works as expected

Screenshots

21. As a user, I can search for tasks via a task list or search bar so that I can find specific tasks.

Feature	Action	Expected Result	Actual Result
Task list	When logged in, navigate to the task lists page from the nav bar. Scroll down the page to view all tasks that are on that database	User to be presented with list of all tasks	Works as expected
Task search	When logged in, navigate to the task lists page from the nav bar. Use the search bar at the top of the page to search for tasks based on words, letter or numbers	User to be able to query the database for specific tasks based on their search criteria	Works as expected

Screenshots

22. As a user, I can fill in a contact form so that I can enquire about issues I may have regarding the app.

Feature	Action	Expected Result	Actual Result
Contact	Click on the Contact icon from the nav bar which is available to annonymous and authenticated users. Enter the relevant information to the form fields and click on submit	Users and visitors to the site to have the ability to post a contact query and be presented with feedback on successful posting of query	Works as expected

Screenshots

23. As a user, I can receive feedback so that I can confirm whether the contact form submission was successful or not.

Feature	Action	Expected Result	Actual Result
Site feedback	Perform various tasks for example a form to be sent which would require some form of feedback	User to be provided feedback regarding the sucess status of the performed task	Works as expected

Screenshots

24. As a user, I can scroll through the latest tasks on the app so that I can find new tasks to complete.

Feature	Action	Expected Result	Actual Result
Task list	Log in and navigate to the task list page by clicking on the task list icon in the nav bar. Scroll the list of tasks.	Users to be able to scroll through all tasks that are on the database	Works as expected

Screenshots

25. As a user, I can browse a list of user accounts so that I can view that particular account.

Feature	Action	Expected Result	Actual Result
Users list	Log in and from the nav bar click on the users icon. View the list of all users on the platform	Users to be able to view a list of all users on the platform and also use the search bar to help aid finding users	Works as expected

Screenshots

26. As a user, I can create tasks so that I can partake in the main purpose of the site.

Feature	Action	Expected Result	Actual Result
Create Task	From the Nav bar click on the add task button or from the Tasks page, Watched page or profile page click on the create task button	User to be presented with a form to create a task and upon submission create a task object	Works as expected

Screenshots

27. As a user, I can create packs so that I can group tasks together.

Feature	Action	Expected Result	Actual Result
Create Pack	From packs page or profile page click on the create pack button	User to be presented with a form to create a pack and upon submission create a pack object	Works as expected

Screenshots

28. As a user, I can delete my packs so that I can permanently remove packs I do not wish to keep.

Feature	Action	Expected Result	Actual Result
Delete pack	Navigate to the pack detail page by clicking on the relevant pack on the pack list, or from a users profile. Click on the 3 dots icon in the top right corner of the pack. Click on the delete button	User to click the delete button and the pack to be deleted from the database	Works as expected

Screenshots

29. As a user, I can edit my packs so that I can correct spelling mistakes or I may have entered into the pack information fields.

Feature	Action	Expected Result	Actual Result
Edit pack	Navigate to the pack in questions pack detail page, click on the 3 dots icon located in top right corner and click on the edit button to be taken to the edit task form. Enter relevant values into fields and click on save or cancel to cancel the current edit	User to click the edit button and the pack edit form to be displayed in which the user can update the packs information	Works as expected

Screenshots

Testing User Stories - Site Owner

30. As the site owner, I would want to validate users' data entries on # so that users can create a log in which meets the requirements.

Feature	Action	Expected Result	Actual Result
Input validation	Navigate to the Tick It site. Click on the log in icon in the nav bar. Enter username and password to the relevant fields.	User input to be validated again the database and signed in if valid and presented with error messages relevant to the validation failing	Works as expected

Screenshots

31. As the site owner, I would want to ensure only logged in users can post from their account and edit their profile so that data privacy is ensured.

Feature	Action	Expected Result	Actual Result
Authentication	Create code which authenticates if the current user is the owner of items within the site prior to allowing them to edit or delete such items	Users can only edit or delete tasks and packs they own or their own profile and not others	Works as expected

Screenshots

32. As the site owner, I would want to have the ability to remove tasks and task comments so that I can keep the app clean and friendly.

Feature	Action	Expected Result	Actual Result
Delete task	Access the task objects in the back end API with Djangos admin panel and delete the neccessary tasks	Admin to have the ability to delete any database task	Works as expected
Delete task comment	Access the comment objects in the back end API with Djangos admin panel and delete the neccessary comments	Admin to have the ability to delete any database comment	Works as expected

Screenshots

33. As the site owner, I would want the site to be fully responsive so that users can use it across multiple devices and create a good user experience.

Feature	Action	Expected Result	Actual Result
Responsiveness	Use the site on a range of devices and screen sizes	Users will have a pleasant and enjoyable experience on the website regardless of their screen or device size	Works as expected

Screenshots

34. As the site owner, I would want to use the app search function so that I can search for particular tasks by their title.

Feature	Action	Expected Result	Actual Result
Task search	When logged in, navigate to the task lists page from the nav bar. Use the search bar at the top of the page to search for tasks based on words, letter or numbers	User to be able to query the database for specific tasks based on their search criteria	Works as expected

Screenshots

35. As the site owner, I would want a 404 error page so that users do not have to use the back navigation button if an error occurs.

Feature	Action	Expected Result	Actual Result
Error pages	Navigate to any page that does not exist	User to be presented with 404 error page and a button to return home	Works as expected

Screenshots

Back to top

Bugs

Bug	Fix
Pack not submitting the tasks array to the database	Although the database has been created in such way to accept a list of tasks, it didn't seem to work when passing a list of task id's in the form. Tests were conducted which proved that a single entry could be entered, i decided to try and create a for loop to pass in each task to the pack one a time and this achieved the desired outcome
Task edit form wont submit if due_date is not set a value	Update due_date to be an empty string and a conditional if statement was placed in the form append which checked if due_date was left empty or null and if true it wouldn't append this field. This fixed the issue as the field in the database has blank and null set to True
Profile list only displaying the first 10 results in Infinite Scroll	fetchMoreData was properly implemented
assigned to tasks wouldn't display in the assigned to tab	A filter was added that would filter tasks based on if the assigned_to id matched that of the profile owners
Tab active colour would revert to the default	Documentation for react bootstrap didn't mention that the CSS has to be over written by using activeClassName property. Once this was used the issue was resolved
Searching for tasks if the single letter Y is entered, tasks with a title that only includes a number will be displayed	I could not work out why this was the case therefore this has had to be left in as a known bug
When editing a pack, the data is not correctly pulled from the database thus resulting in the user having to remove all tasks and re select them	Due to time constraints i was unable to find a solution to this bug so i had to be left as a know bug. This bug still allows functionality although the user experience is slightly impacted due to this
Pack details not displaying list of associated tasks due to 500 error	Due to not having control over the status of elephant SQLs servers I had to leave this as a known bug. I did implement code to retry if a 500 error is returned however sometimes this exceeds the max retry of 3 times. This bug still allows functionality although the user experience is slightly impacted due to having to refresh the page manually in the occasional instances in which this happens

Back to top

Deployment

Heroku

This project was deployed to Heroku in the project's early stages to allow continual responsive testing. This was achieved via the following steps:

The website was deployed with Heroku by following these steps:

1. Use the "pip freeze -> requiremnts.txt" command in the terminal to save any libraries that need to be installed in the file.
2. The app uses Cloudinary to host the post images therefore a Cloudinary account will be required.
3. Log in to Cloudinary or create an account for free.
4. Navigate to the Dashboard on Cloudinary

Screenshot

5. Copy and store the value of the 'API Environment Variable" beginning at cloudinary:// until the end, this will be used in the Heroku Config Vars.
6. The app also uses ElephantSQL to host the database
7. Log in to ElephantSQL or create an account for free.
8. Click on Create a new instance

Screenshot

9. Set up your plan. Give the 'plan' the desired name, select the Tiny Turtle (free) plan and leave tags blank.

Screenshot

10. Select the region and choose the nearest data centre to your location.

Screenshot

11. Click 'review' and if happy with the details presented click on the create instance button.

Screenshot

12. From the instances section click on the instance with the name that was just created.
13. Get the ElephantSQL database URL from the instance details page and copy, this will be used in the Heroku Config Vars

Screenshot

14. Navigate to https://www.heroku.com/ and login or create an account.
15. Click the "new" button in the upper right corner and select "create new app".

Screenshot

16. Choose an app name and your region and click "Create app".

Screenshot

17. Reveal Config Vars and store the required config var names and values as below:

• CLOUDINARY_URL: your Cloudinary URL as obtained above
• DATABASE_URL: your ElephantSQL postgres database URL as obtained above
• PORT: 8000
• SECRET_KEY: your secret key

Screenshot

18. Go to the "deploy" tab and pick GitHub as a deployment method.
19. Search for a repository to connect to and select the branch you would like to build the app from.
20. If preferred, enable automatic deploys and then deploy branch.
21. Wait for the app to build and then click on the "View" link which will redirect you to the deployed link.

Forking the GitHub Repository

We can make a copy of the original repository on our GitHub account to view or make changes too without affecting the original repository, this is known as forking. Forking in GitHub can be done via the following steps:

1. Navigate to github.com and log in.
2. Once logged in navigate to the desired GitHub Repository that you would like to fork.
3. At the top right corner of the page click on the fork icon.
4. There should now be a copy of your original repository in your GitHub account.

Please note if you are not a member of an organisation on GitHub then you will not be able to fork your own repository.

Clone a GitHub Repository

You can make a local clone of a repository via the following steps:

1. Navigate to github.com and log in.
2. Once logged in navigate to the desired GitHub Repository that you would like to clone.
3. Locate the code button at the top, above the repository file structure.
4. Select the preferred clone method from HTTPS. SSH or GitHub CLI then click the copy button to copy the URL to your clipboard.
5. Open Git Bash
6. Update the current working direction to the location in which you would like the clone directory to be created.
7. Type git clone and paste the previously copied URL at Step 4.
8. $ clone https://github.com/jkingportfolio/ci_pp5_tick_it_react
9. Now press enter and the local clone will be created at the desired local location

Back to top

Credits

Tutorials

• Real Python Django redirects tutorial - The Ultimate Guide to Django Redirects
• React-multi-select-component video by Monsterlessons Academy - React Select Example | React Dropdown Menu - Fully Customizable

Code

Code from external sources were used as a basis and built on top of in this project, they are credited below:

• The basis of this project was inspired by the 'Moments' social media platform walk-through project with Code Institute. Using this a a basis for user log in, profile creation and posting to the API I have built my own app and added extra functionality, such as creating task packs and assigning tasks to users.

• Password criteria tooltip component was inspired by my mentors previous student aleksandracodes. The file for this component can be found here.

• LandingPage component was inspired by my mentors previous student aleksandracodes. The file for this component can be found here.

Literature

The use of reference books were used throughout the creation of this project and are credited below:

• React Key Concepts - Roy Derks, published by Packt Publishing

Misc

The source of where I learned how to produce a GitHub fork and clone was from the following pages of the GitHub Documentation. Although I did not use a fork or clone in this project it is something I hope to implement to future projects now I have the knowledge to do so.

• https://docs.github.com/en/get-started/quickstart/fork-a-repo
• https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository

Images such as no results found image used in this site were created by myself using Affinity Designer.

Acknowledgements

I would like to also thank the following:

• My wife and family for their support and feedback whilst doing this project
• Code Institute tutor support who helped with the many issues I had during this project.
• My Code Institute mentor Mo Shami for his guidance through this project.

Back to Top