DEV Community: Sammy Shear

Thirty Days of Rust: Day Six

Sammy Shear — Mon, 17 Jan 2022 20:55:34 +0000

Today was a good day and a bad day. I successfully recreated my hangman CLI game in the browser with WebAssembly, but it was not without a lot of problems, on the way and in the final product. In spite of that, I do think this was overall more of a good day than a bad day. I learned a lot more than I expected to and I think I'm a better developer for it.

Rust Code

mod hangman {
    use rand::seq::SliceRandom;
    use rand::thread_rng;
    use wasm_bindgen::prelude::*;

    #[wasm_bindgen]
    pub struct Hangman {
        possible_words: [String; 8],
        word_to_guess: String,
        guessed_letters: Vec<char>,
        guesses_left: i32,
        current_guess: String,
    }

    #[wasm_bindgen]
    impl Hangman {
        pub fn init() -> Hangman {
            let mut rng = thread_rng();

            let mut hg: Hangman = Hangman {
                possible_words: [
                    String::from("Rust"),
                    String::from("Challenge"),
                    String::from("WebAssembly"),
                    String::from("Day Six"),
                    String::from("Hello, World!"),
                    String::from("Programming"),
                    String::from("Thirty Days"),
                    String::from("Hangman"),
                ],
                word_to_guess: String::new(),
                guessed_letters: vec![],
                guesses_left: 8,
                current_guess: String::new(),
            };

            hg.word_to_guess = hg.possible_words.choose(&mut rng).unwrap().to_string();

            for i in 0..hg.word_to_guess.chars().count() {
                if &hg.word_to_guess.chars().nth(i).unwrap() == &' ' {
                    hg.current_guess.push_str(" ");
                } else {
                    hg.current_guess.push_str("_");
                }
            }

            return hg;
        }

        pub fn get_current_guess(&self) -> String {
            return String::from(&(self.current_guess));
        }

        pub fn get_word_to_guess(&self) -> String {
            return String::from(&(self.word_to_guess));
        }

        pub fn guess(&mut self, g: String) {
            if !self.guessed_letters.contains(&g.chars().nth(0).unwrap()) {
                self.guessed_letters.push(g.chars().nth(0).unwrap());

                let mut new_guess = self.current_guess.chars().collect::<Vec<_>>();

                for i in 0..self.word_to_guess.len() {
                    if self.word_to_guess.chars().collect::<Vec<_>>()[i]
                        .eq_ignore_ascii_case(&g.chars().nth(0).unwrap())
                    {
                        new_guess[i] = self.word_to_guess.chars().collect::<Vec<_>>()[i];
                    } else {
                        continue;
                    }
                }

                if new_guess.iter().collect::<String>() == self.current_guess {
                    self.guesses_left -= 1;
                }

                self.current_guess = new_guess.iter().collect::<String>();
            }
        }

        pub fn did_win(&mut self) -> bool {
                return self.guesses_left > 0;
        }
    }
}

This took me a while to get to. The first reason was because I was trying to use static global variables that for whatever reason I thought would update and be able to store state for the game via some of these functions. That did not work at all, for what should have been obvious reasons, but it didn't click with me immediately, so I spent time debugging, and decided to use a struct. I did this by looking up how to make a struct in Rust. Then I got an error with wasm_bindgen because I had to pass the struct through the macro instead of each method, so I did that, tried to build the package, and got an error because I was using the rand crate with a wasm project. The crate uses another crate that doesn't work with wasm out of the box, but I could fix it by adding that crate to my Cargo.toml with an extra feature:

getrandom = { version = "0.2.4", features = ["js"] }

That finally allowed me to build the library, and then I just had to go back to where I was more comfortable: JavaScript.

JS and HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebAssembly Hangman</title>
</head>

<body>
  <div id="root">
    <p id="currentGuess">
    </p>
    <form id="guesserForm"> 
      <input type="text" id="guesser">
      <input type="submit" value="Guess">
    </form>

  </div>

  <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
  <script src="./bootstrap.js"></script>
</body>

</html>

And here's the JS:

import * as wasm from "../pkg";

let hangman = wasm.Hangman.init();

let root = document.querySelector("#root");
let currentGuess = document.querySelector("#currentGuess");
let guesserForm = document.querySelector("#guesserForm");
let guesser = guesserForm.querySelector("#guesser");

guesserForm.addEventListener("submit", (e) => {
    e.preventDefault();
    hangman.guess(guesser.value);
    guesser.value = "";
    guess();
});

const guess = () => {
    if (hangman.get_word_to_guess() !== hangman.get_current_guess()) {
        currentGuess.innerText = hangman.get_current_guess();
    } else {
        checkWin();
    }
};

guess();

const checkWin = () => {
    if (hangman.did_win()) {
        root.innerText = "You won!";
    } else {
        root.innerText = "You lost :(";
    }
};

The problems I had here were mostly minimal, but I did have some. By this point I was pretty worn out, and so something just didn't register in my brain that I wanted the guess() function to call every time a guess was made, and not all the time, so I used a while loop. After about 5 seconds, I realized that didn't make any sense and would break the webpage, and so I switched it to what I have now. I also still have a bug in the program, which is that I cannot get the "You lost :(" message to show up, but by now I've been working on this for like 3 hours and I don't really feel the urge to debug any more code today, even in a language I know. So I called it there, and just started writing this. If you have any ideas as to why this is happening, feel free to let me know, but I'll probably take another look at it tomorrow anyway. That's about it for me today, I didn't really want to spend this much time on today, but I guess it makes up for yesterday in a way because yesterday was very short.

Thirty Days of Rust: Day Five

Sammy Shear — Sun, 16 Jan 2022 19:09:15 +0000

Today I wanted to take it easy a little bit and try some WebAssembly with Rust. Over the years I've gotten very used to JavaScript, but now that I'm doing this challenge, I wanted to dip my feet into WebAssembly, so that's exactly what I did. I found a book that basically told me everything I needed to know, and then I got started.

Rust Setup

So instead of a new Rust app, I needed to make a Rust lib, which I could do with:

$ cargo new day5 --lib

Then I added two things to my Cargo.toml so it looked like this:

[package]
name = "day5"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
wasm-bindgen = "0.2.78"

Then I went ahead and installed wasm-pack with cargo:

$ cargo install wasm-pack

Rust Code

The only thing I wanted this app to do was add two numbers together. It's probably too simple for this challenge to really mean anything, but I didn't want to spend too much time on this because tomorrow I want to rebuild my hangman game in the browser and I figured today could be a little bit shorter.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(n1: i32, n2: i32) -> i32 {
    return n1 + n2;
}

