Skip to main content

FIRST APP GUIDE

Add New Feature (FAQ)

Now that we have our app distribution set up, let's add a new feature! We'll implement an FAQ section using Codika's block system. We've specifically chosen this feature because it's a perfect example to demonstrate how Codika's architecture works under the hood.

Understanding Blocks in Codika​

Before we dive in, let's talk about what blocks are. In Codika, blocks are pre-built features that follow best practices and can be added to your app with a single command. They're not just code snippets - they're full features that integrate properly with your app's architecture.

Let's see what blocks we currently have and what's available:

bash

codika add-block

You'll see a list of your currently integrated blocks (marked with ✓) and available blocks you can add. In our case, we already have:

  • Firebase Init (for our backend)
  • Markdown Reader (for rendering markdown content)
  • Onboarding Flow (for user onboarding)
  • Settings (for app configuration)
  • Shorebird (for live updates)

Adding the FAQ Block​

The FAQ block is particularly interesting because it builds on top of the Markdown block, adding specialized functionality for handling frequently asked questions. Let's add it by selecting it from the list or by using the command:

bash

codika add-block -b faq

What Just Happened?​

When you added the FAQ block, Codika did quite a bit of work behind the scenes. Let's explore what happened by looking at the git changes. We can see it added two files in the .codika folder and modified the codika_config.yaml file. It also added new json files in the assets/docs/faq/ folder. And it modified the dev firestore rules in firebase/dev/firestore.rules.

FAQ Git Changes

Understanding the Architecture​

Let's take a moment to appreciate how this feature follows Clean Architecture principles by looking at the files in the lib folder.

  1. Domain Layer: Contains the core FAQ models and business logic
  2. Data Layer: Handles loading FAQ data from JSON files
  3. Infrastructure Layer: Manages Firestore rules and backend integration
  4. Presentation Layer: Provides the UI components

This separation makes it easy to:

  • Change how FAQs are stored (JSON, API, database) without touching the UI
  • Modify the UI without affecting the business logic
  • Test each layer independently

Customizing Your FAQs​

Now that the block is integrated, you can customize your FAQs by editing the JSON files in assets/data/faq/. The block supports multiple languages - just create a new file for each language (e.g., faq_fr.json for French).

What's Next?​

Great job! You've:

  • Added a new feature using Codika's block system
  • Learned about the architecture behind blocks
  • Set up multilingual FAQ support

In the next section, we'll use Shorebird to deploy this new feature through a live update - no app store submission needed!