The TaskHelper Todo List is a productivity app designed to help the user get organized by allowing them to create tasks and ToDo lists.

Our productivity app is built using a variety of technologies, including:

• HTML, CSS, and JavaScript for the frontend
• React.js for building the user interface and managing the application's state
• Django REST framework for building the backend API
• ElephantSQL as the primary database management system
• Cloudinary for image and file storage
• JWT to securly share information
• Heroku for deployment

The Project has been deployed on Heroku, the live link can be found here.

Deployment of Django REST framework backend

1. First, I created a Heroku account and installed the Heroku CLI on my local machine. Next, I created a new Heroku app using the Heroku CLI command heroku create <app_name> where <app_name> is the name of my app.
2. I then set up the necessary environment variables in the Heroku app using the Heroku CLI command heroku config:set <env_variable>=.
3. To install the required dependencies for my Django app, I used the pip install command and created a requirements.txt file listing all the dependencies.
4. I created a Procfile in the root directory of my Django project and added the following line web: gunicorn <project_name>.wsgi.
5. Then, I committed my code to a Git repository and pushed it to Heroku using the Git CLI command git push heroku master.
6. After that, I ran the Heroku CLI command heroku run python manage.py migrate to migrate the database.
7. Finally, I ran the Heroku CLI command heroku open to open my app in a web browser.

Deployment of ReactJS frontend

1. To deploy my ReactJS frontend, I first created a Netlify account and linked it to my GitHub repository.
2. Then, I navigated to my GitHub repository and created a new Netlify site using the "New site from Git" option.
3. Next, I set up the necessary environment variables in the Netlify site by going to "Site settings" > "Build & deploy" > "Environment" and adding the required variables.
4. To install the required dependencies for my React app, I used the npm install command and created a package.json file listing all the dependencies.
5. I created a build directory for my React app by running the command npm run build.
6. After that, I committed my code to a Git repository and pushed it to the GitHub repository linked to my Netlify site.
7. Netlify automatically built and deployed my app, and I could view it by clicking on the "Site deploy" button in my Netlify dashboard.

Deployment of Elephant SQL database

1. To deploy my Elephant SQL database, I first created an account with Elephant SQL and created a new PostgreSQL database.
2. Then, I copied the database URL from the Elephant SQL dashboard.
3. I set the database URL as an environment variable in my Django app using the Heroku CLI command heroku config:set DATABASE_URL=<database_url>.
4. Finally, I updated the DATABASES settings in my Django app's settings.py file to use the Elephant SQL database URL.
5. That's all there is to it! After following these steps, my Django REST framework backend and ReactJS frontend were successfully deployed and running on Heroku and Netlify, respectively, with the database hosted on Elephant SQL

Improving user experience using react.js

React is a JavaScript library for building user interfaces. It is designed to make the process of building user interfaces simpler and more efficient. React makes it easy to create highly interactive user experiences without having to write a lot of code. It provides a declarative API which allows developers to focus on how the user interface should look and behave.

React is highly performant, and can be used to create complex user interfaces with little effort. React components being reusable, makes it easy to create complex user interfaces with fewer lines of code. It also provides a range of tools and techniques to optimise the performance of user interfaces, such as code splitting and virtual DOM rendering.

React is designed to make the development of user interfaces easier, faster and more efficient. It provides a declarative API which allows developers to focus on how the user interface should look and behave. It also provides tools and techniques to optimise the performance of user interfaces, such as code splitting and virtual DOM rendering. React also provides an elegant way of creating components and managing their state, which allows developers to create complex user interfaces with fewer lines of code.

React makes it easy to create highly interactive user experiences. It provides a declarative API which allows developers to focus on how the user interface should look and behave. It also provides a range of tools and techniques to optimise the performance of user interfaces, such as code splitting and virtual DOM rendering. Additionally, React components are reusable, which makes it easy to create complex user interfaces with fewer lines of code.

Flow Chart for Reused Components

• As a user, I want to be able to create and manage tasks so that I can stay organized and on top of my to-do list.
• As a user, I want to be able to set deadlines for my tasks so that I can prioritize and plan my time effectively.
• As a user, I want to be able to categorize my tasks into different projects or groups so that I can easily find and access them. -As a user, I want to be able to mark tasks as complete or incomplete so that I can track my progress and stay motivated.

