jeffminsungkim / ashy Goto Github PK

Objective
During email and password sign up, an account authentication process must proceed automatically. After users finished verified the given link from their email account, there's no point to make users sign in the app once again.

Objective

Create a user registration form component that’s shared by a few other pages (components).

1. Add the component to a shared module and export the component in the module.
2. Import the shared module in the modules where we’ll use the component.

Note: Be aware that you cannot declare a component in two modules.

Objective
Create a cloud function to generate thumbnail images when a user uploads their profile picture to the storage.

Objective

Either creating a service class or creating an Angular module to handle HTTP RESTful events, to make the code more readable and resolve the maintenance issue. By “structure” we mean the decisions you make concerning how your project best meets its objective.

Objective
Improve friend chat system for a better user experience.

Requirements stack

• Either one of the members of friend chat may destroy both rooms and messages.
• A total number of unread messages should indicate in the right corner of an item.
• Implement infinite scroll based on a user's scroll position. Load 10 messages every time.
• Every chat room must be destroyed automatically after 88 minutes.
• Implement a feature to sending images and video clips during a chat.

In the browser when the user presses backspace from the start while searching a username, it throws the following error.
Error: Reference.child failed: First argument was an invalid path = "usernames/#". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

Version info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.9.0
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Issue content

When I click the text input from the modal, a keyboard overlaps the text input. This issue has found during testing on iPhone SE (iOS 11) device.

Debug output

Expected behavior

Ion input should stay in a position right above the keyboard while a user types some messages.

Actual behavior

Objective
Implement a simple chat system for an individual user to send and receive messages with another.

Requirements stack

• Include firebase rules for chats to secure data.
• Set an index of tabs to tab Chats when a user joins the chat room.
• Allow a user to be accessed a chat room by clicking a Chat button from friend's profile.
• A new chat room is allowed to be created by entire users in the friend list, without acquiring a permit from another user.
• A chat room must be placed in both users Chats page, only if the user sends at least one message to another.
• The last message of the chat room should be described on the list as a history of each conversation item.
• Display arrival time of messages.
• Chat messages must be intuitively distinguishable form sender and receiver.
• Allow users to use emoji during a chat.
• Identify members in a chat room by displaying a profile picture along with either display name or username.

Objective
Update a badge on friends tab just like the notifications tab when the state changes based on user events.

Objective
Implement a feature that allows a user to log in by using their twitter account.

NOTE: Email verification is not mandatory.

Objective
Keep users stay signed in after the registration. Create a page to check whether user's email verified state has changed or not. When its state changed, redirect the user to a profile preset page to set their profile photo and a display name.

Currently, users get signed out immediately, when they finished email registration.

Objective
Handle users’ online, offline and signout status

Unfortunately, Cloud Firestore does not support onDisconnect callback that I can use to listen for when the user disconnects from the database.

Reference Cloud Firestore Equivalent to Realtime Database “.info/connected” ref?

Objective
Include a rule for user active status.

• All users who have authorized can read users state.
• The user cannot update other user's active state, but only their own.

Objective

Store image files to storage by using cloud functions.

Currently, an image upload function runs from the client-side, and it is very slow at the moment. (Execution took about 10000~ 27000 ms) This process should run from the server-side simply because to present a better performance to the end users.

Objective

Remove entire friend connections between User A and N users after User A deleting his or her account.

Objective
Design a welcome page that should provide information that users could register their account and ability to signs into the app.

Objective

Instead of storing a default avatar placeholder in Firebase storage or the client-side, by using user email address to create an identicon, displaying a default avatar image.

Objective

Modify the current cloud function to update public URLs from signed URLs for original images and also, for thumbnail images.

Signed URLs contain a very long URL path and do not do update user's profile photos.
I should take a look at the signed URL more precisely in the near future.

Hello

Hello Hello Hello Hello Hello

Hi

HiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHiHi

Bye

ByeByeByeByeByeByeByeByeByeByeByeByeByeByeByeBye

Objective

Create pages for updating email account and password. Note: Use reactive form

When the user presses backspace from a mobile keypad, it seems like (keyup)="someMethod()" method does not trigger at all.

Objective
Write a cloud function which handles user deletion from server-side.

