{{announcement.body}}
{{announcement.title}}

Adding an Easter Egg to Your App

DZone 's Guide to

Adding an Easter Egg to Your App

A Zone Leader talks about how he added a simple "Easter Egg" to an application he built for a family member.

· Web Dev Zone ·
Free Resource

Those growing up in North America likely have a memory of the Easter Bunny — a mythical creature that magically left baskets or eggs filled with prizes for children. The concept of an Easter Egg Hunt pairs a group of children with a large area filled with hidden eggs. In some cases, the child with the most eggs found wins a prize. In other cases, the child which finds the single "golden egg" wins a prize too.

As you might expect, this idea of putting undocumented features (Easter Eggs) into a software program was destined to happen. Over the years, I have found myself seeking out such hidden gems and finally decided to add one into my mother-in-law's application as noted in my "New Application Journey" series.

Determining the Egg

For me, determining the content of the Easter Egg was simple.  I wanted to replace the link behind the logo of the application to return a modal filled with random content from a collection of Instagram accounts. Once found, end-users of the application (which is basically just my mother-in-law) could see a random photo from one of our family members just by clicking the top left corner of her application:

Application navbar

API Updates

For the content retrieval of the Easter Egg, I decided I would use the Spring Boot RESTful API to create EasterEggData  to be used by the Angular client:

Java


The Angular client would then call the /easterEgg URI via a controller in the API project:

Java


Client-Side Updates

On the client-side, I introduced a simple EasterEggService:

JavaScript


I created EasterEggData on the client-side:

JavaScript


Then, I wired the logo link to the following component:

Java


Service Updates

With the basic wiring in place, I just needed to create the service-level work to populate the EasterEggData object. Without revealing the source of my personal data, the core processing logic is shown below:

Java


In the example above, I am actually using RandomGenerator as discussed in my "Building a Random Generator" series. In this case, there is a List<InstagramData> that is being retrieved. The randomize() method will return one item, at random, from this list and convert it to an EasterEggData object.

Conclusion

When my mother-in-law clicks the logo link of her application, she will now see something like this:

Example Easter Egg

Clicking the logo again will show something like this:

Example Easter Egg

Every time the modal is requested in Angular, the image, caption, and original post date are all from a random Instagram post from one of our family members' accounts. My mother-in-law doesn't get out to Instagram very often, so this gives her a quick way to check in to see what she may have missed.

Have a really great day!

Topics:
angular, easter egg, spring boot, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}