Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/timalexanderandersson/task-reminder


https://github.com/timalexanderandersson/task-reminder

Last synced: about 1 year ago
JSON representation

Awesome Lists containing this project

README 

          
# Task Reminder

This is Task Reminder. It's designed to help users keeping track of important things that need to get done.

user can create tasks, mark tasks as completed, edit the tasks and delete tasks. You need to have an account to use the Task Reminder.

So user must create account by register and then have full access to the application.

This is a Full Stack project build with the django framework.

[Task Reminder Here](https://task-reminder-app-0c796f83bbb5.herokuapp.com/)

![responsive]()



## Task Reminder - Table Content



* [Planning and Design](#planning-and-design)

* [Agile methodology](#agile-methodology)

* [Wireframes](#wireframes )

* [Features](#features )

* [More Features](#more-features )

* [Libraries](#libraries )

* [Technical Stack](#technical-stack )

* [Testing](#testing)

* [Validation](#validation)

* [Testing in django](#testing-in-django)

* [Bugs](#bugs)

* [Deployment](#deployment)

* [Credits](#credits)

* [Acknowledgements](#acknowledgements)



## Planning and Design



### User storys



#### Admin 

As a **Site Admin** I can **read, delete, update, and create tasks** so that **admin can fix problems**



* Be able to change the task, delete task, update task, create task.



#### Update or delete task 



As a **Site user** I can **Modify and delete tasks** so that **user can modify it as wanted**



* User can update the task.



* User can delete tasks.



#### Registration for using Task Reminder



As a **Site User** I can **Start using the Task Reminder** so that **can save the tasks in the list**



- User can register there own account.



- If user is sign in, user can add tasks.



- Own site for log in.



#### Adding task



As a **Site User** I can **Add tasks to the task list** so that **Be able to remember the task needed to be done**



- User can add task.



- User get a response message when add task



## Agile methodology



Used an agile working method while working on this project. which worked, but first time apply this method on a project.

Its a good method to use to control that all of the things that need to be in the project actually is done.

You get to know where in the project you are.



#### 3 steps when using.



#### To Do

When the user story is created.

#### In Progress

When the user story is in progress to get done.

#### Done

When the user story is done.



Project Here







#### User story information 



User story information







* With all the acceptance criterias that are needed.



### Diagram Models



Diagram models with 







* created with lucid.app



## Wireframes 



### display for mobile.



Homepage







- index.html



Sign in page 







- sign in



Account registration 







- Registration 



Contact page 







- contact 



tasks 







- task page 



Task open 







- task page open



Add a task 







- add tasks



### Display for desktop



Homepage







- index.html



Sign in page 







- sign in 



Sign up page







- sign up



Contact page







- contact



Add task page







- add task



Edit task page







- edit 



Delete page 







- delete



Open task page







- open task



Sign out page







- Sign out



## Features



### Navigationbar 



Navigation bar desktop







Navigation bar mobile







* Dropdown link to all pages if under 400px.(with icon from font awesome.)

* The navbar contains links to contact and sign up, login, and to the homepage.

* And changes if user is sign in to the website.(logout,contact, and home).

* responsive.



### Homepage



Homepage desktop







Homepage mobile







* Homepage shows user to register account to get access to the task reminder.

* show links to login

* shows link to register

* Responsive



### Tasks 



tasks desktop







tasks mobile







* Shows User where to add tasks.

* User can open there own tasks on the open button.

* Shows clear text where your new tasks are made.

* Responsive .



### Edit tasks



Tasks edit desktop







Tasks edit mobile







* User can add title,description and even time and date for tasks.



### Edit the made tasks



Tasks edit old task desktop







Tasks edit old task mobile







* Here user can Edit old tasks.

* user can choose the completed option in this edit here



### Delete page 



Delete page desktop







Delete page mobile







* User can choose to delete the task.

* User can choose to go back to the tasks.



### Sign out page 



sign out desktop







sign out mobile







* User can choose the option to sign out 

* User can go back to tasks.



### Sign in page



sign in desktop







sign in mobile







* User can choose the option to sign in. 

* User can go back to register.



### View task in list



view task desktop







view task mobile







* Here user can see the task that needs to be done

* Date and time.

* and options to delete or edit.



### Contact



Contact desktop







Contact mobile







* User can send a contact to Task reminder.



### Sign up for account



Register desktop







Register mobile







* User can create account for using the task reminder.

* or have the option to login if account already made.



### Searchbar



searchbar desktop







searchbar mobile







* User can search for task that exist in the list.

* error if no task exist of that name.

* need to fill in something in the search input.



### Footer



Footer desktop







Footer mobile







* Footer contains copyright Task Remember



## More Features



* want to creat tasklist with categorys.

* when completed task goes into a done category.



## Libraries



* asgiref: Helps Django handle tasks in the background.

* dj-database-url: Makes it easier to set up the database.

* Django: The framework used to build the website.

* gunicorn: Runs the website on a server.

* psycopg2: Connects the website to a PostgreSQL database.

* sqlparse: Helps organize and format database queries.

* whitenoise: Helps the website with static files.



## Technical Stack

These are the things used for this project.



* Django - was used as framwork

* HTML -  Was used for front-end.

* CSS - Was used to style the site.

* Bootstrap - Used to style the website.

* Python - Made to create back-end.

* Javascript - for interactivity

* Gitpod - development environment

* Git - Version control system

* PostgreSQL - Database management system

* lucidchar - Creating my models Diagram.

* Heroku - deploying web applications



## Testing



### Lighthouse



#### Desktop Lighthouse



Desktop results







#### Mobile Lighthouse



Mobile results







## Validation



### W3C Testing



Index tested







Contact tested







sign in tested







Sign up tested







*  Django error in register.



Sign out tested







Tasks tested







* Django problem with error.



edit tested







* django error in edit.



delete tested







success page tested tested







### CSS jigsaw



CSS Test







### jshint Javascript



Jshint javascript 







* Jshint shows one warning that function may lead to confusing semantics, since its inside the loops.



### CI Python Linter



Views test







Models test







urls test







forms test







## Testing in django 



### views



| Status | **Sign Out - Redirect to Homepage** |

|:------:|:-----------------------------------

| ✓ | When the user logs out, they are redirected to the homepage (status code 302). 



| Status | **Sign In - Valid Sign In** |

|:------:|:----------------------------

| ✓ | When the user enters the correct username and password, they are taken to the task creation page (status code 302). 



### Models 



| Status | **Contact Form - Valid Data** |

|:------:|:-------------------------------

| ✓ | When the user submits the contact form with valid data, it gets saved. 



### Forms



| Status | **Post User First - Valid Data** 

|:------:|:----------------------------------

| ✓ | When the user submits the form with all required fields completed, the form is valid.



## Bugs

#### No bugs found.



### unsolved bugs

#### None.



## Deployment



### creating repository on github for project



* Sign in to GitHub then go to use https://github.com/Code-Institute-Org/ci-full-template.

* click to "use this template" and Create a new repository.

* create a repository with name in the Repository name

* then create Repository 



### creating heroku application

* Sign in to heroku.

* In the landing page press the dropdown and click on create app.

* give the application a name, and choose the location(Europe).



### deploy to heroku 

* Go to the settings tab when clicked into your new app.

* go to the config vars section.

* add a key of DISABLE_COLLECTSTATIC and value of 1,so heroku dont upload staticfiles during build.

* install gunicorn in the command.

* install the requirements.txt.

* Create a Procfile.

* and put in '.herokuapp.com' to ALLOWED_HOSTS.

* In heroku go to deploy scroll down to "Manual deploy" and press the button Deploy Branch.



## Credits

### Help from these websites

https://www.pythontutorial.net/django-tutorial/django-updateview/ 

https://dev.to/nuh/django-loginview-and-flash-messages-4k9k

https://www.w3schools.com/

https://getbootstrap.com/docs/5.3/components/alerts/#examples

https://docs.djangoproject.com/en/5.1/

https://www.youtube.com/watch?v=WuyKxdLcw3w&t=238s

https://stackoverflow.com/questions/1042900/django-unit-testing-with-date-time-based-objects

https://docs.djangoproject.com/en/5.1/topics/auth/default/#django.contrib.auth.models.User

https://medium.com/@buczynski.rafal/navigation-through-django-views-testing-907091f97638

https://dev.to/ifihan/testing-in-django-26e5

https://medium.com/@buczynski.rafal/navigation-through-django-views-testing-907091f97638

https://fontawesome.com/

https://getbootstrap.com/

https://balsamiq.com/

https://coolors.co/ for the colors in the website.



## Acknowledgements

* I would like to thank my mentor, Spence for help with guidance with my project.