Currently, Ashy taking care of a user deletion process from the client-side. And certainly, this work can be handled by the client without having any problems. But Cloud Functions enable me to offload this work, meaning less processing power, less battery usage, and less data usage client-side. Plus, I won't have to duplicate the same process for my code in iOS, Android, and web.

Objective
Write a cloud function which handles user sign up authentication from server-side.

Currently, Ashy taking care of a user authentication process from the client-side. And certainly, this work can be handled by the client without having any problems. But Cloud Functions enable me to offload this work, meaning less processing power, less battery usage, and less data usage client-side. Plus, I won't have to duplicate the same process for my code in iOS, Android, and web.

When a username is available, notification text doesn't appear consistently. Need to be fixed.

Objective
Enable a user to send a friend request to others, only if they are either not in friends relation or not blocked from a specific user.

Objective
Implement a function which handles friend request on the server side.

• Android
• iOS

• When a function has called from a client side, a recipient must receive a push notification from the server unless a person who has deactivated notification feature.

• When a person accepts a friend request from requesters, a person who has requested must receive a push notification from the server unless a person who has deactivated notification feature.

• Increase the number of total friends field when a recipient accepts the request from others.

Objective
A new image should load from firebase only once.

Objective
Allow a user to modify user's topic field whenever they wanted to.

Requirements stack

• Every user is allowed to change their topics at any time.
• Every user could decide not to expose their topics to a profile.

Objective

Re-design Your account page inside the setting page.

The main reason to use Cloud Firestore instead, Realtime Database.

• Better querying and more structured data
• Designed to Scale
• Easier manual fetching of data
• Multi-Region support for better reliability
• Different pricing model

Reference

Bottom tabs persist after signing out of app.
The following code below solves a fundamental tab persistency issue.
However, it looks like a wrong approach.

import { App } from 'ionic-angular';
constructor( public app: App ) { }

async logout() {
    const user: any = await this.authService.signOut();
    this.app.getRootNav().setRoot('LoginPage'); // Better way to fix this line?
    this.toastService.show(`Signed out as ${user.email}`);
  }

Objective

Create a page for a user re-authentication.
For security-sensitive tasks such as deleting accounts, setting a primary email address, and changing your password, you must have recently signed in. When doing this, if the user logged in too long ago, the operation will fail with an error. In this case, the new login credentials for reauthenticateWithCredential the user must be retrieved and passed on to reauthenticate the user.

Version info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.9.0
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Issue content

When there are no messages in a scroll-content, both keyboard and a text input lose focus. This issue has found during testing on iPhone SE (iOS 11) device.

Debug output

Expected behavior

The input and the keyboard should stay in focus until a user dismisses from typing messages.

Actual behavior

Objective

Initialize default state data by using HTTP trigger.

Things to be updated when the user first signs into the app.

Firestore

• User's current active state
• User's displayName
• User's photoURL
• User's last login timestamp
• Email verification state

RTDB

• User's current active state
• Using app state

Objective
Synchronize friend list of every user.

I should update friends node values simultaneously every time the related data get changed from elsewhere.

Each child node consists of a user array that has a user id as a key of friends node. The reason why I store as an array is because each user could have many friends.
In this example, Jeff Kim has one friend which is John Doe vice versa.

- friends
    - VkwT5IgS7ZYqDZ4uz5Dh76inrAK2
       - displayName: Jeff Kim
       - photoURL: https://firebase...
       - currentActiveStatus: Online
       - statusMessage: ...
    - 5NnRVze6TVUeunLV0KXVmLby03J2
       - displayName: John Doe
       - photoURL: https://firebase...
       - currentActiveStatus: Offline
       - statusMessage: ...

When users node gets changed, the related data in friends node must be updated.
For example, when Jeff Kim has changed his profile photo or statusMessage, all the same, user id that reside in friends node which matches with Jeff Kim’s uid, data should be updated based upon what user has changed.

- users
    - VkwT5IgS7ZYqDZ4uz5Dh76inrAK2
       - displayName: Jeff Kim
       - photoURL: https://firebase...
       - currentActiveStatus: Online
       - statusMessage: ...
    - 5NnRVze6TVUeunLV0KXVmLby03J2
       - displayName: John Doe
       - photoURL: https://firebase...
       - currentActiveStatus: Offline
       - statusMessage: ...