So that was simple, as I expected and now I just had to pack it together with:

$ wasm-pack build

JS Setup

$ pnpm init wasm-app www
$ cd www
$ pnpm i

That's all, now I just imported the wasm file and console logged the result of the add function:

import * as wasm from "../pkg";

console.log(wasm.add(21, 19));

Now I could just run pnpm serve and open up localhost:8080 to get to my app. When I opened up the console, it showed the logged value of 40.
That's about it from me today, but I look forward to tomorrow and sorry if this one was a little less exciting.

Thirty Days of Rust: Day Four

Sammy Shear — Sat, 15 Jan 2022 23:18:46 +0000

Today was more of a relaxed day for me, instead of putting together a whole new project I just added the ability to lose into my hangman game. This was way simpler than I thought it would be (I'm not really sure why, but I expected this to take a while), so I don't really have that much to share, but I will share it.

Final Code

// /src/main.rs

use rand::seq::SliceRandom;
use rand::thread_rng;
use std::io;

fn main() {
    let mut rng = thread_rng();

    let possible_words = [
        "Hangman",
        "Challenge",
        "Hello, World!",
        "Programming",
        "Rust",
        "Thirty Days",
        "Day Three",
    ];
    let word_to_guess = possible_words.choose(&mut rng).unwrap().to_string();

    let mut guessed_letters: Vec<char> = vec![];

    let mut current_guess = String::new();
    for i in 0..word_to_guess.chars().count() {
        if &word_to_guess.chars().nth(i).unwrap() == &' ' {
            current_guess.push_str(" ");
        } else {
            current_guess.push_str("_");
        }
    }

    let mut guesses_left: i32 = 8;

    while current_guess != word_to_guess && guesses_left > 0 {
        println!("{}", &current_guess);
        println!("Make a guess");
        println!("Guessed Letters: {:?}", guessed_letters);
        let mut guess = String::new();

        io::stdin().read_line(&mut guess).unwrap();

        if !guessed_letters.contains(&guess.chars().nth(0).unwrap()) {
            guessed_letters.push(guess.chars().nth(0).unwrap());

            let mut new_guess = current_guess.chars().collect::<Vec<_>>();

            for i in 0..word_to_guess.len() {
                if word_to_guess.chars().collect::<Vec<_>>()[i]
                    .eq_ignore_ascii_case(&guess.chars().nth(0).unwrap())
                {
                    new_guess[i] = word_to_guess.chars().collect::<Vec<_>>()[i];
                } else {
                    continue;
                }
            }

            if new_guess.iter().collect::<String>() == current_guess {
                guesses_left -= 1;
            }

            current_guess = new_guess.iter().collect::<String>();

            println!("Guesses left: {:?}", guesses_left);
        } else {
            println!("You already guessed that");
            continue;
        }
    }
    if current_guess == word_to_guess {
        println!("You won! Guesses: {:?}", guessed_letters.len());
        println!("{}", current_guess);
    } else {
        println!("You lose! Guesses: {:?}", guessed_letters.len())
    }
}

It's basically the same as yesterday, but with a few things added. Notably, a variable to keep track of how many guesses are left, an extra condition for the while loop, and a way to check if the guess was wrong or not:

...
let mut guesses_left: i32 = 8;
...
while current_guess != word_to_guess && guesses_left > 0
...
if new_guess.iter().collect::<String>() == current_guess {
                guesses_left -= 1;
            }

            current_guess = new_guess.iter().collect::<String>();
...

The last part is also a slight change to what I was doing before, which was to immediately assign the current_guess to the new_guess instead of waiting until I checked the validity of the guess.

Problem Solving

The first way I went about this was just by getting rid of the continue; in that else statement and replacing it with the guesses_left -= 1; line. The problem with this is that it runs each for loop iteration, so that was a no go. Not thinking too hard about it, I changed guesses_left to be dependant on the length of word_to_guess, which sort of solved one issue but raised another one. The line was still being called every iteration, so instead of only using up "one" guess if the guess was wrong, it used up one guess every time a letter wasn't every letter in the string, which was all the time. That's why I had to bring the logic out of the for loop, and instead of relying on that else statement, I just waited to reassign current_guess to the value of new_guess until after I had made a check to see if anything was correct.
That's about it for me today, and thanks for reading.

Thirty Days of Rust: Day Three*

Sammy Shear — Sat, 15 Jan 2022 00:32:12 +0000

I took a few days off from this challenge due to some personal things, but I came into today ready to go. Today I wanted to make a classic little hangman game in the command line, which was a lot harder than I thought to be honest with you. I definitely also went about this in the wrong way though, I just was too stubborn to start over. Today was also the day I switched from the official Rust Language Server to rust-analyzer, which I don't regret, thanks to this comment:

Chayim Friedman • Jan 12

rustup is a bit more than "better maintained", it is an official project of Rust.

And rsvm? Well, never heard of it up to this moment...

Another thing, I would really recommend you to try rust-analyzer out. The Rust extension is very slow and laggy, while rust-analyzer is excellent. It is also semi-official and supposed to replace the Rust extension at some point in the future.

The official extension just compiles your whole project on every keystroke and decrypts a big ol' chunk of json the compiler gives back; rust-analyzer, on the other hand, incrementally parses & analyzes your code, and it is going rapidly better.

Anyway, I ran into some problems today, but I managed to finish the Hangman game nonetheless.

Code

// /src/main.rs

use std::io;
use rand::seq::SliceRandom;
use rand::thread_rng;

fn main() {
    let mut rng = thread_rng();

    let possible_words = [
        "Hangman",
        "Challenge",
        "Hello, World!",
        "Programming",
        "Rust",
        "Thirty Days",
        "Day Three",
    ];
    let word_to_guess = possible_words.choose(&mut rng).unwrap().to_string();

    let mut guessed_letters: Vec<char> = vec![];

    let mut current_guess = String::new();
    for i in 0..word_to_guess.chars().count() {
        if &word_to_guess.chars().nth(i).unwrap() == &' ' {
            current_guess.push_str(" ");
        } else {
            current_guess.push_str("_");
        }
    }

    while current_guess != word_to_guess {
        println!("{}", &current_guess);
        println!("Make a guess");
        println!("Guessed Letters: {:?}", guessed_letters);
        let mut guess = String::new();

        io::stdin().read_line(&mut guess).unwrap();
        if !guessed_letters.contains(&guess.chars().nth(0).unwrap()) {
            guessed_letters.push(guess.chars().nth(0).unwrap());

            let mut new_guess = current_guess.chars().collect::<Vec<_>>();

            for i in 0..word_to_guess.chars().collect::<Vec<_>>().len() {
                if word_to_guess.chars().collect::<Vec<_>>()[i].eq_ignore_ascii_case(&guess.chars().nth(0).unwrap()) {
                    new_guess[i] = word_to_guess.chars().collect::<Vec<_>>()[i];
                    current_guess = new_guess.iter().collect::<String>();
                } else {
                    continue;
                }
            }
        } else {
            println!("You already guessed that");
            continue;
        }
    }
    println!("You won! Guesses: {:?}", guessed_letters.len());
    println!("{}", current_guess);
}

Problems

So I went into this thinking it would be easy, I've made a hangman game in the command line before. My first mistake was trying to use primitive strs instead of Strings because my instinct was to write out an empty string literal to make a new string variable instead of String::new(). That caused me to run into a lot of concatenation problems, which I tried using the str-concat crate for, causing my code to have multiple panic points. So I switched to using String variables, and it was much easier from there. Then I went ahead and tried to make the game logic itself, which failed spectacularly because I attempted to replace the occurrences of each char not equal to a correct guess with an underscore, instead of just replacing the underscores with the correct letters. So after I spent far too long tearing my hair out trying to get that to work, I moved to the other method. At first I tried a foreach loop, but unable to find a way to get the index of a char, and also because it made more sense, I switched to standard for loop, and that's about where I stopped.

Shortcomings

So something you'll notice if you read the code and/or run the code is that there's no way to lose. The simple reason for that is that I was running out of time, and didn't want to take another day off now that I was actually ready to come back, so I just ended it there. It might be that tomorrow's article is me adding in the loss logic though. That's about all from me for today, and thanks for reading.

Thirty Days of Rust: Day Two

Sammy Shear — Tue, 11 Jan 2022 14:43:01 +0000

Yesterday was just a warmup, but today actually felt easier than yesterday, probably because I didn't really have to convert types like yesterday. Instead, I wanted to play around with the standard input, so I made a little calculator.

Code

//src/main.rs

use evalexpr::*;
use std::io;

fn main() {
    let mut line= String::new();
    println!("Enter your expression: ");
    io::stdin().read_line(&mut line).unwrap();
    print!("{}", &(&line[..]));
    let out = eval(&(&line[..])).unwrap();
    println!(" = {:?}", out);
}

The only other thing I needed was the evalexpr crate, so I installed version 6 in Cargo.toml, and ran the code. It worked. I had done a bunch of troubleshooting to get to this point though.

Troubleshooting

The first crate I tried before evalexpr was just eval, but for whatever reason I couldn't get it working with the same style of code. I probably could've tinkered around a little more but if I'm being honest I didn't understand what the documentation was trying to tell me, and evalexpr worked right away. I'm sure it was just a silly mistake on my part though.
I also had to figure out how to get from a String to a &str, which lead me to stack overflow, finding two questions that gave me this function and this expression (&(&line[..])) to print the type and change the type:

fn print_type_of<T>(_: &T) {
    println!("{}", std::any::type_name::<T>());
}

So I used the function for debugging, and the expression to switch the type so eval could actually evaluate it. It's worth mentioning that I'm not sure that part was necessary with the new crate because I did this in an attempt to fix the problem I had with the old crate.

Conclusion

Again, I'm enjoying myself so far. This is a cool language that I understand why so many people love. I don't know how much I will integrate Rust into my workflow after this challenge, but I'm guessing it'll make its way in given what the experience has been like so far.

Thirty Days of Rust: Day One

Sammy Shear — Mon, 10 Jan 2022 14:20:06 +0000

I'll admit it, I've never really used Rust. It's interested me for a while, but I never gave myself an excuse to use it until I had this idea. It's not very original by any stretch of the imagination to do this kind of thing, but this is how I figured I'd get myself to do this. The first day is just going to be a simple setup of my environment. I'll be using VSCode as my editor, rustup as my version manager, and of course, cargo as my package manager.

Rustup

I'm not going to lie, to find rustup I literally just looked up "Rust Version Manager" and chose it over rsvm because it seemed to have more documentation. That being said, to install it I just used the curl command from https://rustup.rs, ran it, and then immediately tried to use the rustup command, which didn't work because rustup did not automatically add itself to my zshrc path. I did that manually (the binary is at ~/.cargo/bin), and the command worked just fine.

Cargo

Cargo works a lot like basically every other package manager, whether it's npm, dotnet, or pip (although pip does much less than the rest). It allows you to install crates through https://crates.io, but like npm or dotnet, it also allows you to initialize a project and run said project. To start my project, I ran cargo new day1, and opened up the directory in VSCode.

VSCode

There's an extension pack for VSCode that adds the features you're going to want from Rust programming, including a language server, a nice Cargo.toml (similar to package.json) helper, and better toml language support. You can swap out the language server for the alternative rust-analyzer extension, but I went with the main language server.

App

You'll notice if you're following along with me that your new rust project already has a hello world program set up for you, but to explore the features of rust I tweaked it a bit.

// src/main.rs

use rand::seq::SliceRandom;
use rand::thread_rng;
use std::str;

fn main() {
    let mut rng = thread_rng();
    let mut string_to_shuffle: Vec<char> = "Hello, World!".chars().collect();
    let unshuffled: &str = &string_to_shuffle.iter().collect::<String>();
    println!("Unshuffled: {}", unshuffled);
    string_to_shuffle.shuffle(&mut rng);
    let shuffled: &str = &string_to_shuffle.iter().collect::<String>();
    println!("Shuffled: {}", shuffled);
}

This was a really stupid way of getting from "Hello, World!" to complete gibberish, but I learned about converting from strings to vectors and back again, so I consider it worth it.

$ cargo run
Unshuffled: Hello, World!
Shuffled: o! WHllo,rdel

I like Rust, I'll say it. I realize that's a very brave position to take because it's clearly as hated as PHP, but I like Rust and I look forward to the rest of these days. It's definitely going to be a challenge, even more than I would've thought, to do this, but I'm excited for it. I also might do some bigger projects over the course of multiple days later on in this challenge.

Building the Same App 5 Times

Sammy Shear — Wed, 18 Aug 2021 00:02:25 +0000

This is something that I was inspired to do because of the YouTube channel Fireship, which makes great videos about web development that I highly recommend if you're interested.
Here's the original video, which includes 10 frameworks to build a todo application:
https://youtu.be/cuHDQhDhvPE

I figured I didn't want to spend forever doing this, and I mostly wanted an excuse to learn a few new frameworks, not 6 more, so I'll only be building the same app 5 times here. The app I plan to make is a simple note-taking app, where users can write whatever they want and have it save as different notes. A few of these frameworks I've already made apps like this in before, but others I have either never done this before with, or have not used at all, so those will be more of a challenge.

Building the App(s)

jQuery

I will be using jQuery to make the no-framework app easier on myself, but I'm still not looking forward to this one, considering the fact I'm just making things harder for myself in the first place. Anyway, I started by just making myself a basic file structure, and opened up index.html. The file structure, if you're curious, is this:

Basically I have a stylesheet in SCSS that I will compile to CSS, and that's about it for now. The html looks like this for now, but I'll expand upon it later:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/styles.css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Notes App</title>
</head>

<body>
    <div class="container">
        <header>
            <h1>Notes App</h1>
        </header>
        <main>
            <div class="note">
                <form>
                    <input required type="text" id="note-title" placeholder="Note Title" />
                    <textarea id="note-body" placeholder="Note Body"></textarea>
                    <input type="submit" id="note-submit" title="Add Note" />
                </form>
            </div>
        </main>
    </div>
</body>

</html>

The stylesheet looks like this:

body {
    height: 100%;
    width: 100%;
    margin: 0;
}

.container {
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;

    header {
        display: flex;
        align-items: center;

        width: 100%;
        height: 56px;
        background-color: #4e78b8;
        color: white;

        h1 {
            margin-left: 6px;
        }
    }

    main {
        margin: 10px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        grid-gap: 1rem;
        align-items: center;

        .note {
            display: flex;
            flex-direction: column;

            padding: 10px;
            background-color: #a15fbb;
            border-radius: 5px;

            form {
                display: flex;
                flex-direction: column;

                textarea {
                    resize: none;
                }
            }
        }
    }
}

Then I compile the code with sass scss/styles.scss:css/styles.css, and we're ready to start coding some JavaScript. Basically all we have to do is add a new div to the DOM with a couple of children on form submit, and save to local storage. This is what I ended up with:

let notes = [];

$(document).ready(function () {
    if (localStorage.getItem("notes")) notes = JSON.parse(localStorage.getItem("notes"));
    setNotes();
});

$("#note-submit").click(function (e) { 
    let noteTitle = $("#note-title").val();
    let noteDesc = $("#note-body").val();
    let note = {
        title: noteTitle,
        desc: noteDesc
    }
    notes.push(note);
    console.log(notes);
    localStorage.setItem("notes", JSON.stringify(notes));
    setNotes();
});

function setNotes() {
    notes.forEach((note) => {
        $("main").prepend(`
            <div class="note">
                <h4>${note.title}</h4>
                <span>${note.desc}</span>
            </div>
        `);
    });
}

This is probably not the best code it could be, but it made the most sense to me this way, and I figured that for this perfect code was not going to be needed. Regardless, this was much easier than I expected it to be given prior experience, and I actually kind of like it. The one thing that will probably be different in the other apps is the notes order because I simply could not be bothered to make it so that they always added before the form but after the other notes. That being said, it probably wouldn't be that hard to do now that I'm thinking about it.

Angular

This one is kind of silly given how much you can do with Angular, and how little we're actually doing, but contrary to the impression I might have given off previously, I actually really like Angular, I just don't love how non-modular it can be when compared to something like React. Anyway, it's time to generate the project:

$ ng new angular

That's literally all we have to do to start off, isn't Angular's CLI just lovely? Anyway, I'll write basically the same code for the basic app structure:

<div class="container">
  <header>
    <h1>Notes App</h1>
  </header>
  <main>
    <div class="note" *ngFor="let note of [0, 1, 2, 3]">
      <h4>Note Title</h4>
      <span>Note Body</span>
    </div>
    <div class="note">
      <form>
        <input required type="text" #noteTitle placeholder="Note Title" ngModel />
        <textarea #noteBody placeholder="Note Body" ngModel></textarea>
        <input type="submit" #noteSubmit title="Add Note" />
      </form>
    </div>
  </main>
</div>

This might be controversial depending on the kind of person you are, but I'm going to do all of the logic for the app in the app component itself, without any child components. This will just make it a little simpler overall, even though we really don't have to do it. Anyway, let's use basically exactly the same styling as we did before:

.container {
  width: 100%;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;

  header {
      display: flex;
      align-items: center;

      width: 100%;
      height: 56px;
      background-color: #4e78b8;
      color: white;

      h1 {
          margin-left: 6px;
      }
  }

  main {
      margin: 10px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      grid-gap: 1rem;
      align-items: center;

      .note {
          display: flex;
          flex-direction: column;

          padding: 10px;
          background-color: #a15fbb;
          border-radius: 5px;

          form {
              display: flex;
              flex-direction: column;

              textarea {
                  resize: none;
              }
          }
      }
  }
}

Anyway, we can just write some similar code to what we did before:

import { Component } from '@angular/core';

type Note = {
  title: string;
  desc: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  notes: Array<Note> = [];
  title!: string;
  body?: string;

  constructor() {
    const data = localStorage.getItem("notes");
    if (data) this.notes = JSON.parse(data);
  }

  submitForm() {
    let note: Note = {
      title: this.title,
      desc: this.body || ""
    }
    this.notes.push(note);
    localStorage.setItem("notes", JSON.stringify(this.notes));
  }
}

And with that we can go back into the template, and fix up the logic for the notes:

<div class="container">
  <header>
    <h1>Notes App</h1>
  </header>
  <main>
    <div class="note" *ngFor="let note of notes">
      <h4>{{note.title}}</h4>
      <span>{{note.desc}}</span>
    </div>
    <div class="note">
      <form #addNoteForm="ngForm">
        <input required type="text" placeholder="Note Title" [(ngModel)]="title" name="Title" />
        <textarea placeholder="Note Body" [(ngModel)]="body" name="Body"></textarea>
        <input type="submit" #noteSubmit title="Add Note" (click)="submitForm()" />
      </form>
    </div>
  </main>
</div>

That's all folks!

React

This is one that I think is probably going to be more complex than it needs to be due to the nature of React. React is designed to be more modular and lightweight than other frameworks, but in some ways it's actually more complex for smaller apps because of the way it's structured. Anyway, I started by generating my react app with my custom template sammy-libraries:

$ yarn create react-app react-app --template sammy-libraries

I had a bug which occasionally comes up where node sass (which I still use mainly because dart sass has a slow compile time for React in my experience) refuses to compile my sass code, so I just deleted node_modules and yarn.lock and ran yarn again, and it worked like a charm. Anyway here's what I did. I started off by making index.scss the same as styles.scss from the first app, and then in my App component I recreated the app's basic structure:

import React, { useEffect, useState } from "react";
import NotesList from "components/NotesList";
import { NoteType } from "components/Note";
//import "scss/App.scss";

function App() {
    const [notesList, setNotesList] = useState<NoteType[]>([]);

    const [noteTitle, setNoteTitle] = useState<string>("");
    const [noteDesc, setNoteDesc] = useState<string>("");

    useEffect(() => {
        const data = localStorage.getItem("notes");
        if (data) {
            setNotesList(JSON.parse(data));
        }
    }, []);

    useEffect(() => {
        localStorage.setItem("notes", JSON.stringify(notesList));
    }, [notesList])

    const addNote = (event: React.FormEvent<HTMLFormElement>) => {
        let note: NoteType = {
            title: noteTitle,
            desc: noteDesc,
        };
        setNotesList([...notesList, note]);
        event.preventDefault();
    };

    const changeTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
        setNoteTitle(event.currentTarget.value);
    };

    const changeDesc = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        setNoteDesc(event.currentTarget.value);
    };

    return (
        <div className="container">
            <header>
                <h1>Notes App</h1>
            </header>
            <NotesList addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} notes={notesList} />
        </div>
    );
}

