This is my final project of CS50. I was unable to fork it due to disabled access. I have then made a new repository and copied the code. Credits on some code from CS50.

This website is aimed to allow patients or service users to keep a track of their symptoms per day. This will be a responsive website which can be used in a range of different devices. Users will be able to keep a note per day using their own account. Once symptoms are logged, users can use this data to show their medical professionals and allow for an approptiate diagnosis.

This website uses HTML, CSS, Python, Flask and Javascript.

The design of this website will aim to promote trust and professionalism as expected from a medical website.

I used coolors.co to generate my colour palette.

This set of colours were chosen due to research completed. The colour blue is normally associated with trust and professionalism [1]. Using the set of colours will keep the website consistent with other medical websites.

I have used sans-serif from Google fonts.

Using FontAwesome will be used for visual representation.

This is the main page users have to access before registering or logging in. It contains a hero-image taken from Pexels and a link to the register page with the hero image.

This is the registration page where a user can input new details. User input is validated to ensure that it is filled using HTML input required tags. However, if this tag is removed via chrome developer tools then SQL injections are prevented by security implemented by the back-end. It will render a template of an Invalid registration page with an error message.

This is the feedback page if registration has failed. This would be seen if the user does not match their password and confirmation password. This can also be seen if a chosen username already exists.

This is the log in page where a user can input their details. User input is validated to ensure that it is filled using HTML input required tags. However, if this tag is removed via chrome developer tools then SQL injections are prevented by security implemented by the back-end. It will render a template of an Invalid log in page with an error message.

This is the feedback page if the user has failed to log in. This would be seen if the user does not input their username or password correctly.

Only accessible once logged in. This contains a log of symptoms:

Only accessible once logged in. This contains a form where users can input their symptoms, and the date and time it happened.

Only accessible once logged in. This contains a form that will allow the user to change their password.

If the user inputs the wrong password or does not complete the required fields then an error message is rendered.

Features to be added:

• About page.
• Incorporate more images for visual represntation.
• Add a footer with links for contact pages.
• Contact Page for further information.
• Add duration of symptoms.
• Ability for users to add more information about themselves in their profile.
• Add profile photos.

This website uses SQL databases to keep track of the users' symptoms and dates. It also contains a database of users and their credentials.

Using Flask routes, it allows for navigation and redirection through different templates.

Using Session from Flask, the user is remembered and can be accessed in different app routes.

• HTML used for the main content.
• CSS for the design and layout.
• JavaScript for the date interaction.
• Python as the language used for the backend.
• Flask used for Python framework and routes.
• Bootstrap for the front-end framework to enhance responsiveness and pre-built components.
• phpliteadmin used for the SQL database.
• Jinja used for templates.
• werkzeug.security used for functions of checking password and generating passwords.
• FontAwesome used for toggler icon.
• Google used to debug using their chrome developer tools.
• SQLlite used for database.

[1]doctorlogic.com. (n.d.). Beyond Blue and White: A Guide to Choosing Medical Logo Colors. [online] Available at: https://doctorlogic.com/blog/medical-logo-colors.html#:~:text=Why%20Are%20Blue%20And%20White.