Refactor the blog post detail component to show information in the side bar widgets, similar to the bootstrap blog post templates.

You can also look into ngBoostrap

Edit: Add a test to ensure that api.myjson.com does not accidentally get used in production this.http.get().

See this testing HttpClient Tutorial

Whenever I try to navigate to the blog module via the navbar.

All my local storage data keys and value gets cleared and I become effectively logged out.

Change the Atila Landing Page to Match The Webhost Template on ColorLib

https://colorlib.com/wp/free-bootstrap-landing-pages-templates/

https://colorlib.com/preview/#webhost

Create the front end to allow user to import the blog post from a URL and pre-populate the blog creation fields.

Implement in the import-blog branch.

angular/angular-cli#5618 (comment)
angular/angular-cli#5618 (comment)
node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --target=production; firebase deploy

Make the process of registration easier:

Instead of one long registration form break into 2 processes:

• username, email, password, first and last name -> register

• After registration is complete, THEN ask the remaining questions.

Vikram is looking for scholarships to help him pay for school.
He has 2 arrays, A and B.
A is a cache of Vikram's scholarships as an array of primary keys.
B is an array of scholarship objects matching Vikram's profile.
Vikram needs to sort the objects in B based on the PKs of A, to get a new B (B_2).
Vikram needs it done in less than O(n^2) time so he doesn't get bored and starts browsing Reddit.

e.g.
A = [3,139,47] # arbitrary order
B = [{pk:139,name:'Scholarship X'},{pk:47,name:'Scholarship Y'},{pk:3,name:'Scholarship Z'}]
B_2 = [{pk:3,name:'Scholarship Z'},{pk:47,name:'Scholarship Y'},{pk:139,name:'Scholarship Z'}]

Current (very slow) solution:

    # A = user_profile.scholarship_cache, B = scholarships
    scholarships = Scholarship.objects.filter(pk__in=user_profile.scholarship_cache)

    scholarships = list(scholarships)
    ranked_scholarships = []

    # todo fix bottleneck 0(n^2)
    for pk in user_profile.scholarship_cache:
        scholarship = [scholarship for scholarship in scholarships if scholarship.pk == pk]
        ranked_scholarships.extend(scholarship)
    scholarships = ranked_scholarships

When the user saves a scholarship to their list notify them with push (and email?) notifications when the scholarship deadline is 7 days and 48 hours away.

In order for lazy loading to work the urls should be refactored to use a hierarchical path structure:

E.g

• atila.ca/scholarships-list -> atila.ca/scholarships/
• atila.ca/scholarships-detail/<scholarship-slug> -> atila.ca/scholarships/s/<scholarship-slug>
• atila.ca/add-blog -> atila.ca/blog/add

Note this means some words will not be valid for usernames and must be prevented from being submitted. Or is there a better way of doing it?

If the user tries to edit a blog post and not signed in they get redirected to the login page.

Signed in users not authorized to edit that page should not be redirected but we should notify them that they can not edit that page.

They should be able to automatically reroute back the page they were trying to get to after logging in e.g.: https://twitter.com/login?redirect_after_login=https%3A%2F%2Fcards-dev.twitter.com%2Fvalidator

Include question input fields for the following fields to edit-user profile component.

ETHNICITY
COUNTRIES
LANGUAGE
RELIGION
ACTIVITIES
SPORTS
DISABILITY

All these fields should include autocomplete functionality and be populated with fields from constants.ts.

They should behave similar to the autocomplete fields in register component. i.e:
-Allow multiple selections.
-Save to userProfile object as an array.
-One Difference: Don't allow user input if user choice is not in list.
-Clear text from input field once it has been selected.

I think it would be easier for the user to browse scholarships if:

• each scholarship was displayed on one row, especially on the larger desktops.

• We can also show more details like scholarship.deadline, scholarship.description, scholarship.extra_criteria etc.

Currently the description for scholarships over a certain length is truncated.

• When the user hovers over a card, more details should be shown.

• There should be also a show more/less that toggles showing or hiding the full scholarship description

see this link for a sample scholarship object: http://jsoneditoronline.org/?id=07b1770ad870a8b4cc092d3e60c34eca

If a user clicks on a forum, scholarship-detail or reaches the end of the scholarships-list page. They should be notified of scholarships or forums that they may be interested in.

This could get pretty complex quickly (deep learning recommendation algorithms, cookies and caching to ensure new results etc.) so just try to implement a very simple working v1 first.

This may require making a new view in the django-seed backend repo. If so add it as a view function in the helper/views.py file.

It should return a json response of related items.

Write a script that will:

1. Add a target='_blank' attribute to all link elements in a given html.
2. Only for scholarship.criteria_info Rremove all style and class attribute

e.g
Input = <h4><a href="https://www.rbccm.com/" style="color:red">Application Requirements</a></h4>

Output = <h4><a href="https://www.rbccm.com/" target="_blank">Application Requirements</a></h4>

Implement it wherever the following gets updated or created:

• scholarship.criteria_info in add-scholarship

• blogpost.body in blog-post-create

• Bonus: Don't add the target="_blank" attribute for elements with links in the atila.ca domain.

• Bonus: Implement the script in both javascript and python.

