ABCDE Todo List
Developer: Arron Beale
💻 Visit live website
(Ctrl + click to open in new tab)
Table of Contents
- About
- User Goals
- Site Owner Goals
- User Experience
- User Stories
- Design
- Technologies Used
- Features
- Validation
- Testing
- Bugs
- Render Deployment
- Credits
- Acknowledgements
About
"ABCDE Todo List" is an application that helps a user organize their time according to Brian Tracy's method, as described in his book "Eat That Frog." Additionally, the website has additional features:
- Feedback form
- Admin favorite books.
User Goals
- Create/Update/Delete tasks.
- Be able to see all tasks in one place.
- Have access to the manual of the application.
- Send a feedback message to the admin
- Read the list of self-development books.
Site Owner Goals
- To provide a solution to allow users to organize to-do tasks.
- Create an intuitive and easy-to-use application to attract more customers.
- Develop a fully responsive and accessible website.
User Experience
Target Audience
- Students: managing assignments, study schedules.
- People with Busy Lifestyles: Manage multiple responsibilities.
- Project Managers: To coordinate and track tasks.
- Individuals Seeking Personal Productivity: To increase personal productivity.
- Freelancers and Gig Workers: To manage their various freelance projects and deadlines
User Requirements and Expectations
- Fully responsive website on all devices.
- Ability to use the app on all types of devices.
- Calm and relaxing GUI interface.
- Contact Form to engage with support or leave feedback.
- Easy and intuitive application.
- List of books for self-development.
User Stories
- As a user, I would like to log in to my account. (Must Have) (Epic-1: Authentication)
- As a user, I would like to create a new account. (Must Have) (Epic-1: Authentication)
- As a user, I would like to be able to move from the Register page to the Log In page. (Must Have) (Epic-1: Authentication)
- As a user, I would like to create a new task. While creating the task, I may modify the following fields: 'title,' 'description,' 'importance,' 'frequency,' 'deadline.' (Must Have) (Epic-2: List-Create-Add-Delete-Tasks)
- As a user, I would like to update a task. While updating the task, I may modify the following fields: 'title,' 'description,' 'importance,' 'frequency,' 'deadline.' (Should Have) (Epic-2: List-Create-Add-Delete-Tasks)
- As a user, while on the "Create/Update Task" page, I need to go back without modifying or creating a task. (Could Have) (Epic-2: List-Create-Add-Delete-Tasks)
- As a user, I would like to delete a task. (Could Have) (Epic-2: List-Create-Add-Delete-Tasks)
- As a user, while on the "Delete" page, I would like to return to the homepage without deleting the task. (Could Have) (Epic-2:List-Create-Add-Delete-Tasks)
- As a user, I would like to read the manual to understand how to use the application. (Should Have) (Epic-3: Contact Form)
- As a user, I would like to be able to send an email to the admin to contact him or share feedback. (Could Have) (Epic-3: Contact Form)
- As a user, I would like to see the list of books the admin proposes for self-development and visit the Amazon website where I can buy them. (Should Have) (Epic4-Product List)
- As a user, I would like to log out from my account. (Must Have) (Epic-1: Authentication)
- As a user, I would like to see the list of all tasks.(Must) (Epic-2:List-Create-Add-Delete-Tasks)
Admin / Authorised User
- In my role as an Admin or Authorized User, I have the capability to log in to the admin console for backend access. (Must Have) (Epic5: Back-End-Administration)
- As an Admin, I can create users, delete users. (Must Have) (Epic5: Bakl-End-Administration)
- As an Admin, I want to modify user's settings: First Name, Permissions. (Should Have) (Epic5: Bakl-End-Administration)
- As an Admin, I want to filter users by staff, superuser, or active status. (Should Have) (Epic5: Bak-End-Administration)
- As an Admin, I am able to manually include, remove, or update books in the list of favorite books. (Should Have) (Epic5: Bak-End-Administration)
- As an Admin, I can view messages that have been sent by users through the contact form. (Should Have) (Epic5: Bak-End-Administration)
- As an Admin, I can view, update, delete users' tasks. (Could Have) (Epic5: Bak-End-Administration)
- As an Admin, I can filter tasks by: importance, frequency, user. (Should Have) (Epic5: Bal-End-Administration)
- As an Admin, I would like a user to find all company's social links and navigate to them by clicking footer's icons. (Should Have) (Epic6: Other)
- As an Admin, I would like user to see hamburger menue on smaller screen sizes (Should Have) (Epic6: Other)
- As an Admin, I would like a user to see pagination on product page of books (Should Have) (Epic4-Product List)
- I would like a user to see 404 when he enters wrong URL. (Should Have) (Epic6: Other)
Kanban, Epics & User Stories
- The GitHub Kanban board was utilized for monitoring open user stories.
- Milestones feature was employed to establish Epics.
- The Kanban board incorporated columns such as Backlog, In Progress, and Done.
Epics
      User Stories
