codeskraps
/
Blog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<!DOCTYPE html>
<html lang="en-us">

<head>
    <title>
Simplifying MVI Architecture | codeskraps
</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your website description">

<meta name="generator" content="Hugo 0.134.3">


<link rel="canonical" href="https://codeskraps.com/posts/mvi_architecture/" >


<link href="/css/style.min.ee0d47e4d4346c71a65a9e873108c81ffae54d60a2fc2338f6df394eb4b25a82.css" rel="stylesheet">


</head>

<body>

    <div class="flexWrapper">
        <header class="headerWrapper">
    <div class="header">
        <div>
            <a class="terminal" href="https://codeskraps.com/">
                <span>me@codeskraps.com ~ $</span>
            </a>
        </div>
        <input class="side-menu" type="checkbox" id="side-menu">
        <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
        <nav class="headerLinks">
            <ul>
                
                <li>
                    <a href="https://codeskraps.com/projects/" title="" >
                        ~/projects</a>
                </li>
                
                <li>
                    <a href="https://codeskraps.com/about/" title="" >
                        ~/about</a>
                </li>
                
                <li>
                    <a href="https://codeskraps.com/posts/" title="" >
                        ~/posts</a>
                </li>
                
            </ul>
        </nav>
    </div>
</header>


        <div class="content">
            <main class="main">
                
<div class="postWrapper">
    <h1>Simplifying MVI Architecture</h1>
    
    
    <section class="postMetadata">
        <dl>
            
                
<dt>tags</dt>
<dd><span></span>
    <a href="/tags/kotlin/">#Kotlin</a><span></span>
    <a href="/tags/kmp/">#Kmp</a><span></span>
    <a href="/tags/android/">#Android</a><span></span>
    <a href="/tags/mvi/">#Mvi</a><span></span>
    <a href="/tags/architecture/">#Architecture</a><span></span>
    <a href="/tags/mvvm/">#Mvvm</a><span></span>
    <a href="/tags/viewmodel/">#Viewmodel</a></dd>
            
            
                <dt>published</dt>
                
                <dd><time datetime="2024-09-27">September 27, 2024</time></dd>
            
            
                <dt>reading time</dt>
                <dd>4 minutes</dd>
            
        </dl>
    </section>
    
    <div>
        <p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p>