Objective
Implement a simple random chat system for an individual user to send and receive messages with another who has a similar interest in common.

Requirements stack

• On the top of Random page create a text input where a user could change their interest.
• Display a list of random users who have the same interest as a currently logged in user.
• A user must select their interest beforehand to see a list of strangers.
• Infinite scroll feature.
• Every chat room must be destroyed automatically after 88 minutes.
• A user could send and receive friend requests to strangers.
• Every user could decide not to expose their interest to a profile.

Objective
Create a page where users can update their profile picture and select the display name.

When the user account created through email and password, there's no way to get user's displayName to populate into a database.

It is very dangerous to maintain the following code below because it does not work consistently.

return new Promise((resolve, reject) => {
  this.afAuth.auth.currentUser.updateProfile({
              displayName: user.displayName,
              photoURL: this.defaultProfileImgURL
            }).then(() => {
              this.usersRef.doc(auth.uid).update({
                displayName: user.displayName
              }).then(() => resolve());

See the API doc createUserWithEmailAndPassword.

On the client, Firebase UI Web then updates the profile of the user using a subsequent updateProfile method.
I cannot notice this from your web app because Firebase UI resorts to a "trick" to only fire the onAuthStateChanged of your FirebaseApp instance listener after the profile of the user has updated.

Technically: Firebase UI does the account creation and profile update in a separate Firebase App instance, then, when the user is fully ready it signs-the user in your original FirebaseApp instance.

However, on Cloud Function, the trigger will get called right after the createUserWithEmailAndPassword call, before the profile is updated.

Objective
Improve designing User profile UI layout.

Objective
Create a component to display every user's current active status, on the right side corner its list.

Requirements stack

• Smile icon with green color represents user is online.

• Meh icon with yellow color represents user is offline. (Assume that user isn't using the application at the moment.)

• Frown icon with red color represents user is signed out from the application.

Objective
Implement a uniqueness username(id) constraint by using Cloud Functions.

Requirements stack

• Ensure case insensitivity on usernames.
• Ensure a user can only have one username at any time.
• Allow a user to change their username while maintaining the constraints.
• Secure the method for assigning a username with firebase id tokens.
• The operation should be atomic and performed in a transaction to avoid state issues.

Currently, Ashy checks username from a client-side using RTDB.

The status bar overlaps with the header on an iPhone simulator with iOS 11.

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.9.0
npm   : 5.5.1
OS    : OS X El Capitan
Xcode : Xcode 8.0 Build version 8A218a

Objective
Create a function to generate a unique username.
A random unique username should provide to a newly signed up user.

Objective
Implement two pages as clean as possible. NOTE: Must consider UX

• Sign up page
• Sign in page

Objective

Store user's access token in a local storage by using sqlite-storage plug-in.

webSQLStorage is like SQLite but it is still browser-based storage so still have that problem with the data being clear.
Browser storage is limited to 5MB and it can be cleaned up by the operating system so if the operating system is trying to free up some space on a device, it might just wipe that storage completely.
SQLite database, on the other hand, is a native database so it's outside of the browser, the data is not going to be deleted if it's in a native database. (A native database is not available in the browser unless using SQLite-storage plugin)

If you are running your application without the SQLite plug-in installed it's going to fall back to browser-based storage. If you do have the SQLite plug-in installed you have access to that native database then it's going to use that instead.

Objective

Include a custom validator for checking duplicate email address, username and a strong password beforehand for better user experience.

• Email address validator
• Strong password (a combination of lowercase and uppercase, numbers and symbols)
• Username validator

Version info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.9.0
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Issue content

When I click the text input, a keyboard shows up and pushes the navbar out of the screen. As a result, a user is not able to see the first few messages while typing messages. This issue has found during testing on iPhone SE (iOS 11) device.

Debug output

Expected behavior

All the messages including navbar should be placed in the content area, whether the keyboard is up or not.

Actual behavior

Objective
Write a cloud function which takes care of uploading original and thumbnail images from server-side.

Currently, Ashy uploads images from a client-side using RTDB.