Project Series: Tinder for your Craigslist apartment hunt

Part II: Tinder-like front end for AptHunt

MM

The App

Ok so now we've been collecting a ton of posts that we might dig. We need to connect all that information to an application so that we can send off emails to posts we like quicker as well as collect more features we can learn on later.

Setting up our server

Let's set up the server where our application will live. Log into your AWS account and navigate to the EC2 page. We're going to use a small instance, so go ahead and fire up a t2.micro ubuntu instance for this. You want to make sure you give your box permission to access dynamodb and SES by giving it a role with these permissions. If this doesn't sound at all familiar, check out this aws roles tutorial and this blog for a more in depth tutorial on how to set this instance up.

The Server Side

Now let's get the application up to the server. Go to the github for this project and git clone https://github.com/mayorquinmachines/AptHunt.git into the /home/ubuntu folder. Descend into the project folder using cd AptHunt. Before running the application we need to configure some variables for your application. Open up the file with the application endpoints: vim ~/AptHunt/FlaskApps/AptHunt/app/views.py and go to line 19. This will prompt you to add in the name to the dynamodb table you made in the first part of this tutorial. Also, take a look at the user dictionary called user_dic on line 18. I have two users a and b which have user ids 1 and 2. I map the ids to initials so I can easily distinguish the users in my dynamodb table. You can add or change the user initials and ids as you see fit.

We also need to configure the address of your apache server. Open the file vim ~/AptHunt/FlaskApps/AptHunt.conf file. On line 2 you'll want to fill in the IP address of your ec2 instance. Get the ipv4 of your ec2 instance and type it in. It should look like ServerName 123.456.7.89.

Now you're ready to run the setup script and have your application up and running! Go to the home directory of the project (the outermost AptHunt folder). Now run ./setup.sh. This will execute a bunch of installs that are needed to run the server. Make sure to say 'y' to all of the prompts. Now go to your ec2 ipv4 address and you should see a login page. Register your user with your prefered email and password. You should be shown the AptHunt page like the gif above.

Breakdown of the flask application

I want to make sure my partner also likes the apartment I like so we have to make two users. We use Flask-Security to set up a way for users to authenticate and use the app. This way we can keep track of who likes what.

For the main endpoint, we query the dynamodb table where we stored all that scraped data. We want to present each user their own queue of posts, so we check the user and pull rows from that table that the user has not seen.


                                                                                                                                                                        
@app.route('/')
@login_required
def apthunt():
    user = str(current_user.get_id())
    seen_col = str(user)+'_seen'
    #After selecting the right column, filter the table for rows where the seen column is 0
    posts = table.scan(FilterExpression=Attr(seen_col).eq(0))['Items'][:50]
    #ids of the posts to pass to the html 
    ids_lst = [str(x['id']) for x in posts]
    #Doing some clean up of the data here
    for post in posts:
        post['t_seen'] = int(post['t_seen'])
        post['s_seen'] = int(post['s_seen'])
        post['t_like'] = int(post['t_like'])
        post['s_like'] = int(post['s_like'])
        links = post['pic_links'].split('|')
        links = [x.replace(')', '').replace('(', '').split(',')[0] for x in links]
        links = [x +'.jpg' for x in links if '.jpg' not in x]
        post['pic_links']  = links
    return render_template('index.html', posts=posts, ids_lst =ids_lst)

We make two endpoints that allow cross origin referencing to collect the user's likes and dislikes. These endpoints will be referenced directly by the jquery ajax POST done by the buttons in the html. That way we have a continuous flow through all the posts in our queue.

The UI

We wanted to use a tinder-like interface to review the posts because its very fast to input a simple yes no answer and having the pictures to view with some important metadata is very handy in making that binary decision even quicker. I used codrops's card stack effects to get the card interface and their hover effects to add the metadata we extracted earlier to the image with a simple hover.