• Create unit tests to verify that it works.

• We currently prerender Atila because it is good for SEO and social media link previews

• We currently use headless Chrome, rendertron on App Engine but it is way too expesive(~$90/month).

• Fine when we had Google Cloud for Startup Credits and we didn't care about costs but now that it has expired we need to find an alternative.

See this issue: #8

and this commit for more info: 134c000

Make the landing page look nicer.

The only suggestion I have is:

• Replace landing page background with gradient

Here is an idea of what I was thinking:

The rest is up to you, use your creativity and judgement

Run a lighthouse audit on the Atila Website and see how we can make it faster, optimize page loads and improve user experience. Also, try to make it more of a progressive web app.

Strongly Recommend reading this: https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/

This might be useful as well: https://medium.com/@aswin_s/score-a-perfect-100-in-lighthouse-audits-part-1-3199163037

Add Angular Universal and Server Side Rendering to the project, making it easier for search engine and social media links to see the site, better SEO and faster load times.

You can use the current universal branch as a guide and follow these two github wikis:

https://github.com/angular/angular-cli/wiki/stories-universal-rendering
https://github.com/angular/universal-starter

• Add new team members to the team page with their bio and pictures
• Make sure that all team members have an Atila account
• Remove team members that are no longer active

Error occurs when running in development

or in CI:

Warning: Can't resolve all parameters for AngularFirestore in 

/home/circleci/project/node_modules/angularfire2/firestore/index.d.ts: ([object Object], ?). 

This will become an error in Angular v6.x

• Replace the values in constants.ts with Open Source choices:

Sports List
Activities List
Countries List
Languages List
Majors List Source
Universities List
Religion List
ETHNICITIES List
DISABILITY List

• These ones should be done afterwards for the open source REPO

Diet Types and Allergies List
Blood Types
http://kidshealth.org/en/teens/blood-types.html#

• TODO: Find links for lists that are missing links.

Create an open source repo on Github awesome-form-values on the Atila Github organization page.

Allow users to redirect back to the page they were originally trying to view, after clicking the Login/Register Link in Snackbars.

e.g. https://atila.ca/login/?next=/scholarship/edit/dr-ethel-chapman-scholarship

Some parts of the The add-scholarship template looks weird. If you open the /add-scholarship route on the browser you will see what I mean. Unaligned buttons, not responsive on mobile, confusing etc.

Try to make it look nicer and see if you can make it simpler and more intuitive for the user.

When the user changes the sort by option, we would like to prevent all the views from being double counted.

this.preventSortByDoubleCount keeps reverting to undefined even after the boolean is set.

In this commit b2c731d

Source:

sendScholarshipInteraction(actionType) {
 if (this.preventSortByDoubleCount) {
    // don't record view
 }
}

If a comment is too long (300 characters?) it should be truncated and a see more link should be displayed.

If a user profile is hovered over, the user's full name, profile picture, title and school should be displayed in a tooltip similiar to facebook or twitter.

Some tips to get you started:

• If you haven't configured the django-backend yet you can create mock data that will return the following response: http://jsoneditoronline.org/?id=fcf0b8918f4a9162dd7d5f97dca82ac0

forum:https://api.myjson.com/bins/ppr2h
mock forum comments: https://api.myjson.com/bins/u02mh

• Then edit the forum detail component to use this data.

• Edit the comment component to to implement show more and profile detail on hover feature.
  Edit: Consider using ng-bootstrap https://ng-bootstrap.github.io/#/components/popover/examples

If Django is configured, a call to http://localhost:8000/api/forum/forums/<forum_id>/comments/ can also be used and the response should be similar to the link above.

• Use infinite scrolling instead of pagination to potentially help increase user engagement.
• Add either a load more button or a "drag to refresh" feature to show more scholarships.
• Add a scroll to top button when bottom of page is reached

Add a reading progress indicator for the blogs feature.

Here is an example:
https://codyhouse.co/gem/reading-progress-indicator/

In order for links to look pretty on social media (Facebook, twitter etc.) we want to auto-refresh the object caches on Facebook and Twitter when they are first created.

Develop a service that sends the urls of new objects (scholarship detail, forums, blogs) to twitter, facebook etc. for caching.

See this for more information:
Test the following debuggers with scholarship links on Atila. Try using both new scholarships and the same link multiple times.
Facebook Debugger
Twitter Debugger

This may help to get you started
Updating Objects Facebook: (API Changes)
How to Update Twitter Card Cache with API

A lot of duplicate code in the blog and essay feature apps/modules. Combine their functionalities to reduce code duplication.

If the user is logged in and is missing eligible_programs, eligible_schools or gender information:

• a dialog should come up asking the user to submit new information for gender, eligible_programs, eligible schools.

• The dialog should show up on scholarships-list or scholarship-detail page.

• The program and schools dialog should use the autocomplete directives and the array constants. With the option to enter a new value if not in list.

• The user then has the option to either fill the form, remind me later or don't ask again.

• User user_profile.preferences field to track metadata state such as if remind me later or don't as again was selected

Sample user_profile object: http://jsoneditoronline.org/?id=2cf30cbecf54eda24b60aab07adf759d