Kanban
Design
Colours
I chose bright colors for the footer and navbar to make the application more positive. I added a picture with a starry sky to make the application relaxing.
Structure
Website pages
The site was designed for the user to be familiar with the layout, such as a navigation bar along the top of the pages and a hamburger menu button for smaller screens.
The footer contains all relevant social media links that the business has, so the user can visit any social media site and follow the business there to expand the business's followers, likes, and shares.
The site consists of the following pages:
- Login page where the user can log in to his account.
- Register page where the user can register.
- Homepage where the user can see all his tasks.
- Create/Update task page, where the user can create or update the task.
- Delete page, where the user can delete the task.
- Manual page, where the user can read how to use the application.
- Contact/Feedback page, where the user can complete a form to share his feedback or just send an email to the admin/owner.
- Books page, where the user can see the admin's favorite books on sales development.
- 404 error page to display if a 404 error is raised.
Database
- Built with Python and the Django framework with a database of neon.tech for the deployed Render version (production).
Show diagram
User Model
The User Model contains the following:
- user_id
- password
- last_login
- is_superuser
- username
- first_name
- last_name
- is_staff
- is_active
- date_joined
Contact Model
The Contact Model contains the following:
- id
- name
- subject
- message
Books Model
The Books Model contains the following:
- id
- title
- details
- stars
- numberreviews
- price
- productpic
- amazon
Tasks Model
The Tasks Model contains the following:
- id
- user
- title
- description
- complete
- created
- frequency
- importance
- completed
- due
Wireframes
The wireframes were created using Balsamiq
Wireframes
Login
Register
Home
Manual
Books
ContactForm
DeleteTask
CreateUpdateTask
404 Page
Features
Home page
- Home page includes navbar, main body, and a footer. User stories: 5, 6, 7, 22, 23
See feature images
Logo & Navigation
- Shows logo designed for a to-do list.
- Responsive across various screen sizes.
- Transforms into hamburger menu on smaller screens.
- Shows active user.
- Provides access to all available pages directly from the current page. User stories: 23
See feature images
  Footer