export default App;

This doesn't do anything yet, so let's add in the other components:
I made 3 in a separate components folder, and then I filled them in accordingly:
NotesList.tsx:

import React from "react";
import AddNote from "components/AddNote";
import Note, { NoteType } from "components/Note";

type NotesListProps = {
    notes: NoteType[];
    addNote: (event: React.FormEvent<HTMLFormElement>) => void;
    changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void;
    changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
};

function NotesList({ notes, addNote, changeTitle, changeDesc }: NotesListProps) {
    return (
        <main>
            {notes.map((note) => {
                return (
                    <Note
                        note={{
                            title: note.title,
                            desc: note.desc,
                        }}
                    />
                );
            })}
            <AddNote addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} />
        </main>
    );
}

export default NotesList;

Note.tsx:

import React from "react";

export type NoteType = {
    title: string;
    desc: string;
}

interface NoteProps {
    note: NoteType;
}

function Note(props: NoteProps) {
    return (
        <div className="note">
            <h4>{props.note.title}</h4>
            <span>{props.note.desc}</span>
        </div>
    );
}

export default Note;

And AddNote.tsx:

import React from "react";

interface AddNoteProps {
    changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void;
    changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
    addNote: (event: React.FormEvent<HTMLFormElement>) => void;
}

