The Rebirth of Kicks Citi: A Major Makeover with Serverless Architecture, React Native, and Beyond

Kicks Citi Mockup

Okay, fellow code warriors and react native developers, gather ‘round the campfire because I’m about to tell you a tale of epic proportions. It’s a tale of rebirth, redemption, and of course, shoes. Lots and lots of shoes. Buckle up, because we’re going on a journey to revamp Kicks Citi, the e-commerce marketplace that was starting to resemble my grandpa’s closet — dusty, disorganized, and in desperate need of a fashion intervention.

Kicks Citi: From Cinderella to Swamp Thing

Ah, Kicks Citi. Let’s just say this wasn’t my proudest coding moment. You see, it was my very first React Native project, and trust me, it was all wild horses and tumbleweeds. After gaining a lot of experience over the years, it became clear that tweaking, and attempting more code refactoring just wouldn't cut it — our beloved Kicks Citi project needed more than a touch-up; it needed a complete makeover. The time had come to bid farewell to the old and embrace the new. A fresh start, a clean slate, and a chance to redefine Kicks Citi’s digital destiny. Let’s dive into the riveting saga of how a novice’s project evolved into a seasoned developer’s masterpiece.

Exploring the capabilities of AWS for serverless architecture and cloud computing

Embarking on the Kicks Citi overhaul meant more than just a frontend facelift; it entailed a pivotal shift in the backend from Firebase to the vast, cloud-powered landscape of AWS.

The heartbeat of the revamped system lies in AWS services like Lambda, S3, API Gateway, AWS SES, AWS Event Scheduler, and the Serverless Application Model (SAM).

SAM played a starring role in this project, aiding in local testing of lambda functions before deployment. Its most significant contribution, however, was seamlessly integrating continuous integration and deployment (CI/CD) with GitHub Actions pipeline to my backend. Now, updating or creating new lambda functions is as straightforward as coding on my local system and pushing changes to my GitHub repository, with SAM orchestrating the entire process automatically.

Nevertheless, it’s essential to acknowledge that SAM posed significant challenges during the project overhaul, serving as the battleground where I confronted the majority of obstacles. Achieving success with SAM was no easy feat, but however I came out on top.

Architectural Symphony: Structuring AWS Services for a Dynamic Backend Ensemble with MongoDB as the Maestro

Here is how my serverless architecture looks: My backend application code runs on Lambda functions situated behind the powerful API Gateway. Images are stored in S3, and CloudFront takes center stage for efficient image caching. To handle email communication, I employ AWS Simple Email Service (SES), while MongoDB serves as the database.

To manage routine operations with finesse, I rely on AWS Event Scheduler — a silent hero working behind the scenes. The deep dive into the technical intricacies of my AWS structure is a subject reserved for another day and another blog post.

React Native: The Cross-Platform Shoe-slinger

We couldn’t just have a fancy backend without a stunning frontend, right? That’s where the need to rebuild the React Native project from scratch came in, this time using best practices and performance optimizations, to give a native-like feel.

I didn’t stop there. A sprinkle of animations here, a dash of micro-interactions there — Kicks Citi’s new UI/UX became as stylish as those limited edition Nikes. User experience was no longer an afterthought; it became the heart and sole (pun intended) of the project.

But it’s not just about looks. I amped up the app with cutting-edge features such as push notifications, code push for instant OTA updates, deep linking, and the implementation of an affiliate and reward system. Oh, and for those iPad or tablet enthusiasts, worry not. I made sure the app responds like a pro on those larger screens, giving you a seamless experience no matter your device.

In a nutshell, the revamped Kicks Citi app isn’t just visually stunning — it’s a carefully crafted symphony of features. Each tap, swipe, and notification is part of a journey designed to engage, reward, and keep you coming back for more. Navigating the world of sneakers is now as thrilling and addictive as scoring the latest limited edition kicks.

Lessons Learned and the Future of Kicks Citi

As the curtains fall on this digital odyssey, I’m left with a bag full of lessons learned, a revamped Kicks Citi, and the satisfaction of a job well done. This project was like a crash course in leveling up — from figuring out the ins and outs of the AWS stack to becoming a code push maestro in React Native and diving into the world of micro-interactions. Each twist and turn added to the transformative ride.

As I close this chapter, the future seems promising, the tech foundation is rock-solid, and who knows what exciting projects might pop up next in my virtual inbox. Until our coding paths cross again, happy coding!

Get Kicks Citi

About Author

👋 Hello, I'm Benjamin Eruvieru, a passionate React Native mobile developer and cloud engineering enthusiast.
With 4 years of experience in mobile app development, I'm on a new adventure in cloud engineering.

Thank you for reading my post & Let's explore React Native and the cloud together!