Contains social media links and copyright, displayed across all pages. User stories: 22
See feature images
Sign up / Register
- Allow users to register an account. Username and password are required User stories: 2
See feature images
Login
- Users can log in to create, update, or delete tasks, view a list of tasks, send feedback messages, and see a list of favorite books. User Sotries: 1
See feature images
Logout
- Enables users to securely log out User stories:12
See feature images
Hyperlink connection link between register and Login page
- Enables users to navigate from login to register page and back User stories: 3
See feature images
Manual Page
- Enables users to read manual on how to use the application. User stories: 9
See feature images
Contact Form
- Enables users to contact the admin/site owner to share feedback. User stories: 10,
See feature images
Books
- Allows the user to view the list of favorite books.
- Users may see the book title, book cover, book description, star rating, and the number of reviews.
- Users can click on 'Buy on Amazon' to purchase the book from Amazon.
- Users can utilize pagination to view the complete list of books. User Stories: 11, 24
See feature images
Task List
- Allows the user to see all their tasks for Daily, Weekly, Monthly, Yearly goals.
- Users can see the severity of the task, deadline of the task, and completion status.
- Allows users the option to create a task, update/view the task, and delete the task. User Stories: 4, 5, 7, 13
See feature images
View/Edit Task page
- Allows the user to edit/view tasks. User stories: 5, 6
See feature images
Delete Task page
- Allows the user to delete a task. User stories: 7, 8
See feature images
Social Media Links and CopyRight
- A logo and link are used for each social media platform displayed.
- All links open in a new tab to ensure the user is not directed away from the business.
- Displayed on all pages. User Stories: 22
See feature images
Pagination
- Pagination is used on the bookings list and the blog page.
- This ensures that the page is kept tidy, with only two items displayed per page. User Stories: 22
See feature images
Admin console for backend access.
- User can access admin console for backend tasks
User Stories: 14
See feature images
Admin console: User Settings.
- Creating, editing deleting users.
- Modifying user settings: name, staff, superuser, status etc
- Filtering users
User Stories: 15, 16, 17
See feature images
Admin console: Books Settings.
- Add, edit, delete books presented on book page. User Stories: 18
See feature images
Admin console: Messages.
- can view messages user's sent to admin through contact form
- can view update delete user's tasks
- Can filter user's tasks User Stories: 19
See feature images
Admin console: Tasks Settings.
- can view update delete user's tasks
- Can filter user's tasks
User Stories: 20, 21
See feature images
404 page
- A page is displayed when the user enters an incorrect URL. User Stories: 25
See feature images
Technologies Used
Languages & Frameworks
- HTML
- CSS
- Javascript
- Python
- Django
Libraries & Tools
-
Validation:
Validation
The W3C Markup Validation Service
Login
Register
Home
Task Create Update
Task Delete
Manual
Contact Form
Books
404
### CSS Validation The W3C Jigsaw CSS Validation Service
Style.css
### PEP8 Validation [PEP8 Validation Service](https://pep8ci.herokuapp.com/) The code underwent verification for PEP8 compliance and successfully passed without any errors or warnings.
base/admin.py
base/apps.py
base/forms.py
base/models.py
base/url.py
base/views.py
books/admin.py
books/apps.py
books/models.py
books/urls.py
books/views.py
contactform/admin.py
contactform/apps.py
contactform/models.py
contactform/urls.py
contactform/views.py
Login
Register
Homepage
Create/Update Task
Delete Task
Manual
Feedback
Books
Login
Register
Homepage
Create Update Task
Delete Task
Manual
Feedback
Books
Login
We have two false positive errors. The WAVE check indicates that labels are empty, but in reality, the labels have icons instead of text
Register
We have 3 false positive errors, as before. The WAVE check says that labels are empty, but in reality, the labels have icons instead of text.
HomePage
We observe 2-8 false positive errors, specifically, 'A link contains no text.' This occurs because I used icons instead of text to create links.
Create/Update Task
Delete Tasks
Manual
Feedback
Books
We have a false positive contrast error. Pagination background and page numbers have very good contrast.
404
We have one alert: 'Suspicious link text,' which indicates that the purpose of the link is not described well. However, the link is part of the sentence 'Otherwise, click here to redirect to the homepage.' This sentence explains the purpose of the link. For this reason, the alert is a false positive.
Add a new book.
Update a book.
Delete a book.
Cloudinary
Render Login
Create New App
Select Github
Connect Repository
Github Deploy
Select Repository
Select Repository
Configure Vars
### Clone Repository Follow these steps to clone the repository: 1. Go to the GitHub repository 2. Find the "Code" button located above the file list and click on it. 3. Choose whether you prefer to clone via HTTPS, SSH, or Github CLI, and then click on the copy button to copy the URL to your clipboard. 4. Open Git Bash 5. Navigate to the directory where you would like to clone the directory and set it as the current working directory. 6. Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY) 7. Hit the Enter key to create your local clone. Please check the following link for more information: https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository ## Credits ### Images Backgroun image was taken from https://getwallpapers.com/ ### Code 1. First version of the App was built from Django Tutorial of Dennis Ivy: https://www.youtube.com/watch?v=llbtoQTt4q 2. Footer was taken from this page https://getbootstrap.com/docs/4.6/getting-started/introduction/ 3. Navbar was taken from here https://getbootstrap.com/docs/4.6/components/navbar/. 4. Login, Register, Feedback pages are inspired from: https://bootsnipp.com/snippets/vl4R7 5. Product list : https://mdbootstrap.com/docs/standard/extended/product-cards/ 6. Pagination was taken from this video: https://www.youtube.com/watch?v=wY_BNsxCEi4&t=61s 7. Contact form design, was found on google. The form was taken from website similar to this one: https://colorlib.com/wp/bootstrap-contact-form/ 8. Django Contact Form: connecting form to backend : https://www.youtube.com/watch?v=lSgRWA4PMt4 9. "Main page todo app, I found it on the internet. It was taken from the page like https://bootdey.com/snippets/view/Task-Details 10. The form on create/update page were modified according to https://www.youtube.com/watch?v=CVEKe39VFu8 11. Delete page was created from this form: https://bootsnipp.com/snippets/vl4R7 ## Acknowledgements ### Special thanks to the following: - Code Institute - My Mentor Mo Shami