While listening to a Kinda Funny Games Daily podcast, there was a comment about how difficult it is to recite a 12 digit Nintendo Friend Code over the air during the "Squad Up" segment of the show. This small complaint brought me to the idea of creating a simple website where you could go to a custom short link and there it is - a display of your Nintendo Friend Code! I first heard of serverless technology last year and since then I had been wanting a simple idea that fits it's unique concepts just right - this was it.
Building the Idea
The basics of the idea was to keep it simple - no user system, not highly customizable, do one job and do it well. A user can register a short link, update, and share. My next question was to see how quickly I could execute on this idea. Having used Amazon's Web Services, Lambdas and API Gateway on another project of mine, I quickly understood how to get the basics up and running. Though I've not used their NoSql solution DynamoDB (which gives me one thing to learn), I have used S3 and CloudFront to host the static assets. The front end will use VueJS, from experience on a differnt project - all of which are easily completable.
Front end is not my specialty but it is within my skill to handle every aspect of it. User experience means a lot if an app is to be simple. The 4 different screens needed: 1. Entering your friend code, 2. when entered, show the sharable link and editable link, 3. display page for codes, 4. edit page. Having been familiar with Element-UI web tool kit, I knew it had the visual components I would need for this simple app. It might be a large library to pull in for this little functionality but I really like using it. In order to get the front end to visitors, I utilized S3 storage with CloudFront as a content delivery network. This structure allows users around to world to retrieve the front end as fast as possible despite their location in the world. The cost for this type of service is very low and no intervention is needed, if traffic drastically increases.
The first screen is the 'Create Code' screen that takes the desired short link and 12 digit code. On submission and confirmation, the next page has the sharable link and edit link shown. Screen 3 is the Display code with the title of their link and the 12 digit code. The file screen is the edit screen only reachable by copy and pasting the edit link directly in the browser which contains the edit token. The title is displayed and the code is shown in editable fields with a submit button.
The design would be inspired by the Nintendo Switch's logo. Red and white, with 2 halves of a soft cornered square, disconnected. The only main difference is my halves are stacked vertically. User interactions all take place on the top half of the screen and the bottom being the non-changing footer that every page will have.
This is where the interesting parts begin and where I shine. Based on the screens, I needed a couple simple web service calls. Get friend codes, make friend codes, edit friend codes - perfect for serverless. Doesn't need to be high performance and only 3 unique functionalities. AWS Lambdas can use a variety of programming languages and I chose NodeJS. My comfort level with Node is good and I have already used the AWS SDK extensively. Lets get this done.
The couple of times I used API Gateway with Lambdas, I have never fully used all its features. It was all more playing with the functionality rather than getting it ready for prime time. Learning the difference between environment and stage variables was very much needed for all future projects, along with learning what stages truely was in the API Gateway world. With lambdas, I also knew that if my traffic grew, they could scale without intervention.
The DynamoDB implementation was uneventful and very straight forward with the AWS SDK documentation. I chose to allocate 20 of my 25 free read/write capacity units to the prod database to make sure any surge of traffic I can handle.
Putting in the Time
I started programming on a Monday after work. I skipped the gym all week so I could put in as much time as I could, trying to execute the idea and challenging myself to get it done in one week. The lambdas was not a challenge programming. Most of the time was spent learning all the different configurations of Lambdas being used with API Gateway. Understanding how to properly set up these environments truely helped ease the deployment of my application. Less than half of the time was put into the functionality of the web page part of the app: inputs, copy and paste fields, and special routing with VueJS. Everything was working perfectly as of Sunday. It took one week to create a 100% functioning app and have it deployed on AWS with development and production stages for testing and real user interaction.
The following Monday, my girlfriend complained about the visuals, so I spent that evening all on UI Design. Making it look like the Nintendo Switch's logo but with a vertical orientation, was a really good idea. This design was chosen so that it was visually familiar to the user base (very proud of my last tweak which was having the two facing edges sharp like the two halves were once one).
Once done, I immediately posted it in a Discord channel for a community I consider myself a part of, but didn't get any traffic other than a visit saying it looks cool. Every now and then, I would look to see if conversation would come up to where I could talk about it but no such opportunity arose.
On August 23rd I created a post on Reddit to start spreading the word about my new site. People loved it! I advertised it as an easier way to share friend codes and it's what they wanted. The main praise being it's simplicity was the biggest compliment - since that was the intention. A solution to a crappy situation Nintendo gave to its fans.
In 24 hours, I received 2000+ visits and 500+ entries in my database (whether it be invalid or valid) - inevitably, there were about 50 entries in my database that were malicious or trolling. Posts and tweets were being made on Facebook and Twitter without me having posted about it on those platforms. This was well above my expectations which made me very happy to see such positivity around an idea I had.
An entire idea was executed in a week and no servers were involved. With clever engineering and some DevOps experience, most ideas can quickly become reality. Larger companies might shy away from there newer concepts because they do not understand the technology, but when utilized properly they can be a great tool and provide huge cost savings.
The challenge of completing the idea in a week was good. The quality of the product that was created... great. Using modern and cutting edge technology, I was very easily able to execute on an idea with little cost and little time. The right tool for the job can go a long way.