function AddNote(props: AddNoteProps) {
    return(
        <div className="note">
            <form onSubmit={props.addNote}>
                <input type="text" placeholder="Note Title" onChange={props.changeTitle} />
                <textarea placeholder="Note Body" onChange={props.changeDesc}></textarea>
                <input type="submit" value="Add Note" />
            </form>
        </div>
    );
}

export default AddNote;

Not the most complex thing I've ever done, but it certainly feels a lot more complex than just using jQuery or Angular, at least to me anyway. I really like React, I consider it my favorite framework, I just don't know that I love using it for this kind of thing. So far if I had to choose, I'd say Angular is the cleanest of the group, JQuery is the most sensible (for this project anyway), and React is the awkward one that feels really nice to use but seems kind of pointless anyway.

Vue

This is a framework I have used a single time, which might be blasphemous to some people, but I just haven't really seen a need to bother with it, if you can believe that. I can use both Angular and React, and that feels like it covers most of what I need to do (and the rest is usually filled in with libraries), so Vue just never seemed so useful to me. Anyway, let's make ourselves a Vue project.

$ vue ui

I went with basically all the defaults but with TypeScript and SCSS (with dart sass mostly so I didn't end up with broken dependencies) instead because I just really like using both of them in my projects. The only real reason I didn't use TypeScript in the first one was because I couldn't be bothered to get jQuery and TS working together, but doing that is possible if you're interested.
How did I go about making this app? Well first I deleted just about everything about the app that was auto-generated, and replaced the App code with this:

<template>
  <div class="container">
    <header>
      <h1>Notes App</h1>
    </header>
    <main>
      <Note
        v-for="(note, index) in notes"
        :key="index"
        :title="note.title"
        :body="note.body"
      />
      <div class="note">
        <form @submit="submitForm()">
          <input type="text" placeholder="Note Title" v-model="title" />
          <textarea placeholder="Note Body" v-model="body"></textarea>
          <input type="submit" value="Add Note" />
        </form>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Note from "./components/Note.vue";

type NoteType = {
  title: string;
  body: string;
};

@Component({
  components: {
    Note,
  },
})
export default class App extends Vue {
  notes: Array<NoteType> = [];
  title!: string;
  body?: string;

  constructor() {
    super();
    const data = localStorage.getItem("notes");
    if (data) this.notes = JSON.parse(data);
  }

  submitForm(): void {
    let note: NoteType = {
      title: this.title,
      body: this.body || "",
    };
    this.notes.push(note);
    localStorage.setItem("notes", JSON.stringify(this.notes));
  }
}
</script>

<style lang="scss">
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;

  header {
    display: flex;
    align-items: center;

    width: 100%;
    height: 56px;
    background-color: #4e78b8;
    color: white;

    h1 {
      margin-left: 6px;
    }
  }

  main {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 1rem;
    align-items: center;

    .note {
      display: flex;
      flex-direction: column;

      padding: 10px;
      background-color: #a15fbb;
      border-radius: 5px;

      form {
        display: flex;
        flex-direction: column;

        textarea {
          resize: none;
        }
      }
    }
  }
}
</style>

And then the Note component was this:

<template>
  <div class="note">
    <h4>{{ this.title }}</h4>
    <span>{{ this.body }}</span>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {},
})
export default class App extends Vue {
  @Prop() title!: string;
  @Prop() body?: string;
}
</script>

And that's that.

Svelte

Here's the framework I wanted to learn, but didn't even think about touching until I was thinking about doing this. Basically I went into this knowing absolutely nothing except that Svelte gets a lot of love from web devs, but I'm probably going to continue making projects with Svelte after this, so I might be really bad at it now, but there's I chance I get better in the future.
Anyway, after about 10 minutes of trying to find a yarn create-* CLI for Svelte that doesn't exist, I decided to just set up the project with their boilerplate as is intended. I converted the project to TypeScript because I'm some kind of addict to strongly typed languages, and I got started:
For styling I bit the bullet and stopped using SCSS, and by that I mean I couldn't be bothered to setup SCSS regardless of how easy it would be, so I just compiled it manually because it's not like I'll be editing the stylesheet too much anyway. This is the component I went with:

<script lang="ts">
import Note from "./components/Note.svelte";

type NoteType = {
    title: string;
    body: string;
};

let notes: Array<NoteType> = [];

const data = localStorage.getItem("notes");
if (data) notes = JSON.parse(data);

