Additional menu

CodingWithDrew

A Web and App Development Portfolio

The Purple Piggy Bank LLC (TPPB)
You are here: Home / Basics & Fundamentals / Building an Application from Scratch: The Tech Stack Behind The Purple Piggy Bank

Building an Application from Scratch: The Tech Stack Behind The Purple Piggy Bank

Welcome to codingwithdrew.com! Today, I'm going to walk you through the process of building an application from the ground up, using The Purple Piggy Bank (TPPB) as a case study. We'll cover everything from setting up the infrastructure, creating the backend, designing the logo and securing a domain name, developing the frontend, and finally, launching the marketing site. Let's dive in!

1. Infrastructure: Laying the Foundation

Every successful application starts with a solid foundation. For TPPB, I began by setting up a robust and scalable infrastructure using serverless technologies managed with Terraform. This approach allows for consistent, repeatable deployments and easy scalability.

Benefits of Using Serverless and Terraform:

  • Infrastructure as Code: Terraform enables you to define your infrastructure in configuration files, allowing you to version control and manage your infrastructure just like application code. This makes it easier to replicate environments and ensures consistency across different stages of development.
  • Consistency: By using Terraform, you can ensure that the same infrastructure setup is created every time you deploy your application. This eliminates the "it works on my machine" problem and ensures that your development, staging, and production environments are identical.
  • Scalability: Serverless technologies like AWS Lambda automatically scale your application based on demand. This means you don't need to worry about provisioning and managing servers, allowing you to focus on writing code and developing features.

Tech Stack for Infrastructure:

  • AWS Lambda: Runs code without provisioning or managing servers, automatically scaling based on demand.
  • API Gateway: Manages and secures API endpoints, handling tasks such as traffic management, authorization, and access control.
  • Terraform: Automates the setup and configuration of all AWS resources, ensuring consistency and ease of management.

2. Backend Development: The Engine of Your App

With the infrastructure in place, the next step was to build the backend. For TPPB, I used AWS Lambda and API Gateway to create a serverless, scalable backend. Each interaction with the backend is handled via POST requests, ensuring simplicity and uniformity in handling data. The Terraform setup is broken down into simplified modules, making it easy to create and manage over 60 API endpoints.

Backend Tech Stack:

  • AWS Lambda: Serverless compute service that runs your code in response to events and automatically manages the underlying compute resources.
  • API Gateway: Acts as a front door for your APIs, providing traffic management, authorization, and other capabilities.
  • Postgres Serverless (AWS Aurora): A highly available and scalable serverless relational database that handles backend data storage.
  • Prisma: An ORM that simplifies database operations and queries, providing a type-safe API for interacting with the database.
  • Terraform Modules: Simplified modules to manage API endpoints efficiently, allowing for easy creation and maintenance of multiple endpoints.

3. Logo and Domain Name: Establishing Your Brand

A memorable logo and a unique domain name are crucial for establishing your brand identity. For TPPB, I used 99designs for a logo design competition, resulting in a unique and professional logo. Choosing a domain name can be tricky. My advice is to use the same domain host as your cloud provider for ease of management (e.g., AWS Route 53 if you're using AWS).

Tips for Logo and Domain Name:

  • Simplicity: A simple logo is easy to recognize and remember. It should be clean and uncluttered, making it easily scalable for different uses.
  • Relevance: Ensure your logo reflects your app’s purpose and values. It should resonate with your target audience and convey the essence of your brand.
  • Domain Name: Register your domain with your cloud provider for streamlined management. This simplifies DNS management and integrates seamlessly with your existing infrastructure.

4. Frontend Development: The User Interface

The frontend is where users interact with your application. For TPPB, I used Flutter to develop a cross-platform application, providing a consistent experience on both iOS and Android devices.

Frontend Tech Stack:

  • Flutter: Enables cross-platform development with a single codebase, reducing development time and ensuring a consistent user experience across different platforms.
  • Dart: The programming language used by Flutter for building natively compiled applications for mobile, web, and desktop from a single codebase.

5. Marketing Site: Spreading the Word

Finally, I created a marketing site to promote TPPB. As an expert with WordPress, I chose it for its flexibility and ease of use. WordPress allows for quick updates and a variety of plugins to enhance functionality.

Marketing Site Tech Stack:

  • WordPress: A powerful content management system for creating and managing websites. Its extensive plugin ecosystem allows for easy customization and feature addition.
  • My WordPress Expertise: Leverage my how-to articles and videos for advanced WordPress techniques, ensuring a professional and effective marketing site.

The Design Process: Why It Matters

Design plays a critical role in the success of your application. By focusing on infrastructure first, followed by backend development, logo/domain name, frontend development, and finally the marketing site, you ensure a smooth and structured development process. This order helps in:

  • Ensuring Scalability: Starting with a strong infrastructure ensures your app can handle growth from the beginning. It’s easier to build scalable systems when the foundation is designed for it.
  • Efficient Development: Building the backend first allows you to define the core logic and data handling of your application, making frontend development smoother and more efficient.
  • Strong Branding: Establishing your brand early with a logo and domain name helps create a consistent identity that users can recognize and trust. It sets the tone for your marketing and overall user experience.
  • User Experience: Focusing on frontend development after the backend ensures that the user interface is built on a solid foundation, resulting in a better user experience. A well-designed marketing site helps attract and retain users, effectively communicating the value of your application.

Conclusion

Building an application from scratch can be a daunting task, but with the right tech stack and a structured approach, it becomes manageable and rewarding. If you're interested in more details about my tech stack or would like a template of my infrastructure project, feel free to DM me on Twitter @codingwithdrewk. Let's build something great together!