siuwafong/hatchways_solo

hatchways_solo's Issues

IN: Integration the back-end API with the front-end for the Login/Signup pages

• making the API calls from the front-end

BE: Invitation Model

Rejected

Approved

from_user

To_user

To_user_email (optional null)

BE: GET invitations /user/:id/invitations

A list of pending invitations that you are receiving from other users

Setup Google Translate API

https://cloud.google.com/translate/docs

FS: Editing Profile + Profile Pictures

• use dropzone or something like it to allow user to upload picture. multiform POST request
• save to amazon s3 and get the uri
• save uri to database
  react-dropzone
  multiform POST request to send file
  Amazon S3 file upload
  save the url

Complete #16 - GET invitations

Completed first version of ticket #16

Set up: Email API (Sendgrid)

https://sendgrid.com/solutions/email-api/

Finish invitation dialog

Completed invitation dialog. There is a popup that allows the user to invite a friend by typing the friend's email address. Form validation is used to check if a valid email is submitted.

Back-end: Signup / Login API Routes

• Create a Register route (POST)
  • this will create a new user, return 201
  • validation on the back-end - password should be atleast 6 characters, required fields (email, name)
  • simple password validation (>6 chars)
• Create a Login route (POST)
  • verify username and password
  • return 4xx if things are incorrect
• User model, don't want to save password directly on the database (hash/salt before we save them)
• Add an auth middleware / decorator - we can easily create authenticated routes and get the user object
• Try to use a decent authentication strategy something like using HTTP only cookies or localstorage

Complete frontend skeleton

I've completed ticket #15 (frontend skeleton). I added some basic functionality (searching through friends list, typing messages, and viewing messages from different friends).

BE: GET contacts /user/:id/contacts

A list of contacts you’ve accepted to

BE: Conversation Model

• Users
• Messages []

BE: Translation

• When a message is sent and saved, translate it with respect to the number of users in that conversation . save these translations. at most each message should be translated to another language once.
• For example, if user A (English) is in a convo with user B (French), then any message user A sends, must be translated to French. and vice versa
• If user A (English) is in a convo with user B (French) and user C (Spanish) then a message user A sends must be translated to French and Spanish
• Chat Component is getting: {<user_id> : {translated_text: “”, sender_id: 2, chat_id: 2, translations: {“english”: “”, “french”: “”}}}

FE: Invitation Tab (next to Contacts)

• A pending invitation is an invitation that is neither approved or rejected
• A list of contacts that are pending
• Reject or Approve
  - 

Front-end: Signup / Login Pages

• create two front-end react routers (login and signup)
• There is no landing page - redirect to signup
• Signup page - name, email, password + confirm password
• Ignore Forget password (we don't need that right now)
• Front-end validation as well:
  • Examples: Password length >= 6, All fields are required, email is properly formatted (if you wrap signup and login in an HTML form, you can leverage some front-end HTML form validation, required and right typing)
  • leverage error, helperText, and snackbars (material-ui) for showing validation errors, https://material-ui.com/components/snackbars/ + https://material-ui.com/components/text-fields/

Stretch Goal: make this page responsive by remove any side images on smaller screens

BE FE IN: Set up Socket.io

Socket.io (websockets) are important for this application as we'll be using it for

• conversation (chatting rooms)
• the real time responses from players

To set up socket.io, we need a set up architecture both on FE and BE. To begin with, create a scratch messenger feature that allows users in the same Match to talk to one another

FE: Search function Debounce

• Debounce (https://www.npmjs.com/package/react-debounce-input) 
• Backend for contacts list should be able to take search parameters 
• Frontend: when user types in friends email/name it should filter the friends list
  - 

BE: CREATE Invitation /user/:id/invitation

Creates an invitation model

BE: GET conversations /user/:id/conversations

A list of conversations you have with others

FE: Frontend skeleton

Messaging Centre

Sending Images

Since we already have uploading feature, we can store sent images into s3 and store that link as a image message type

FE: Invitation Dialog

• Create the UI (Dialog Material UI) 
• When a user invites a friend, enters email, generates a link to share 
  - 

Full Invitation Flow

Sending an invite to connect via email (sendgrid, 3rd party API)

Sending the invitation through sendgrid (just enter a personal email address in the top field and click Send). Alternatively the user can manually send an email invitation (Copy url button).
Open the email invitation (in gmail, etc) and click the signup link.
Should open up a new registration
Refer to mockup for more details

When an email is typed in and sent

An invitation is created
An email is sent
When a referral link is sent and another user visits that link

Detect if this is coming from a referral link
If yes, the moment the user creates an account, or if they are already logged in, if
invitation between those two users don’t exist yet, then create an invitation to
connect

BE: Invitation Controllers

• /invitation/:id/approve
• /invitation/:id/reject
• Routes that can approve or reject
  - 

FE: Contracts Tab List UI

Retrieve List of contacts that are already approved and you can start convos with

Back-end: Setup Postgres / Mongo for project

• Connect to a database technology on start of your application (please only select one technology, try to choose something that is a good fit for your project if possible, or something you are comfortable with using)
• Create a very basic user model that will be needed for login / signup of the application
• Update the Readme of the application to include some instructions on how to run the application with the db locally

Here are some resources on the technologies:

• Postgres - use SQLAlchemy if you are using Flask/Python and use Sequelize if you are using Node.js/Express
• MongoDB - use Mongoose for Node.js or PyMongo + some object document mapper to make things organized

Toggle from translation to original language