Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darkhorsecorder/apptractive-fullstack-technical-test
Apptractive Full Stack Technique
https://github.com/darkhorsecorder/apptractive-fullstack-technical-test
aws-amplify aws-appsync aws-cdk aws-cognito aws-dynamodb graphql i18next jest nx-monorepo react xero
Last synced: about 1 month ago
JSON representation
Apptractive Full Stack Technique
- Host: GitHub
- URL: https://github.com/darkhorsecorder/apptractive-fullstack-technical-test
- Owner: DarkHorseCorder
- Created: 2023-12-14T07:11:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-15T08:17:54.000Z (about 1 year ago)
- Last Synced: 2024-04-21T00:49:25.193Z (8 months ago)
- Topics: aws-amplify, aws-appsync, aws-cdk, aws-cognito, aws-dynamodb, graphql, i18next, jest, nx-monorepo, react, xero
- Language: TypeScript
- Homepage:
- Size: 1.68 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Apptractive Fullstack Technical Test
## Background
This technical test assesses your full-stack application development skills using existing code similar to the project you'll be working on and includes tasks that simulate real project work.
Most applications connect to 3rd party APIs, which generally involve authentication by oauth2.0, retrieving some data via their API, then displaying it to the user.
In this test you will be authenticating Xero using oauth 2, then call the Xero API (https://developer.xero.com) to retrieve the user's invoices and display them in the web application.
If you have not worked with oAuth before, it is recommended to read up on it before starting the test (sample video explaining oauth2 https://www.youtube.com/watch?v=ZV5yTm4pT8g). If it's your first time, at least by completing this test you will take away something important in your future coding career :)
## Project structure
- Project - NX monorepo (https://nx.dev - allows running lint, tests, build, etc. e.g. `npx nx lint backend`)
- Frontend - React Typescript (https://nx.dev/nx-api/react)
- Backend Tooling - AWS CDK (Typescript) (https://github.com/adrian-goe/nx-aws-cdk-v2/blob/main/packages/aws-cdk-v2/README.md)
- Database - DynamoDB
- Functions - Lambda
- API - Appsync GraphQL (Apollo used in Frontend)
- 3rd Party API - Xero - Accounting software
## Prerequisites
There are some accounts you will need to set up before you can do the technical test.
If you have any issues or concerns with the below, please let us know.
### Amazon Web Services
You will need to use an existing Amazon Web Services account or create a new one to complete this test. (https://console.aws.amazon.com)
- If you are creating a new account, you will need to provide payment information to complete the test however you can delete the account after the interview is complete
- If you have an existing account, you can destroy the stack once complete (e.g. calling `cdk destory--profile enterprofilename` in the backend folder)
- There shouldn't be costs associated with this test, however make sure to destroy once the interview is complete
- The user stories will also guide you from this point
### Xero
Full instructions here: https://developer.xero.com/documentation/getting-started-guide/
1. Create a developer Xero account to complete this test, which will give you access to Xero APIs (https://www.xero.com/au/signup/developers)
2. Once you create and verify the developer account, it will prompt you to create an organisation and start a free trial (no payment information required)
3. A demo company will also be created for you to use in the test (Demo Company)
4. The user stories will also guide you from this point
### Github
Create a repo in Github and push this code before you begin. Use github workflows you are used to when completing this test. (e.g. feature branches, pull requests, etc)
## Run app
### Install dependencies
`yarn install && cd backend/src/layers/dependencyLayer/nodejs && yarn install`
### Serve react app
`npx nx serve react-app`
### Scripts
Review `package.json` for all scripts.
| Command | Description |
|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
| `yarn run codegen ` | Generates the latest graphql schema and typescript types. Run after deploying GraphQL schema updates |
| `yarn run output` | Copies output file to the react-app (providing it was generated during cdk deploy with flag. (e.g. ` npx cdk deploy --outputs-file output.json `) |
| `yarn run esbuild` | Used by AWS CDK to transpile typescript to javascript, shouldn't be necessary to run manually |
### Environment
For your information, the project was set up with:
- yarn 3.6.4
- node v18.16.1
## What we test
1. That you are able to set up your dev environment, of course if you run intro troubles and can't get it working, please let us know. This happens in a real project too
2. The code meets the requirements based on the user stories
3. Coding best practices (e.g. comments, security, code structure, git workflow, etc)
4. Demo of stories, code review together and discussion about your approach
## Stories
Once the stories are complete, let us know and we will review together. Create a pull request or whatever workflow you would follow prior to a code review.
### TEST001 - Set up Xero App
**As a** developer
**I want** to be able to set up a Xero app
**So that** I can connect to Xero
#### Acceptance Criteria
1. When logged in to Xero, Set app name as 'Fullstack Test' at https://developer.xero.com/app/manage/
2. Select integration type as "Web app"
3. Enter application url as https://localhost:4200
4. Enter the redirect URI as https://localhost:4200/xero-redirect (it will be used in oauth2 to exchange code for access token)
5. Once app is created, generate the client ID and Client Secret for application access
## Story001
### TEST002 - Connect to Xero API
**As a** developer
**I want** to be able to connect to Xero API
**So that** I can access the Xero API
#### Acceptance Criteria
1. Insert the generated Xero client ID and Client Secret into the project to allow connecting to the Xero API (search `xeroClientId` and `xeroClientSecret` in the project)
2. Ensure client Secret is not exposed in the code
## Story002
1. Inserted the generated Xero client ID and Client Secret into the project by adding them in .env file
2. add .env file in .gitignore to not exposed in the code
### TEST003 - Set up AWS CDK
**As a** developer
**I want** to be able to set up AWS CDK
**So that** I can deploy the backend to the correct AWS account
#### Acceptance Criteria
1. Authenticate to your AWS account
2. Set up AWS CDK using `npm install -g aws-cdk` or `yarn global add aws-cdk` if not already installed
3. If you have never used CDK in your AWS account, you will need to bootstrap it first `npx nx bootstrap backend --profile enterprofilename`
4. First deploy the lambda layer stack using `npx nx deploy backend FULLayerStack --profile enterprofilename`
5. Deploy all stacks in the backend using `npx nx deploy backend --all --require-approval=never --outputs-file output.json --profile enterprofilename`
6. Copy output file to react-app application by running `yarn run output`
#### Developer notes
- Quick and Easy way to authenticate to your AWS account is to generate secret and access keys. https://docs.aws.amazon.com/cli/latest/userguide/cli-authentication-user.html `aws configure --profile enterprofilename`), otherwise more ways here https://docs.aws.amazon.com/cli/latest/userguide/getting-started-quickstart.html
## Story003
1. Create new IAM user account and configure AWS CLI with new profile
2. Install AWS CDK using `npm install -g aws-cdk`
3. Bootstrap the backend using `npx nx bootstrap backend --profile marko_salme`
4. Deploy the lambda layer stack using `npx nx deploy backend FULLayerStack --profile marko_salme`
5. Deploy all stacks in the backend using `npx nx deploy backend --all --require-approval=never --outputs-file output.json --profile marko_salme`
6. Copy output file to react-app application by running `yarn run output`
### TEST004 - Authenticated user - Connect Xero button
**As an** user
**I want** to be able to connect to Xero
**So that** I can be authenticated via Xero oAuth 2 to access my data
#### Acceptance Criteria
1. Once a user signs in, they should see the dashboard
2. On the dashboard there is a button "Connect Xero"
3. Clicking "Connect Xero" should open a new window to Xero oAuth 2.0
4. Once the user connects to Xero, they should be redirected back to the application (`/xero-redirect` route)
#### Developer notes
- All this functionality should already be completed without any development from your end, unless your environment / xero is not set up correctly
### TEST005 - Xero oauth2 - Exchange authorisation code for token set
**As a** user
**I want** the application to exchange the Xero authorisation code for a token set
**So that** I can make authenticated requests to access my Xero data
#### Acceptance Criteria
1. Backend uses the redirect URL to exchange the authorisation code for a token set
2. The token set is stored for my user in the database for subsequent Xero API requests
3. Once successfully authenticated, in the web application the user should see a message that says "Xero Connected"
4. Once successfully authenticated, in the web application the user should see a button "Go To Dashboard"
5. Clicking "Go to Dashboard", user should navigate to the dashboard page
#### Developer notes
- The lambda function you will work on is `/backend/src/functions/xeroCreateTokenSet/index.ts`
- The React component to work on is `react-app/src/app/pages/XeroRedirect/XeroRedirect.tsx`
- A user record is created for each sign up in the DynamoDB database, you can update this record using the sub to store the token set
- Read more here to understand the Xero oAuth workflow and integration:
- https://developer.xero.com/documentation/guides/oauth2/auth-flow
- https://github.com/XeroAPI/xero-node
- https://github.com/XeroAPI/xero-node-oauth2-react-app
### TEST006 - Xero API Invoices
**As a** user
**I want** to be able to view my invoices
**So that** I can see all my invoices that appear in Xero
#### Acceptance criteria
1. Retrieve the token set from the user's profile to call the Xero API
2. If the token set is expired, the backend should refresh the token set before calling the Xero API
3. In the web application, the user should see a list of their invoices:
- For each invoice, it should show the invoice number, status, amount paid, Tax total and total
4. User should be able to toggle between paginated results
5. User should be able to filter invoices by status
#### Developer notes
- You will need to use AWS CDK to complete this task (previously done for you):
- Update the GraphQL schema (at `backend/src/appsync/schema.graphql`)
- Create a lambda function to retrieve the invoices (in the directory `backend/src/functions`)
- Create a mutation that will trigger a lambda function (at `backend/src/stacks/AppSyncAPIStack.ts`)
- Use the sub to retrieve the user's database record, which should have the stored token set
- For the UI:
- Complete the UI in the component `react-app/src/app/pages/XeroTransactions/XeroTransactions.tsx`
- Take note of the UI library the application uses, you may be able to use a UI component that will display the data nice, manage the columns and rows, whilst handling pagination