<h2 id="the-mvi-helper-class">The MVI Helper Class</h2>
<p>First, let&rsquo;s look at the complete helper class:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-kotlin" data-lang="kotlin"><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">StateReceiver</span>&lt;STATE&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">updateState</span>(transform: <span style="color:#66d9ef">suspend</span> (STATE) <span style="color:#f92672">-&gt;</span> STATE)
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">withState</span>(block: <span style="color:#66d9ef">suspend</span> (STATE) <span style="color:#f92672">-&gt;</span> Unit)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">inline</span> <span style="color:#66d9ef">fun</span> &lt;<span style="color:#66d9ef">reified</span> <span style="color:#a6e22e">TYPE</span> : <span style="color:#a6e22e">STATE</span>, <span style="color:#a6e22e">STATE</span>&gt; <span style="color:#a6e22e">StateReceiver</span>&lt;STATE&gt;.withType(
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">crossinline</span> block: <span style="color:#66d9ef">suspend</span> (TYPE) <span style="color:#f92672">-&gt;</span> Unit
</span></span><span style="display:flex;"><span>) {
</span></span><span style="display:flex;"><span>    withState { state <span style="color:#f92672">-&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">if</span> (state <span style="color:#66d9ef">is</span> TYPE) {
</span></span><span style="display:flex;"><span>            block(state)
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">inline</span> <span style="color:#66d9ef">fun</span> &lt;<span style="color:#66d9ef">reified</span> <span style="color:#a6e22e">TYPE</span> : <span style="color:#a6e22e">STATE</span>, <span style="color:#a6e22e">STATE</span>&gt; <span style="color:#a6e22e">StateReceiver</span>&lt;STATE&gt;.updateWithType(
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">crossinline</span> transform: <span style="color:#66d9ef">suspend</span> (TYPE) <span style="color:#f92672">-&gt;</span> TYPE
</span></span><span style="display:flex;"><span>) {
</span></span><span style="display:flex;"><span>    withType&lt;TYPE, STATE&gt; { state <span style="color:#f92672">-&gt;</span>
</span></span><span style="display:flex;"><span>        updateState { transform(state) }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">StateProvider</span>&lt;STATE&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">val</span> state: StateFlow&lt;STATE&gt;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">IntentReceiver</span>&lt;INTENT&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">handleIntent</span>(intent: INTENT)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">ActionProvider</span>&lt;ACTION&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">val</span> action: Flow&lt;ACTION&gt;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">ActionReceiver</span>&lt;ACTION&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">sendAction</span>(block: <span style="color:#66d9ef">suspend</span> () <span style="color:#f92672">-&gt;</span> ACTION)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">StateModule</span>&lt;STATE&gt; : StateReceiver&lt;STATE&gt;, StateProvider&lt;STATE&gt;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">IntentModule</span>&lt;INTENT&gt; : IntentReceiver&lt;INTENT&gt;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">ActionModule</span>&lt;ACTION&gt; : ActionReceiver&lt;ACTION&gt;, ActionProvider&lt;ACTION&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">MVIViewModel</span>&lt;STATE, INTENT, ACTION&gt; : StateModule&lt;STATE&gt;, IntentModule&lt;INTENT&gt;, ActionModule&lt;ACTION&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MVIViewModelDelegate</span>&lt;STATE, INTENT, ACTION&gt;(
</span></span><span style="display:flex;"><span>    initial: STATE
</span></span><span style="display:flex;"><span>) : MVIViewModel&lt;STATE, INTENT, ACTION&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">private</span> <span style="color:#66d9ef">val</span> _state = MutableStateFlow(initial)
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">override</span> <span style="color:#66d9ef">val</span> state: StateFlow&lt;STATE&gt; = _state.asStateFlow()
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">private</span> <span style="color:#66d9ef">val</span> _action = Channel&lt;ACTION&gt;()
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">override</span> <span style="color:#66d9ef">val</span> action: Flow&lt;ACTION&gt; = _action.receiveAsFlow()
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">override</span> <span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">updateState</span>(transform: <span style="color:#66d9ef">suspend</span> (STATE) <span style="color:#f92672">-&gt;</span> STATE) {
</span></span><span style="display:flex;"><span>        _state.update { transform(<span style="color:#66d9ef">it</span>) }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">override</span> <span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">withState</span>(block: <span style="color:#66d9ef">suspend</span> (STATE) <span style="color:#f92672">-&gt;</span> Unit) {
</span></span><span style="display:flex;"><span>        block(_state.<span style="color:#66d9ef">value</span>)
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">override</span> <span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">sendAction</span>(block: <span style="color:#66d9ef">suspend</span> () <span style="color:#f92672">-&gt;</span> ACTION) {
</span></span><span style="display:flex;"><span>        _action.trySend(block())
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">override</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">handleIntent</span>(intent: INTENT) {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">throw</span> NotImplementedError()
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<h2 id="understanding-the-mvi-helper-class">Understanding the MVI Helper Class</h2>
<p>Let&rsquo;s break down the key components of our MVI helper class:</p>
<h3 id="core-interfaces">Core Interfaces</h3>
<ol>
<li><code>StateReceiver&lt;STATE&gt;</code>: Allows updating and accessing the current state.</li>
<li><code>StateProvider&lt;STATE&gt;</code>: Provides access to the state as a <code>StateFlow</code>.</li>
<li><code>IntentReceiver&lt;INTENT&gt;</code>: Handles user intents.</li>
<li><code>ActionProvider&lt;ACTION&gt;</code>: Provides a flow of actions.</li>
<li><code>ActionReceiver&lt;ACTION&gt;</code>: Allows sending actions.</li>
</ol>
<h3 id="composite-interfaces">Composite Interfaces</h3>
<ol>
<li><code>StateModule&lt;STATE&gt;</code>: Combines state receiving and providing.</li>
<li><code>IntentModule&lt;INTENT&gt;</code>: Wraps intent receiving.</li>
<li><code>ActionModule&lt;ACTION&gt;</code>: Combines action receiving and providing.</li>
<li><code>MVIViewModel&lt;STATE, INTENT, ACTION&gt;</code>: The main interface combining all MVI components.</li>
</ol>
<h3 id="helper-functions">Helper Functions</h3>
<ol>
<li><code>withType</code>: Allows type-safe state access.</li>
<li><code>updateWithType</code>: Enables type-safe state updates.</li>
</ol>
<h3 id="the-mviviewmodeldelegate">The MVIViewModelDelegate</h3>
<p>This class implements the <code>MVIViewModel</code> interface, providing a concrete implementation of the MVI pattern.</p>
<h2 id="example-implementation">Example Implementation</h2>
<p>Let&rsquo;s implement a simple counter application using our MVI helper class. Note that we can use either data classes or sealed interfaces for our State, Intent, and Action definitions:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-kotlin" data-lang="kotlin"><span style="display:flex;"><span><span style="color:#75715e">// Define our State, Intent, and Action
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">data</span> <span style="color:#66d9ef">class</span> <span style="color:#a6e22e">CounterState</span>(<span style="color:#66d9ef">val</span> count: Int = <span style="color:#ae81ff">0</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">sealed</span> <span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">CounterIntent</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">object</span> <span style="color:#a6e22e">Increment</span> : CounterIntent
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">object</span> <span style="color:#a6e22e">Decrement</span> : CounterIntent
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">sealed</span> <span style="color:#66d9ef">interface</span> <span style="color:#a6e22e">CounterAction</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">data</span> <span style="color:#66d9ef">class</span> <span style="color:#a6e22e">ShowToast</span>(<span style="color:#66d9ef">val</span> message: String) : CounterAction
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">CounterViewModel</span> : MVIViewModel&lt;CounterState, CounterIntent, CounterAction&gt; <span style="color:#66d9ef">by</span> MVIViewModelDelegate(CounterState()) {
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">init</span> {
</span></span><span style="display:flex;"><span>        handleIntent()
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">private</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">handleIntent</span>() = viewModelScope.launch {
</span></span><span style="display:flex;"><span>        withState { state <span style="color:#f92672">-&gt;</span>
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">when</span> (<span style="color:#66d9ef">val</span> intent = receiveIntent()) {
</span></span><span style="display:flex;"><span>                <span style="color:#66d9ef">is</span> <span style="color:#a6e22e">CounterIntent</span>.Increment <span style="color:#f92672">-&gt;</span> updateState { <span style="color:#66d9ef">it</span>.copy(count = <span style="color:#66d9ef">it</span>.count + <span style="color:#ae81ff">1</span>) }
</span></span><span style="display:flex;"><span>                <span style="color:#66d9ef">is</span> <span style="color:#a6e22e">CounterIntent</span>.Decrement <span style="color:#f92672">-&gt;</span> updateState { <span style="color:#66d9ef">it</span>.copy(count = <span style="color:#66d9ef">it</span>.count - <span style="color:#ae81ff">1</span>) }
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>            checkCounterValue(state.count)
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">private</span> <span style="color:#66d9ef">suspend</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">checkCounterValue</span>(count: Int) {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">if</span> (count % <span style="color:#ae81ff">10</span> <span style="color:#f92672">==</span> <span style="color:#ae81ff">0</span> <span style="color:#f92672">&amp;&amp;</span> count <span style="color:#f92672">!=</span> <span style="color:#ae81ff">0</span>) {
</span></span><span style="display:flex;"><span>            sendAction { <span style="color:#a6e22e">CounterAction</span>.ShowToast(<span style="color:#e6db74">&#34;Counter is now </span><span style="color:#e6db74">$count</span><span style="color:#e6db74">!&#34;</span>) }
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<p>In this example:</p>
<ol>
<li>We define our <code>State</code> as a data class, and our <code>Intent</code> and <code>Action</code> as sealed interfaces.</li>
<li>The <code>CounterViewModel</code> uses the <code>MVIViewModelDelegate</code> to implement the <code>MVIViewModel</code> interface.</li>
<li>We handle intents in the <code>handleIntent</code> function, updating the state based on the received intent.</li>
<li>The <code>checkCounterValue</code> function demonstrates how to send actions when certain conditions are met.</li>
</ol>
<h2 id="using-the-viewmodel-in-the-ui">Using the ViewModel in the UI</h2>
<p>Here&rsquo;s how you might use this ViewModel in an Android Activity or Fragment:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-kotlin" data-lang="kotlin"><span style="display:flex;"><span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">CounterActivity</span> : AppCompatActivity() {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">private</span> <span style="color:#66d9ef">val</span> viewModel: CounterViewModel <span style="color:#66d9ef">by</span> viewModels()
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">override</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">onCreate</span>(savedInstanceState: Bundle?) {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">super</span>.onCreate(savedInstanceState)
</span></span><span style="display:flex;"><span>        setContentView(<span style="color:#a6e22e">R</span>.layout.activity_counter)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// Collect state
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        lifecycleScope.launch {
</span></span><span style="display:flex;"><span>            viewModel.state.collect { state <span style="color:#f92672">-&gt;</span>
</span></span><span style="display:flex;"><span>                updateUI(state)
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// Collect actions
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        lifecycleScope.launch {
</span></span><span style="display:flex;"><span>            viewModel.action.collect { action <span style="color:#f92672">-&gt;</span>
</span></span><span style="display:flex;"><span>                <span style="color:#66d9ef">when</span> (action) {
</span></span><span style="display:flex;"><span>                    <span style="color:#66d9ef">is</span> <span style="color:#a6e22e">CounterAction</span>.ShowToast <span style="color:#f92672">-&gt;</span> <span style="color:#a6e22e">Toast</span>.makeText(<span style="color:#66d9ef">this</span><span style="color:#a6e22e">@CounterActivity</span>, action.message, <span style="color:#a6e22e">Toast</span>.LENGTH_SHORT).show()
</span></span><span style="display:flex;"><span>                }
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// Send intents
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        incrementButton.setOnClickListener {
</span></span><span style="display:flex;"><span>            viewModel.handleIntent(<span style="color:#a6e22e">CounterIntent</span>.Increment)
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>        decrementButton.setOnClickListener {
</span></span><span style="display:flex;"><span>            viewModel.handleIntent(<span style="color:#a6e22e">CounterIntent</span>.Decrement)
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">private</span> <span style="color:#66d9ef">fun</span> <span style="color:#a6e22e">updateUI</span>(state: CounterState) {
</span></span><span style="display:flex;"><span>        counterTextView.text = state.count.toString()
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<h2 id="conclusion">Conclusion</h2>
<p>The MVI helper class we&rsquo;ve explored simplifies the implementation of the MVI pattern, providing a clean and type-safe way to manage state, handle user intents, and emit actions. By using this helper class, you can create more maintainable and testable view models, leading to more robust applications.</p>
<p>Remember that you can use either data classes or sealed interfaces for your State, Intent, and Action definitions, depending on your specific needs. This flexibility allows you to choose the most appropriate structure for each component of your MVI architecture.</p>
<p>While this helper class provides a solid foundation, you may need to adapt it to fit the specific needs of your project.</p>
    </div>
</div>

            </main>
        </div>


        <footer class="footer">
    
        <span>Built with <a href="https://gohugo.io" class="footerLink">Hugo</a> and <a href="https://github.com/LordMathis/hugo-theme-nightfall" class="footerLink">Nightfall</a> theme</span>
    
</footer>
    </div>

</body>

</html>