Skip to content

sebhd1/taskify

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

80 Commits
docs
docs
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
Procfile
Procfile
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

Taskify

Mockup image

View live website

Table of Contents

  1. About

  2. Project Goals

  3. User Experience

    1. Target Audience
    2. User Requirements and Expectations
    3. GitHub project
    4. Site Owner Stories

  4. Technical Design

    1. CRUD Functionality

  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

  15. Acknowledgements

About

Taskify web app has been developed to provide user's the chance to create and manage 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 App to be simple and user 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 (user feedback )
  • 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

Technical Design

CRUD Functionality

Taskify 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.

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 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

  • 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.

  • 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-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
web-vitals 2.1.4

Front-End

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
    • SignUpForm.js - This file handles the Sign-up 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.

Features

Future features / improvements

Although a lot 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. Github, Google, etc.
  • A notifications feature (email)
    • A feature to have notifications related to tasks you are involved in / own and if their completion status has been updated.

Validation

HTML Validation

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

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

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)
Signup 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

Testing

Manual testing

Tests were performed mostly manual and throughout the development phase and deployment.

Testing User Stories - Users

  1. As a new user, I can register an account with Taskify so that I can become a member and use the app as intended.
Feature Action Expected Result Actual Result
Authentication Navigate to the sign up page, fill in the required fields and submit the sign up form An account which requires authentication will be created upon a successful account creation Works as expected
Sign Up Navigate to the sign up page, fill in the required fields and submit the sign up form User to navigate to the sign up 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 sign up form fields Fields requiring input will be validated and make the user aware if any validation errors occur Works as expected
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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 Sign up 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
  1. 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
  1. 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
  1. 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 Taskify 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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

Testing User Stories - Site Owner

  1. As the site owner, I would want to validate users' data entries on sign up so that users can create a log in which meets the requirements.
Feature Action Expected Result Actual Result
Input validation Navigate to the Taskify 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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

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

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 -> requirements.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
  1. 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.
  2. The app also uses ElephantSQL to host the database
  3. Log in to ElephantSQL or create an account for free.
  4. Click on Create a new instance
Screenshot
  1. Set up your plan. Give the 'plan' the desired name, select the Tiny Turtle (free) plan and leave tags blank.
Screenshot
  1. Select the region and choose the nearest data centre to your location.
Screenshot
  1. Click 'review' and if happy with the details presented click on the create instance button.
Screenshot
  1. From the instances section click on the instance with the name that was just created.
  2. Get the ElephantSQL database URL from the instance details page and copy, this will be used in the Heroku Config Vars
Screenshot
  1. Navigate to https://www.heroku.com/ and login or create an account.
  2. Click the "new" button in the upper right corner and select "create new app".
Screenshot
  1. Choose an app name and your region and click "Create app".
Screenshot
  1. 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
  1. Go to the "deploy" tab and pick GitHub as a deployment method.
  2. Search for a repository to connect to and select the branch you would like to build the app from.
  3. If preferred, enable automatic deploys and then deploy branch.
  4. 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 www.github.com and log in.
  2. Once logged in navigate to the desired GitHub Repository that you would like to fork.
  3. In 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 organization 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 www.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://taskify-ms-a3360d47713a.herokuapp.com/
  9. Now press enter and the local clone will be created at the desired local location

Credits

Tutorials

Content

  • I used fonts from Google Fonts for this project.

  • I used Stack Overflow for general troubleshooting and issues with grid spacing.

  • Feedback and comments from the reviewer of my previous portfolio projects were taken into account for this project when running tests and identifying and fixing bugs.

  • The static images were taken from Unsplash

Information Sources / Resources

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 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.

Acknowledgements

This application was executed and completed as a portfolio 5 Project for the full stack diploma at Code Institute.

Sebastiano Ballotta, 2023.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages