sopermaf/polyglossa

Website for teaching English in group seminars

polyglossa's Issues

Payment Integration

Overview

A payment system must be integrated with the lesson request form to allow the users to pay for the lesson, and ensure that the student isn't signed up for the lesson until payment is confirmed.

Problems

1. Integration of paypal
2. Combination of Vue form and Django template
3. Ensuring student linked to lesson only when payment is made

Resources

1. Django payment integration projects
2. django-paypal tutorial

Contact Us Page

• Provide design and layout
• Add content and policies
• Implement

Direct Link from Descriptions to Booking Page

Have an option to allow students to go directly from the course description page to the
booking form with the class selection already prefilled.

This would allow students students to easily navigate the site.
Looks cool and fast.
Avoid trying to remember the name of the seminar when going to the booking page

Slot Editing Failure On Save

Existing slots can't be edited and saved at the same time.

Validation thinks a new slot is trying to overwrite an existing slot.

This shouldn't raise an error.

DNS for naked domain

Ensure that polyglossa.com redirects to www.polyglossa.com

See issue stated here https://help.pythonanywhere.com/pages/NakedDomains/ and a discussion here
https://www.pythonanywhere.com/forums/topic/686/

Form Submission

TODO:

• Add in lesson type selection to form

• Load allowed times and dates from backend

• Submit page loads to new page on success

• Timezone management within frontend

• Paypal page redirection after email

Free Trial Seminar

A free trial seminar should be possible to be offered. This will lead to a confirmation page on signup that won't require the paypal form.

TODO

• Create order confirmation page
• Ensure paypal button only shown if order >0, otherwise no payment required and order completed

TimeZone Localisation

Problem

The frontend system needs to present users with local times for their region
and interpret the backend times with the correct timezone.

All systems must use timezone offset to maintain consistency.

Currently no consistency between front and backend and timezone information is lost.

Library Help

1. See Moment.js for use in the frontend
2. Use timezone setting in Django settings

Seminar Page Redesign

Seminar Types.pdf

Redesign based on pdf, same functionality

Email Lesson Link Automation

Provide a backend management option in Django to allow for easily sending an email to all students that are in a particular Seminar.

This should be a manual action that can be triggered on the specific seminar slot.

Process PayPal Signals on Payment Made

Once a payment is made or declined, the database should be updated

Slot Pricing With Time Variance

How to relate the pricing of Activities and Slots? Directly relative or entirely controlled by Activity?

Important to consider the possiblity of sub slotting in the future? E.g. slot of 60 mins created, but student can choose just 30 mins and a new remaining slot will be created. #8

Current Setup

• Price is invariable in relation to time
• Price is set on Activity model
• Slots length can vary to any timerange

Possible Future Setups

Solution - Directly Related to Time

In the current setup the easiest change would be to change price to be pricing per hour and then have some sort of relationship between time and price e.g. sp = p * t where

• sp is the slot price
• p is the price per hour in the Activity
• t is the time duration of the slot

✔️ :advantages

1. Very flexible for slot length

❌ disadvantages

1. Possibly too flexible and confusing
2. Hard to gather stats on usage

Solution - Set time periods

• Pricing set on the Activity level
• Interpreted at slot level depending on time
  e.g. choices of slot length in mins [30, 45, 90, 120]

✔️ advantages

1. Easy to understand and relatively flexible
2. Could be modified with additional times added
3. Open to possibility of sub slotting?

❌ disadvantages

1. Lose some time flexibity, only certain values allowed e.g. 30 mins, 45 mins, 60 mins

Implement Dynamic Management

This should allow the admin page to modify certain page data

• Contact us social media
• [ ]

Payments Page

The page with payments needs to be updated to look better before being sent to paypal

Concurrent Usage Failing

Issue noticed to do with a lesson request not processing with 400 error after recently created lesson.

It's assumed the issue was to do with using the local SQLlite db or also not using async functions.

Automate Deployment to PythonAnywhere

Automate the CD process for the website

Check daily for branch updates?

Steps

• pull from github
• collectstatic
• reload webapp

Dockerisation of Project

Creating a docker image of the project could make it much easier and more flexible for hosting in the future.

Not currently required but could provide better CD integration in future.

Multiple ScreenSizes and Flexbox

Flexbox needs to be added everywhere to allow for the usage of different screensizes.

• Header
• Footer
• Booking Form
• Course Descriptions
• Home page

DB backup automation

Error Explanation on Form Submission Failure

Give the users an explanation to the failures on the submission failure

User Email Field

Email field for user model needs to be updated to use the model EmailField instead of model TextField

Allow Creation of Slot if Seminar has `is_bookable` set to false?

Should seminars that are not being shown to users, i.e. is_bookable=False, be allowed to have new slots created?

Is there a valid case for this? Could there possible issues with allowing it?

Suggestion

• update clean of Base slot to check if activity is bookable

Track Video Page Clicks

Track the click through rate for each video page

This will provide an analysis of the video page, and see roughly how many viewers are going through the website.

Backend Management Page

Page to allow site config

• Config of site settings (e.g. max/min dates, max/min lesson times)
• Page for managing lesson request stage movements from
  awaiting payment -> confirmed, etc

SPA vs MPA

Should the project be converted to be a single page application and
use the API to retreive all data?

✔️ Advantages

1. Fast when loaded

❌ Disadvantages

1. Slow initial load (check Vue loading for this)

Video Page Feature

Add a new page for showing video pages. Unlisted Youtube videos will be shown on the seminar associated with a particular slot for 24 hours, before they become unavailable.

TODO

• Design page for showing unlisted video
• Dynamic url for showing the unlisted video on that page
• make the video only available for 24 hours, and different from youtube unlisted key

