DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Kurt Kemple
Kurt Kemple

Posted on

Introducing Journey - An App for Tracking Job Listings

Alt Text

Lately I've been helping quite a few people on the their job hunts and I noticed a trend. It can be really difficult to keep track of your job search when you're applying to tons of places and each company wants you to do take home assignments, interviews, and more. I've also been helping those newer to development ramp up with React and AWS Amplify so that they can quickly get some experience building fully functioning apps and hopefully give them a little knowledge and confidence boost at the same time.

That's why I built Journey. It's a small enough app that it can be figured out relatively easily and it also serves a purpose that hopefully many will find useful.

What It Does

Journey allows you to track job listings that you are interested in and provides features like:

  • ๐Ÿ“ Keep notes in Markdown
  • โค๏ธ Add favorites
  • ๐Ÿ‘ฎโ€ Authenticated
  • ๐Ÿ”ฅ Serverless back end
  • ๐Ÿš€ GraphQL
  • ๐Ÿ’ป Deploy back end in minutes

How It Works

The code for the app is located here.

In the project, you'll notice a folder named amplify. This folder contains the back end for the app that can be redeployed in anyone's account. In the amplify folder you'll see a backend folder. In this folder you'll see the configuration for the two main features:

  • Authentication service (powered by Amazon Cognito)
  • GraphQL API (built with AWS AppSync)

In the backend/api folder you'll see the GraphQL API configuration as well as the base GraphQL Schema.

This is the base GraphQL Schema. You'll see that the base schema looks like this:

type Listing @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  title: String!
  company: String!
  url: String!
  status: Status!
  favorite: Boolean!
  notes: String
  relatedDate: String
  contactName: String
  contactEmail: String
  contactPhoneNumber: String
  createdAt: String
  updatedAt: String
}

enum Status {
  APPLIED
  TRACKING
  INTERVIEWING
  TAKE_HOME_ASSIGNMENT
}
Enter fullscreen mode Exit fullscreen mode

If you've never worked with Amplify before you may not be aware of the @model directive. These are part of the GraphQL Transform library of the Amplify CLI.

@model - Decorate any base type with this directive to get CRUD and list query and mutation definitions, a DynamoDB table, and resolvers created for the GraphQL operations.

Deploying the App

The app can be configured to be used by only one person, or allow anyone to sign up and use the app. Make sure to pay attention to the instructions as some things are slightly different for a shared app.

A shared instance is a great option if you are part of a bootcamp or want to enable others to use this app in their job search.

Deploy the back end and run the app

Clone the repo & install the dependencies

~ git clone https://github.com/kkemple/journey.git
~ cd journey
~ npm install
Enter fullscreen mode Exit fullscreen mode

Initialize and deploy the Amplify project

~ amplify init
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y
~ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N
> We already have the GraphQL code generated for this project, so generating it here is not necessary.
Enter fullscreen mode Exit fullscreen mode

Add a user for you to log in with (if you plan to host for multiple users and allow registration, skip this step)

~ amplify auth console

> user pool
Enter fullscreen mode Exit fullscreen mode

Under the "Users and Groups" tab, click "Create user". Uncheck the "send an invitation to this new user?" checkbox and enter the necessary attributes, then click "Create user".

Start the app and login

~ yarn start
Enter fullscreen mode Exit fullscreen mode

Once the app starts enter the username and password you used in the previous step. You will be prompted to change your password.

Deploy the front end

Create a new repository with your git service of choice

Push the project to your new repository

~ git remote add origin <your_new_repository>
~ git push --set-upstream master
Enter fullscreen mode Exit fullscreen mode

Connect to AWS Amplify Console and wait for build to start. You will be given a production URL and you are ready to track your job listings!

If you wish to allow users to sign up and use this app then pick the shared branch to connect in Amplify Console, otherwise use master.

Customizing the GraphQL schema

This schema can be edited. If you need additional fields, you can update the backend by doing the following:

Update the schema (located at amplify/backend/api/jobassist/schema.graphql).

Redeploy the back end

amplify push
Enter fullscreen mode Exit fullscreen mode

If you or anyone you know needs help getting up and running with this app, reach out to me on Twitter, I'd be happy to help!

Top comments (8)

Collapse
rosswilliams profile image
rosswilliams

Hiya, currently @auth doesn't protect subscriptions, and subscriptions are on by default, so any user can read all Listing items as they are created. You need to either implement custom auth for subscriptions, or turn subscriptions off with @model(subscriptions: null). I see you are utilising subscriptions, so there is some specialised work needed to close off the security hole.

Collapse
theworstdev profile image
Kurt Kemple Author

Hey! Thanks for mentioning! It was originally intended to be a single use app, I later figured I'd add instructions for hosting a shared version but forgot to remove subscriptions. I've update the codebase to no longer use them, thanks again!

Collapse
roelofjanelsinga profile image
Roelof Jan Elsinga

That's very clean! Really makes me excited to build things in JavaScript more often, very cool project ๐Ÿ˜Š

Collapse
theworstdev profile image
Kurt Kemple Author

Thank you! ๐Ÿ™Œ

Collapse
aromanarguello profile image
aromanarguello

Wow, this is a an awesome idea! The app looks clean as well! Thanks for sharing!

Collapse
theworstdev profile image
Kurt Kemple Author

thank you! let me know if you have any questions!

Collapse
enzime4u profile image
Liviu Tudor

Nice !!! :)

Collapse
theworstdev profile image
Kurt Kemple Author

Thanks!!

๐Ÿค” Did you know?

ย 
๐ŸŒš Dark mode is available in Settings.