let title: string = "";
let body: string = "";

function onSubmit() {
    let note: NoteType = {
        title: title,
        body: body
    };
    notes.push(note);
    localStorage.setItem("notes", JSON.stringify(notes));
}
</script>

<div class="container">
    <header>
        <h1>Notes App</h1>
    </header>
    <main>
        {#each notes as note}
            <Note title={note.title} body={note.body} />
        {/each}
        <div class="note">
            <form on:submit={onSubmit}>
                <input type="text" placeholder="Note Title" bind:value={title} />
                <textarea placeholder="Note Body" bind:value={body}></textarea>
                <input type="submit" value="Add Note" />
            </form>
        </div>
    </main>
</div>

<style>
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.container header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  background-color: #4e78b8;
  color: white;
}
.container header h1 {
  margin-left: 6px;
}
.container main {
  margin: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1rem;
  align-items: center;
}
.container main .note {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #a15fbb;
  border-radius: 5px;
}
.container main .note form {
  display: flex;
  flex-direction: column;
}
.container main .note form textarea {
  resize: none;
}
</style>

And here is the Note component:

<script lang="ts">
    export var title: string;
    export var body: string;
</script>

<div class="note">
    <h4>{title}</h4>
    <span>{body}</span>
</div>

Here's the problem, one I don't know how to solve and at this point don't want to solve, the styling only works if you paste the styles into bundle.css, which then resets itself whenever it live reloads. This won't be a problem on a fully built app, but it's very annoying for testing. I don't think I'm going to be fixing this anytime soon, but maybe I'll fix it eventually.

Conclusion

Remember when I said I was going to try to build more things with Svelte? I don't know how committed to that I'm going to be because while I did enjoy a lot of the aspects of Svelte, there were just too many hiccups for me to want to use it more often. React I think was given an unfair shake by the project I was building, Angular I still think is the cleanest, Vue I think was the most fun, and jQuery was probably the best, which surprised me a lot. I think if I had to choose a framework for future projects, it would definitely depend on the project, but I can see myself using all of them again, even with the difficulties I had with Svelte. That being said I'll probably do most of my work in Angular and React, with jQuery and Vue being my next choices. I will probably give Svelte another chance, but I don't think I want to be building too many things in it regardless of whether I was unfair to it with this project or not. Anyway, I think any of these frameworks would be a great choice for a lot of use cases, and I definitely see why people like Vue now, but I can't say my opinions have changed all that much.

Code

All the code is available on github here: https://github.com/jackmaster110/five-apps

Let's Build and Deploy a FARM Stack app

Sammy Shear — Sun, 08 Aug 2021 01:30:47 +0000

Have you ever written a full stack application with React, Angular, or Vue? This tutorial will cover the FARM stack, which stands for FastAPI, React, and MongoDB. FastAPI is a Python framework for building APIs, well, fast. This project is a To-Do List, which is a fairly simple project to do in React. This tutorial can generally be applied to other frameworks like Vue, and Angular, but I will be using React.

Project Setup

Starting a project is very easy. I will be showing two methods, one using my CLI create-farm-app, and one manually. Both are pretty simple, but if you prefer not to set up all that much yourself, you can use the CLI. I recommend setting up the app manually for your first project.

Manual Setup

Let's get started with manual setup:



$ mkdir farm-stack-tut
$ cd farm-stack-tut
$ mkdir backend
$ code .
$ git init
$ yarn create react-app frontend --template typescript
$ cd backend
$ git init
$ touch requirements.txt main.py model.py database.py

Now let's open up requirements.txt, and put in the following dependencies:



fastapi == 0.65.1

uvicorn == 0.14.0

motor == 2.4.0

gunicorn == 20.1.0

pymongo[srv] == 3.12.0

We will need uvicorn for running an ASGI server, motor and pymongo[srv] to connect to our MongoDB atlas database, and gunicorn for when we deploy the app.
The reason we are initializing two git repos (plus the one that is automatically initialized by CRA) is to make use of submodules. I prefer this setup to one big repository mainly because it's easier to deploy. I will be showing you how to deploy with submodules in this tutorial, but I'm sure you can find a way to deploy without using them if you look into it.

Installing Dependencies

It's actually very simple to install the pip dependencies if you're using pipenv, which I recommend. Simply navigate to the backend folder and enter:



$ pipenv install -r requirements.txt

Template Setup

This is much easier to do, because I have set up most things through the CLI, you will still have to set up the git submodules though.



$ yarn create farm-app --name=farm-stack-tut

You might see a popup for the name anyway, I'm working on fixing that, but if you type in the same name, it should work fine.

Git Setup

Let's set up those submodules now, so there's less work to do later:
Make three new remote repos, one for the frontend, one for the backend, and one for the full app.
In the frontend and backend local repos, run the commands:



$ git remote add origin <url>
$ git add *
$ git commit -m "first commit"
$ git branch -M main
$ git push -u origin main

In the main repo, do these commands once those have been pushed.



$ git submodule add <frontend-url> frontend
$ git submodule add <backend-url> backend

Then commit and push the changes to the main remote repo.

Making the Backend API

We will start in main.py, where we need this code to get started:



from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

origins = ["*"] # This will eventually be changed to only the origins you will use once it's deployed, to secure the app a bit more.

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

@app.get('/')
def get_root():
    return {"Ping": "Pong"}

This is the most basic possible api, and will just serve as a test to make sure we've set everything up properly.
Run the uvicorn command here:



$ uvicorn main:app --reload

If you navigate to http://localhost:8000, you should get the message { "Ping": "Pong" } that we set to return. If you did, we can get started building the rest of the backend.

MongoDB Atlas

Let's take a quick break and move on to making the database. If you don't plan to deploy this app, you can just use a local MongoDB database, but since I will be deploying my app, I will be using their cloud hosting service. Navigate to MongoDB Atlas, and set up a new account, or create a new project if you've used this before. Once a project has been created, you can add a cluster for free, with the "Add a Database" button. Name your cluster and allow it to be created. When it is done, hit the "Browse Collections" button and insert a new database and collection named "TodoDatabase" and "todos" respectively. That's all we need to do for now.

Make our Model and Connect to our Database

