charlie059/interviewspark

InterviewSpark with AWS Amplify

InterviewSpark is an AI-powered mock interview tool that assists job seekers in honing their interview skills and boosting their confidence. Developed using React, it's underpinned by AWS Amplify and incorporates a wide range of UI components, pages, and plugins to provide a comprehensive mock interview experience.

Getting Started

To dive into InterviewSpark, ensure Node.js and npm are installed on your system. Setting up an AWS account is essential, along with initializing an AWS Amplify app. Once set, follow these steps:

1. Clone the repository: git clone https://github.com/Charlie059/InterviewSpark.git

2. Install dependencies: npm install

3. Set up Amplify:

amplify pull --appId d38e770jlxdzpa --envName staging

1. Start the development server:

npm run dev

1. Navigate to http://localhost:3000 in your web browser.

Documentation

All backend documentation for InterviewSpark is available on Github. This encompasses installation, setup, customization, FAQs, and troubleshooting advice.

Frontend Docs in Storybook

Storybook is a powerful tool for developing and documenting UI components in isolation. It allows you to visualize different states of your components, develop them interactively, and organize them hierarchically based on atomic design principles.

How to run Storybook?

• Installation: If you haven't already set up Storybook in your project, you can add it using npm or yarn:

  npx sb init

This command sets up the necessary configuration and installs dependencies. Storybook supports various frameworks like React, Vue, Angular, etc. It will try to detect the framework you're using.

• Running Storybook::

  npm run storybook

  This command will start the Storybook server and open it in your default web browser. By default, it will run on http://localhost:6006/.

Support

For any hiccups with InterviewSpark, please contact our project team. Bug reports and feature suggestions are welcome on the Jira.

Important Notes

• Ensure sensitive data like passwords or API keys are never hard-coded.
• Exercise caution regarding potential security threats, especially when managing user input.
• Refrain from uploading .env files to git.
• Execute a npm build and ensure no errors exist before any push.
• Do not use amplify push unless you have permission

Code Review and Best Practices

• Every pull request needs scrutiny from at least one other developer.
• Address all feedback before concluding the merge.
• Prefix commit messages with the corresponding Jira ticket number.
• Employ Cypress E2E for frontend tests. To activate in npm, utilize the appropriate command.
• SAM is the chosen tool for backend processes, currently in transition.

interviewspark's Issues

Add uniqueHandle to increase GSI overhead

In order to implement two uniqueID queries, it is necessary to use an additional GSI, which needs to be considered

Add checkboxes in front of the New interview

Refactor Code of Interview

Update ACL

Need to handle ChatGPT API failure

appsync shoud add UnauthorizedError

Router may failure when route to the mock interview page

The avatar profile links to the wrong address

Profile and Cover picture user modifiable

When Recording video has a very low possibility to cause memory leaking

Interview List page may not working

Need to handle resize when click fold button

Redesign Finish Interview Page

Interview Profile Page should use auto fitting

Amplify Build Failure

Add Back Button in Mock interview

Register Error handling

UserInterview Searching backend need to imporve

Interview Promotion Page

Need to update logic

Interview Question sort based on string

The avatar and the profile overlap in function can be deleted

May change email verification to magic link in the future

depends on amplify

Add createGuestUser and createGuestProfile in GraphQL

Mutation: createGuestUser

Description

Creates a new guest user with the specified email address, unique handle, first name, and last name.

Input

Field	Type	Description
emailAddress	AWSEmail!	The email address of the guest user to be created.
uniqueHandle	String!	A unique handle for the guest user.
fName	String!	The first name of the guest user.
lName	String!	The last name of the guest user.

Output

The mutation returns a GuestUser object representing the newly created guest user.

Field	Type	Description
emailAddress	AWSEmail!	The email address of the guest user.
uniqueHandle	String!	The unique handle of the guest user.
fName	String!	The first name of the guest user.
lName	String!	The last name of the guest user.

Errors

The mutation can return the following errors:

Error Code	Description
PramsMissingError	The provided prams is missing.
InvalidEmailAddressError	The provided email address is invalid.
InvalidUniqueHandleError	The provided unique handle is invalid.

Example

Request

mutation {
  createGuestUser(
    emailAddress: "[email protected]"
    uniqueHandle: "example"
    fName: "John"
    lName: "Doe"
  ) {
    emailAddress
    uniqueHandle
    fName
    lName
  }
}

MockInteview NaN Issues

xt-dev.js:20 Warning: Received NaN for the strokeDashoffset attribute. If this is expected, cast the value to a string.

iOS and iPadOS may not access

Add retry button to mitigate google viewer issue on profile page

Interview component Pagement issues

// TODO: remove the limit
const result = await API.graphql(
graphqlOperation(getInterviewList, {
emailAddress,
limit: 1000
})
)

Not good to scan the DB to count rather than Update the DB

Improve Interview response time

Create Question page may refresh

InterviewPromotion may missing in specific size

updateUserProfile may overwrite

Add Random Problem Button

getInterviewList Time sort bug

Interview Sort key should use Time

Email Checker Issues

1. Register in Gmail using the symbol '.' is legal, If some user's original email address is: [email protected], then she will never receive the email. For example, my original address is '[email protected]

2. Some email systems may allow users to register the original address including '+', if add a checker, then she will never receive the email.

AWS Polly have a very low chance to fail

Google file viewer may failure

Add AI generated Avatar to interview page (Experiment)

AccessDeniedException: User: arn:aws:sts::851565480501:assumed-role/amplify-amplifyc249ba1b12034-staging-214038-authRole/CognitoIdentityCredentials is not authorized to perform: polly:SynthesizeSpeech because no identity-based policy allows the polly:SynthesizeSpeech action

Not Practical to add a delay

// Add a delay before starting the next recording setTimeout(() => { handleStartCaptureClick() }, 500)

Total Practice Fractional overflow

Change DB for resume scan

Name left-aligned in a problem selection page

add device selector

component folder Ordered categories

unauthorized when finish the interview

Need Tutorial

App needs a starter tutorial:
register => Resume Analysis => display analysis result => Mock interview (with gpt generated questions?)

Redesign Mock Interview Start

Add Back Button in Review interview page

Interview QuestionID is not Mapping

Add a prompt icon to indicate a review of the detailed interview