CSC473 Project (Under Construction)

JobFirst

By: Gong Qi Chen (product manager) Kai Hang Chen (scrum master) Jie Lan (developer) Siddharth Rajan (developer) Alan Lau (developer)

Special thanks to: Tendo Choi, Peter and Shirley (contributions to the overall design)

Background:

JobFirst is employment-related search website that makes a connection between employer and skilled new immigrants who can speak Chinese and tries to find a job but couldn't do so due to language and cultural barriers. The interface will be in bilingual(English & Mandarin), allowing the user easier to use. On the website, a credential converter can be provided that helps customers understand what their degree means in the new country.

Tools Used:

1. Gatsby
2. Graphql
3. React.js
4. AWS cognito
5. AWS appsync
6. AWS Amplify

Demo

Refer here for our website

https://master.d1lcnidp5acn3o.amplifyapp.com/

1. employer account:
   • username: employer pw: employer
2. employee account:
   • username: employee pw: employee

Refer here for our developer documentation

https://kaihchen1230.github.io/jobFirstDoc/index.html

How to get started:

1. clone the repo git clone https://github.com/Kaihchen1230/csc47300Project.git
2. install all the dependencies npm install
3. setup backend amplify init
4. push the backend to the cloud ampify push
5. run the app gatsby develop

---

For the developers:

• READ FIRST

Fresh start: (RECOMMENDED)

1. Delete your local
2. Delete your repo
3. Fork from Kai
4. (optional) On the github repo, delete the unnessascery branch such as:
   1. frontend-branch
   2. local-branch (I believe this is where Kai write his code)
5. On the github repo, set newFrontend as the default branch
6. git clone [your own repo link]
7. git branch you should be in newFrontend branch
8. npm install install the dependencies
9. (optional) amplify configure create a IAM role for this project SAVE THE ACCESS ID AND ACCESS KEY
10. amplify init initialize the amplify backend
    USE A DIFFERENT ENV
    USE A DIFFERENT ENV
    USE A DIFFERENT ENV
    You can name it as younameenv ex: alanenv
    USE YOUR OWN PROFILE
    USE YOUR OWN PROFILE
    You can find more information here about amplify command. If you have created too many profiles you can also find the file where your profiles are being recorded and then delete 'em.
11. amplify push so your backend will be in the cloud
12. Begin coding...

Adding new Amplify service:

• In this example I will be adding an API

1. git pull upstream whateverbranchweuse Get the latest update from upstream. We probably use the newFrontend branch. So all of our pull requeast will go to newFrontend.
2. npm install run this after every pull from the upstream
3. amplify init to sync with the backend from upstream because someone else might add something to the backend already.
   USE THE EXISTING ENV FROM PREV SECTION STEP 10
   USE THE EXISTING ENV FROM PREV SECTION STEP 10
   USE THE EXISTING ENV FROM PREV SECTION STEP 10
   So it should be yournameenv
4. amplify push now your backend should be the same front upstream and when you run gatsby develop it should be working
5. amplify add api to add the service that you want to add. In this case, it's api
6. amplify push Set it up according your needs:
   • define the schema
   • write custom graphql
   • etc...
7. test it out to see if your backend is working
8. git push Push it to your repo to make pull request.
9. Create the pull request.

Testing:

npm test or npm test -- -- watch

Document:

npm run doc All docs are inside the docs folder Refer here for how to write jsdoc

File Structure

.
├── amplify
│   ├── #current-cloud-backend
│   │   ├── api
│   │   │   └── csc47300project
│   │   │       ├── build
│   │   │       │   ├── resolvers
│   │   │       │   └── stacks
│   │   │       └── stacks
│   │   ├── auth
│   │   │   └── cognitoed11de21
│   │   └── storage
│   │       └── csc473storage
│   └── backend
│       ├── api
│       │   └── csc47300project
│       │       ├── build
│       │       │   ├── resolvers
│       │       │   └── stacks
│       │       └── stacks
│       ├── auth
│       │   └── cognitoed11de21
│       ├── awscloudformation
│       └── storage
│           └── csc473storage
├── docs
│   ├── fonts
│   ├── scripts
│   │   └── prettify
│   └── styles
├── mocks
├── node_modules [1620 entries exceeds filelimit, not opening dir]
├── public
│   ├── businessImages
│   └── static
│       └── d [21 entries exceeds filelimit, not opening dir]
├── src
│   ├── components
│   │   ├── Home
│   │   ├── authentication
│   │   ├── business_profile
│   │   │   └── test
│   │   │       └── __snapshots__
│   │   ├── dictionary
│   │   ├── form
│   │   ├── jobList
│   │   ├── job_description
│   │   ├── talent_list
│   │   └── user_profile
│   ├── customGraphql
│   ├── graphql
│   ├── pages
│   ├── services
│   ├── style
│   └── test
│       ├── integrationTest
│       │   └── __snapshots__
│       ├── jobDescriptionUnitTest
│       ├── jobListUnitTest
│       ├── systemTest
│       └── userProfileUnitTest
└── static
    └── businessImages

62 directories

Above is all the directories in our root folder:

• amplify is where all of our backend files located
• docs is where all the generated html documents located
• src is where mainly our code located
• static is where all the static files like images located

src
├── components
│   ├── Home
│   ├── authentication
│   ├── business_profile
│   │   └── test
│   │       └── __snapshots__
│   ├── dictionary
│   ├── form
│   ├── jobList
│   ├── job_description
│   ├── talent_list
│   └── user_profile
├── customGraphql
├── graphql
├── pages
├── services
├── style
└── test
    ├── integrationTest
    │   └── __snapshots__
    ├── jobDescriptionUnitTest
    ├── jobListUnitTest
    ├── systemTest
    └── userProfileUnitTest

24 directories

Above is all the directories in our src folder:

• components is where all the components located, categorized by the page where they belong
• customGraphql is where all the custom Graphql query located
• graphql is where all the generated query located
• pages contain all the codes for all the pages of our application
• services contain some functions for authentication and translation feaature