We're going to need to do two things to push data to our database, the first is to make a model for the data to follow, which we can do in model.py. We're going to include 3 strings, a nanoid, a title, and a description, plus a boolean value to check if it is finished or not. The model looks like this:



from pydantic import BaseModel

class Todo(BaseModel):
    nanoid: str
    title: str
    desc: str
    checked: bool

The next thing we need to do is actually connect to our database, which is easy enough with motor and pymongo, however, to secure our application, we're going to use an environment variable for the database URI, meaning we're going to need to use python-dotenv now:



$ pipenv install python-dotenv

Create at the root of your backend a .env file, inside place this with the database URI (which you can find by clicking connect on MongoDB Atlas) filled in:



DATABASE_URI = "<URI>"

Technically this is only intended to keep our application working on our local machine, as heroku will allow us to insert an environment variable when we deploy, but it's good practice to keep your sensitive data hidden. If you haven't already, make a .gitignore file, and put .env inside.
Let's connect to the database now.
To do so, we'll first use dotenv to get the URI from our file.



from model import *
import motor.motor_asyncio
from dotenv import dotenv_values
import os

config = dotenv_values(".env")
DATABASE_URI = config.get("DATABASE_URI")
if os.getenv("DATABASE_URI"): DATABASE_URI = os.getenv("DATABASE_URI") #ensures that if we have a system environment variable, it uses that instead

client = motor.motor_asyncio.AsyncIOMotorClient(DATABASE_URI)

Now we can make variables for our database and collection, and then make a bunch of functions to modify the collection's data.



database = client.TodoDatabase
collection = database.todos

async def fetch_all_todos():
    todos = []
    cursor = collection.find()
    async for doc in cursor:
        todos.append(Todo(**doc))
    return todos

async def fetch_one_todo(nanoid):
    doc = await collection.find_one({"nanoid": nanoid}, {"_id": 0})
    return doc

async def create_todo(todo):
    doc = todo.dict()
    await collection.insert_one(doc)
    result = await fetch_one_todo(todo.nanoid)
    return result

async def change_todo(nanoid, title, desc, checked):
    await collection.update_one({"nanoid": nanoid}, {"$set": {"title": title, "desc": desc, "checked": checked}})
    result = await fetch_one_todo(nanoid)
    return result

async def remove_todo(nanoid):
    await collection.delete_one({"nanoid": nanoid})
    return True

These are all the functions we should need, but feel free to add your own. Let's get some http operations going in main.py:



@app.get("/api/get-todo/{nanoid}", response_model=Todo)
async def get_one_todo(nanoid):
    todo = await fetch_one_todo(nanoid)
    if not todo: raise HTTPException(404)
    return todo

@app.get("/api/get-todo")
async def get_todos():
    todos = await fetch_all_todos()
    if not todos: raise HTTPException(404)
    return todos

@app.post("/api/add-todo", response_model=Todo)
async def add_todo(todo: Todo):
    result = await create_todo(todo)
    if not result: raise HTTPException(400)
    return result

@app.put("/api/update-todo/{nanoid}", response_model=Todo)
async def update_todo(todo: Todo):
    result = await change_todo(nanoid, title, desc, checked)
    if not result: raise HTTPException(400)
    return result

@app.delete("/api/delete-todo/{nanoid}")
async def delete_todo(nanoid):
    result = await remove_todo(nanoid)
    if not result: raise HTTPException(400)
    return result

Now let's test out these operations by going to http:localhost:8000/docs and trying them out.
You should see a screen with all of your operations, and if you click on any of them, it will pop up with this:

Hit "Try it out" on any of them, but probably start with the add todo one, and then you can perform an operation. Ignore the response for now and check your MongoDB database in the view collections section. You should see a new item, but if you don't you can go back to the response and debug it (you may have to refresh the database if you already had the page open). You should try out the other operations as well, but if all goes well, you should be able to start working on your frontend.

Frontend

If you know how React works, and you know how to send http requests through axios, I recommend skipping this section, but for the rest of you, here's my version of the frontend.

Libraries

I'm using node@16.4.2

node-sass@6.0.0 (you can use a different version of node-sass and sass-loader depending on your node version, the only reason I'm not using dart sass is the slow compile time)
sass-loader@12.1.0
nanoid
axios
that's basically it for libraries I'm actually going to use, my template adds react-router as well

App

Let's start by setting up a nice folder structure (my template, sammy-libraries, does this for me, but this is how I like to set it up):

Now we can get started on our app.

Let's leave index.tsx alone, and go straight for App.tsx, which should look like this:



import React from "react";
import TodoList from "./components/TodoList";

function App() {
    return (
        <div className="app-container">
            <header className="app-header">
                <h1>To-Do List</h1>
            </header>
            <div className="content">
                <TodoList />
            </div>
        </div>
    );
}

export default App;

Before we do any styling, let's set up the three other components we're going to need, which are TodoList.tsx, Todo.tsx, and AddTodo.tsx. They should all look basically the same for now, just a div with a className depending on what they are, like this for the todo:



import React from "react";

function Todo() {
    return(
        <div className="todo-container">

        </div>
    );
}

export default Todo;

Now that we have those components let's define some styles for our app, I will be using SCSS instead of SASS, but this should be easily adaptable into SASS (or CSS if you want to do some extra work).
Here is the stylesheet I went with for index.scss:



$primary: #146286;
$secondary: #641486;
$accent: #3066b8;

.app-header {
    background-color: $primary;
    color: white;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.content {
    .todo-list-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-gap: 10px;

        .todo-container {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            border-radius: 6px;
            padding: 10px 6px;
            background-color: $secondary;
            color: white;

            h1 {
                font-size: 20px;
            }

            span {
                font-size: 14px;
            }

            footer {
                display: flex;
                flex-direction: row-reverse;
            }
        }
    }
}

This should be the only styling we need to do, but you can do some extra if you'd like.

Now let's get to work on the components.

The finished App looks like this:



import { nanoid } from "nanoid";
import React, { useState } from "react";
import { TodoType } from "./components/Todo";
import TodoList from "./components/TodoList";

function App() {
    const [todoList, setTodoList] =  useState<TodoType[]>([]);

    const [title, setTitle] = useState<string>("");
    const [desc, setDesc] = useState<string>("");

    const changeTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
        setTitle(event.currentTarget.value);
    };

    const changeDesc = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        setDesc(event.currentTarget.value);
    }

    const changeChecked = (event: React.MouseEvent<HTMLInputElement>, id: string) => {
        let temp = [...todoList];
        temp.forEach((item) => {
            if (item.nanoid === id) {
                item.checked = !item.checked;
            }
        });
        setTodoList(temp);
    };

    const addTodo = (event: React.MouseEvent<HTMLButtonElement>) => {
        let newTodo: TodoType = {
            nanoid: nanoid(),
            title: title,
            desc: desc,
            checked: false
        };
        setTodoList([...todoList, newTodo]);
    }

    return (
        <div className="app-container">
            <header className="app-header">
                <h1>To-Do List</h1>
            </header>
            <div className="content">
                <TodoList submit={addTodo} changeDesc={changeDesc} changeTitle={changeTitle} list={todoList} changeChecked={changeChecked} />
            </div>
        </div>
    );
}