Reduce Requests on Booking Form Page

Reduce the number of requests being handled by the BookingForm. A single request with slots for each type on page load should be enough, and perform much better.

TODO

• Create new request for returning seminars and slots {sem1: slots, sem2: slots}
• Remove existing methods and update tests

Model Updates to Activity and Slots

• Create model unit tests

• Create datetime range filter

• Update existing tests

• Add state management to the slots

Nav Bar Icon Not Showing

On mobile view for iphone users the nav bar icon is not showing

Setup CI Integration

Checkout CircleCI for running integration tests and avoiding forgetting to run them manually before commits.

• pylint for class_bookings/_ and polyglossa/
• python manage.py test

Home Page

• Determine layout for pictures and text
• Add text
• Implement

Home Page Implementation

• top seminar types
  • model key for shown on home page (highlighted?)
• upcoming seminars
  - [ ] separate query for date ranges of seminars?
  - [ ] reduce api calls on booking page, pass data through

SubSlotting Lesson TimeSlots

Slot times will be set by the admin and can't be a subset of this time.

For example if a slot of 60 mins is created, students won't be able to book a lesson of 30 mins, as the slot times are decided in advance.

Back Button Page Navigation

As it's a Single Page Application, we must configure the user history so that when they press the back button they go to the expected area.

example: navigating back to the course page from the booking form

Version 1 - Todo Checklist

This is a list of the tasks to be completed for version 1 of Polyglossa and their progress

Website

Backend

Models

• Student Model
• Seminar Slot Model
  • Pricing (per activity or per hour?)
  • Timezones
  • Slot clashes
• Activity Model (Pricing issue)

Requests

• Send form page and relevant data
• Add in Authentication (csrf_exempt problem)
• parsing
• validation
• saving model
• Integration with payment services (Paypal)
• Payment confirmation

Admin Features

• Seminar Creation
• Slot Creation
• Send mass email with live link

Server Jobs

• Email confirmation

Front End

• Description Pages
• Home Page
• Seminar Sign up Form

Deployment

• Online VPS with dockerfiles
• Manage DB backups
• Deployment pipeline from Github
  • Dockerisation of Django and Vue
• Testing
  • Full end to end testing

SSL cert for HTTPS

Setup SSL cert to allow for HTTPS connections so that site is secure.

Also important to ensure that students trust the website.

Exercises and Video Page - Learning materials

Learning Material.pdf

Consider using virtual scrollers and v-tabs to separate the different language levels

Should have levels A1-C1 and a section for Exercises, Reading Materials, and Videos. The sections might have a lot of links so consider the virtual scroller or expandable sections to allow for easy access.

Key points

• Exercises
• Videos (show with icon)
• Reading Materials
• Levels A1-C1

Deployment

Which site for hosting? How to?

Currently setup Vue and Django for on pythonanywhere as trial run for Django and Vue configurations, but has limited capacity.

Consider using Heroku for the ease of deployment and integration with Git. CD process seems easy with them

Convert from SQLite to hosted DB

SQLite is currently being used as the default DB. This needs to be changed before actual launch as it will probably be too slow with a global DB lock.

Options depend on hosting, MySQL and PostgreSQL both options on pythonanywhere

Seminar Booking Form

• Load slots on page load or as request?
• Timezone localisation #3
• Sorting of slot types and datetimes for ease of selection

Reduce compiled asset size

Reduce the compiled asset size with lazy imports where possible.

Index seems to be the biggest culprit.

ferdia@ferdia-pc frontend]$ npm run build

> [email protected] build /home/ferdia/Desktop/projects/polyglossa/frontend
> vue-cli-service build


⠇  Building for production...

 WARNING  Compiled with 3 warnings                                                                                                                             16:08:48

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  css/index.aec5f2c3.css (448 KiB)
  js/index.fab9f7a1.js (585 KiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  index (1.01 MiB)
      css/index.aec5f2c3.css
      js/index.fab9f7a1.js


 warning  

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                           Size                  Gzipped

  dist/js/index.fab9f7a1.js      585.16 KiB            169.08 KiB
  dist/css/index.aec5f2c3.css    448.13 KiB            51.71 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Remove crsf_exmpt decorators for form submission

Remove the crsf_exempt decorator from Vue Form Submission methods

Add ReCaptcha to Booking Form

Extra security should be added to the booking form to avoid spam.

The suggested and easiest solution is to add a recaptcha button.


Links:

• Google Recaptcha
• Django Recaptcha
• Best Practices

Home Page Redesign

Polyglossa Home Page.pdf

TODO

• Banner recolour and new headers
• Upcoming seminar calendar section
• Select highlighted seminars should be shown on home page
• Seminars link to their match on seminar page for full description

Backend User Page

• Add/Delete Lesson Types (Safe)
• Add/Delete Booking Requests
• Add/Delete Students
• Add/Delete Available Time Range

Dynamic QR Codes

Produce a QR code that the link to the website and can be redirected at any later point without requiring changing the QR codes.

This would allow a single distribution of QR codes without worrying about having to change the QR code if the desired link destination changes.

Email student to confirm purchase

Should students received an email to confirm that their order has been received and confirmed?

This needs to be run on another thread so as not to block the website, i.e. a background job.

Check out celery or python threads.

Switch to subscription payment model

The payment model would be expanded with 2 options:

• pay per seminar
• pay per month for unlimited seminars

Required changes:

• user accounts

Possible changes:

• user profiles?

Add logging

Logging should be added for events in the website. It shouldn't log sensitive information in the stack traces like passwords or env variables that could be recovered later.

• Logger Class

Allow Admin Access to Video Page

Ensure logged in admins can access the video page at anytime.

This will be helpful for viewing the page ahead of time and checking for errors.