• As a user, I want to be able to set reminders for my tasks so that I don't forget to complete them.
• As a user, I want to be able to view my tasks in a calendar view so that I can easily plan my week or month.
• As a user, I want to be able to share my task lists with others so that we can collaborate on projects together.

**First-Time Visitor Goals - As a first-time user, who has not created an account, I want to be able to:

• Understand what the purpose of the application is and how to use it.
• Create an account.

Registered User Goals - As a registered user I want to be able to:

• Create, Edit and Delete my own tasks
• Set a due date for a task
• Attach a file to a task
• Assign/unassign multiple owners
• Set a priority for a task
• Set a category for a task
• Filter tasks based on category and priority

Site Admin Goals - As an administrator, I want to be able to:

• Create, Edit and delete my own and users' tasks
• Manage and authenticate user tasks

I wanted to create a design that is both visually pleasing and functional, that helps users stay focused and motivated. The simplicity of the design allows users to navigate through the application with ease, and quickly access the features they need to get their tasks done efficiently.

Wireframes

• Home Page
• Home Page With Tasks
• Login
• Register
• Create New Task
• viewtask

• Navigation Bar

  • Featured on all three pages, the full responsive navigation bar includes links to the Home page, Categories, Create New Task, Documentation and of course a Log Out button it is identical on each page to allow for easy navigation.
  • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

• Home Page

  • If the user is already register the home page is where they can see their on going tasks.
  • If the user is not logged or register it displays an imput for them to do so.
  • If the user has no task it displays a message congratulating them on having nothing to do.
  • Each of the tasks has CRUD functionality where the user can view, update and delete thier tasks
  • Also displays information for each task such as state, category, priority and due date.

• View Task

  • If the user clicks on the view button it will take them here where they can see all the information of their task.
  • There is download button where the user can download files related to their task.

  

  • Update Task

  • Here the user can update their tasks

  

• Categories

  • The Categories Page is where the user creates a category in which task have to assigned.
  • Once a new catergory has been added it can be edited or deleted.

• New Tasks

  • This section will allow the user to create new tasks and assign them properties as follows:
  • Assign a title
  • Give a description of the task
  • Add Task related files
  • Set a Due Date
  • Assign and owner of the task
  • Assign the Category
  • Assign the priority to High, Medium or Low
  • Change the state of the task to Open, In Progess or Completed

• Docs.

  • Here I intend to put information found here in the readme. But due to time constraints is only has Lorem Ipsun dummy text.
  • The side menu for navigating the documentation does work as does the hide menu functionality

• Login and Register

  • Is where the user logs in or registers new accounts.

• A calander view to see tasks in days, weeks, months
• notifications of uncoming tasks

• HTML Validation by W3C was used to check my HTML code: W3C Markup Validation Link
• Testing conducted across all HTML Templates shows no errors but minor some warnings.

• CSS Validation by W3C was used to check my CSS: W3C CSS Validation Link
• Testing conducted across all CSS Templates shows errors for the webkit -- is a vendor extension.

• JS validation by JSHint was used to check my Javascript code: JSHint Validation Link

• I relied on Linter for my Python Validation

• I relied on eslint for my React Validation

• Results of the Lighthouse Performance testing below:
• The performance is very low. I have been told this is due to smelly components. Something I will need to work on in the future.

• The site has been tested at various screen sizes a demonstration of which can be found here

Making sure that I met my deadline there are a number of thing I will look to improve on in the future. I'm sure there are many more that I have not noticed. Some of the ones I have are:

• Site loads to categories and not homepage
• User can only upload pictures
• The View Task page looks a bit naff
• The user can update the task without changing anything
• For my next project I need to be mindful to make use of the GitHub project board better. Use The MoSCoW method and use the milestones and epics.

• Danny Callaghan. My tutor and mentor, such an amazing teacher with so much experience. I wish I had met him sooner.
• The Code Insitute tutors as also their patience and knowledge knows no end.

Portfolio Project 5 proved a real challenge for me. I really struggled with the initial learning curve and it forced me to find help from tutors and experienced react.js programmers. That said I thoroughly enjoyed creating the website from the ground up and had a few eureka moments that really helped my understanding of react. I still have a LONG way to go before I could say I am confident in what I am doing, but that's why we have people to teach us.

I would like to thank The Code Institute for providing me with an excellent space to learn. I definitely struggle with imposter syndrome. But as one of my tutors said, “It never goes away and it can be a great motivator to keep learning”