export default App;

This performs some very basic functions to pass the props down the tree via react hooks.

The TodoList will look like this:



import React from "react";
import AddTodo from "./AddTodo";
import Todo, { TodoType } from "./Todo";

interface TodoListProps {
    list: TodoType[]
    changeChecked: (event: React.MouseEvent<HTMLInputElement>, nanoid: string) => void;
    changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void;
    changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
    submit: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

function TodoList(props: TodoListProps) {
    return(
        <div className="todo-list-container">
            {props.list.map((item) => {
                return(
                    <Todo nanoid={item.nanoid} title={item.title} desc={item.desc} checked={item.checked} changeChecked={props.changeChecked} /> 
                );
            })}
            <AddTodo changeTitle={props.changeTitle} changeDesc={props.changeDesc} submit={props.submit} />
        </div>
    );
}

export default TodoList;

The Todo should look like this:



import React from "react";

export type TodoType = {
    nanoid: string;
    title: string;
    desc: string;
    checked: boolean;
}

interface TodoProps extends TodoType {
    changeChecked: (event: React.MouseEvent<HTMLInputElement>, nanoid: string) => void;
}

function Todo(props: TodoProps) {
    return(
        <div className="todo-container">
            <h1>{props.title}</h1>
            <span>{props.desc}</span>
            <footer>
                <input type="checkbox" checked={props.checked} onClick={(e) => props.changeChecked(e, props.nanoid)} />
            </footer>
        </div>
    );
}

export default Todo;

And finally, the AddTodo should look like this:



import React from "react";

interface AddTodoProps {
    submit: (event: React.MouseEvent<HTMLButtonElement>) => void;
    changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void;
    changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
}

function AddTodo(props: AddTodoProps) {
    return(
        <div className="todo-container add-todo-container">
            <input type="text" className="title" placeholder="Title..." onChange={props.changeTitle} />
            <textarea className="desc" placeholder="Description..." onChange={props.changeDesc}>
            </textarea>
            <button className="submit" onClick={props.submit}>Add Todo</button>
        </div>
    );
}

export default AddTodo;

Now it's time to use useEffect() and axios to store all this data in the database.
This is our final App.tsx:



import axios from "axios";
import { nanoid } from "nanoid";
import React, { useEffect, useState } from "react";
import { TodoType } from "./components/Todo";
import TodoList from "./components/TodoList";

function App() {
    const [todoList, setTodoList] = useState<TodoType[]>([]);

    const [title, setTitle] = useState<string>("");
    const [desc, setDesc] = useState<string>("");

    useEffect(() => {
        axios
            .get(process.env.REACT_APP_BACKEND_URL + "/api/get-todo")
            .then((res) => {
                setTodoList(res.data);
            });
    }, []);

    const changeTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
        setTitle(event.currentTarget.value);
    };

    const changeDesc = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        setDesc(event.currentTarget.value);
    };

    const changeChecked = (
        event: React.MouseEvent<HTMLInputElement>,
        id: string
    ) => {
        let temp = [...todoList];
        let tempIndex = 0;
        temp.forEach((item, i) => {
            if (item.nanoid === id) {
                item.checked = !item.checked;
                tempIndex = i;
            }
        });
        setTodoList(temp);
        let item = todoList[tempIndex];
        axios.put(
            process.env.REACT_APP_BACKEND_URL +
                `/api/update-todo/${item.nanoid}`,
                { nanoid: item.nanoid, title: item.title, desc: item.desc, checked: item.checked}
        );
    };

    const addTodo = (event: React.MouseEvent<HTMLButtonElement>) => {
        let newTodo: TodoType = {
            nanoid: nanoid(),
            title: title,
            desc: desc,
            checked: false,
        };
        setTodoList([...todoList, newTodo]);
        axios.post(
            process.env.REACT_APP_BACKEND_URL + "/api/add-todo",
            JSON.stringify(newTodo)
        );
    };

    return (
        <div className="app-container">
            <header className="app-header">
                <h1>To-Do List</h1>
            </header>
            <div className="content">
                <TodoList
                    submit={addTodo}
                    changeDesc={changeDesc}
                    changeTitle={changeTitle}
                    list={todoList}
                    changeChecked={changeChecked}
                />
            </div>
        </div>
    );
}

export default App;

Now that that's done, we can get ready to deploy the app.

Deployment

I will be using Heroku to deploy the backend, and GitHub pages to deploy the frontend. The only real downside I've encountered with Heroku is that if it is idle, the backend has to be restarted whenever it is no longer idle, so you may experience long loading times after breaks in between uses of the app. GitHub Pages is something I've never had a problem with.

Backend Deployment

Create a new account on Heroku, if you don't have one already, and then create a new app. I find it easiest to deploy through GitHub, but you get more control if you use the Heroku CLI. Regardless, these are the basic steps you have to follow.
Create a new file simply called Procfile at the root of the backend, and put this in it:



web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app

Also make sure to add python-dotenv == 0.19.0 to your requirements.txt file and reinstall dependencies to ensure everything boots properly.
Then go back to main.py, and replace the "*" in the origins array with "https://<username>.github.io".
Push to github, deploy, and let it go. If it works you should be able to view the same root page we viewed earlier.
Go to app settings, reveal config vars, and put the DATABASE_URI in as a config var.

Frontend Deployment

This is slightly more complicated because we have to install a dependency and edit package.json, but it's pretty straight forward still.
Edit .env's backend url to be the heroku app url, commit and push, then do:



$ yarn add --dev gh-pages

Then you can open up package.json, and add these lines to "scripts":



"predeploy": "yarn build",
"deploy": "REACT_APP_BACKEND_URL=<backend-url> gh-pages -d build"

Also add:



"homepage": "https://<username>.github.io/<project-name>-frontend/"

In github, add a secret that serves as the same environment variable as the backend url, make sure it's named the same.



$ yarn start
^C
$ yarn deploy

If all goes well, you should have a 100% working app.
The source code of this is on github here:
https://github.com/jackmaster110/farm-stack-tut