This document was created in March 2020, last updated October 2021. If you are referencing this document much later, be wary that some of this info may be outdated.
đ˘ Introduction
This is a littleâtutorialâ by myself, jynnie. I canât guarantee this guide is not sassy.
Whoâs this for?
If youâre a first-time coder, please DO NOT USE THIS TUTORIAL TO LEARN. Not to learn how to code. Not to learn web development. Nothing. I wonât be explaining any concepts. This is like a setup manual for IKEA furniture. This is NOT beginner friendly.
This is for web developers who want a reference to start up their web app or are just curious about other setups. You should be familiar with basic web dev concepts and know JSX, CSS, and React. I will also be using functional components and hooks. If youâre not familiar with those in React, this may be a bit hard to follow. You donât need to know Firebase, but you should be familiar with document-databases.
You might find this interesting if youâre looking into new packages and kits to try for your next web dev project. You might want to critique some of my patterns even.
In reality, this is really for myself. I tend to forget how to start up apps, or want code snippets to refer to, so I like writing these. Sometimes I use several tutorials to get setup, and I like to consolidate all that info into one easy stream. It also bring me clarity to retrospect on why I pick certain tech or use certain design patterns.
What apps can I make with this kit?
This supports apps that do not require a server. Firebase is a real-time, document-oriented database, so anythingâliveâ will have to be facilitated by(and at the mercy of) Google Firebase. Check this out to see if itâs for you. You could totally bootstrap a server to this, but I suspect youâll have to make some large modifications.
Firebase will also be the mechanism by which we setup authentication.
How to read this document.
This is an explanation of some of the stylization I write with. Not critical to read, if youâre a nugget for reading, have this. I have a lot of thoughts about the way we write.
This document will sound like me. Not terribly professional and not always to the point. As such, Iâve done some things to help you skim this document.
Important steps will be in code blocks. I wonât hide commands in my text. So if youâre looking for the code, you can easily skip my narration. If you need details, Iâll generally narrate above code blocks. Leave me a comment if you have a question.
Long blocks of code will start with a comment that detail what this code block is about. This way you can easily skip blocks.
Summary points will be bolded. In long paragraphs iâll use bolded text as tl;drs. I also bold leading text that calls to certain audience(i.e.âfor the designers out thereâ) so if youâre in that audience, you might be interested in the rest of those sentences.
Justifications and opinions will be in block quotes. Another easy way for you to skip sections. If you already agree with some design pattern outlined, then you probably donât care to read my reasoning. But maybe youâre curious. We love curiosity.
Headers will be descriptive of the steps they detail. Use the Dropbox paper outline on the left side of the screen to preview headers. Primary headers will have an emoji đđť
I believe in skimming when reading and I have tried to write with skimming in mind. However, I do not think that to beâskimmableâ your writing has to be short. I wonât mince my opinions and thoughts to beâshorter and thus easier to readâ.
Dropbox paper letâs you collapse sections. Use that to hideaway things you donât care about. Though Iâm not sure whether if you collapse a section it collapses it for all viewers. ÂŻ\_(ă)_/ÂŻÂ
đŚ Basic Setup
This is the real basic stuff of making folders and setting up git.
$ mkdir NAME
$ cd NAME
Unless otherwise stated, all commands from here on out are run from the directory NAME.
If you're using git for version control,
$ git init
Beautiful. I recommend using VSCode as your code editor.
âď¸ Basic React App
Iâll be using create-react-app to bootstrap the app. It really does the heavy lifting.
đ˘ Introduction
Whoâs this for?
What apps can I make with this kit?
How to read this document.
đŚ Basic Setup
$ mkdir NAME$ cd NAME$ git initâď¸ Basic React App