#whostack

Happy to report that our first web app from scratch is now available on heroku! Many special kuddos to Seemaisms for being my partner in crime on this project. 

For Slack users, our program should allow you to select any private groups you may be a part of, generate a list of all of the profile pictures from members of that group, and allow you to click on each picture to find the name of that user. Our goal for the app is to help users remember names and faces better, a struggle I'm sure for all new employees in an organization, or for schools like Fullstack which have a new set of students every few weeks.

This is just the first (simplified) version of what we hope to eventually create, but I'm pretty excited about it anyway. I learned a ton through this process about outside apis, authentication, and ajax requests. Before this project I had never really internalized the flow of the various requests and responses between client, server, and provider, and now I feel like I have a good enough understanding that I can actually explain it. I have attempted a few times to draw out some sort of visual for the blog here, but my artistic abilities are fairly limited, and my time even more so. Instead I'll just go with a list, which maybe you can kind of see in action if you walk through the app itself. 

A user clicks a link on our homepage to authenticate through Slack.

That link sends them to Slack where they authenticate, along with a redirect link for what to do if they successfully authenticate.

After successfully authenticating with Slack, Slack gives the client a secret code and state that I believe are unique to the client and our particular app, respectively. Slack tells the client to redirect to our redirect link along with this code and state.

The client makes a get request to the server's redirect link along with the code and state. In addition to serving the client's get request, the server itself makes a background get request back to Slack with the code and state. Slack then provides the server with a token.

As the user clicks on different front end things on our webpage, selecting a private slack group for example, the client's browser makes a background get request to our server for that information. Our server makes various background get requests to Slack with the unique user Token as well as whatever additional information the user has selected. When it has received that information our server then sends it back up to the client. Each time the client wants more information from Slack (maybe ever user's profile picture for example), our server is making a request with this particular token, which will ensure that we only receive information appropriate for that client.

Hopefully that was accurate and understandable. Let me know if it's not! While obviously I'm speaking particularly to our app right now, this authentication process is pretty similar across various apps and apis. I'm happy to report that Slack's API is pretty powerful and approachable. 

As I mentioned, this is just the first iteration of WhoStack, we've got a lot of features we hope to add someday, some ideas include:

Creating some sort of game like functionality (maybe we provide the user with a random name, and the user will have to identify the appropriate face for example)

Creating a high score board which persists

Using cookies/sessions to allow users to play the game without having to reauthenticate every time they play

Using websockets (or something similar?), to allow a multiplayer guess who like game.

Improving the front end to be more aesthetically pleasing

Allowing users to upload their own photos, or use a different authentication process instead of slack

Allowing users to send messages through the site to people they don't know very well to introduce themselves

Allowing users to send messages to themselves with slackbot with reminders to get to know a particular person better.