HTMx Todo Tutorial

This code contains the code for a blog post series I wrote on learning HTMx using Express and Firebase.

1. Part I - Setting up
2. Part II - Google Authentication
3. Part III - Building the app
4. Part IV - Advanced updates
5. Part V - Validation
6. Part VI - Clean up first page load

Tools

To build this I have used:

• Express
• Firebase (Authentication and storage)
• EJS Templates
• HTMx

Get this to run

1. Create a Firebase project

   • Enable authentication - and copy the Google Client Id
   • Enable Firestore - and copy the configuration

2. Clone the this repository

   • git clone https://github.com/marcusoftnet/htmx-todo-tutorial && cd htmx-todo-tutorial

3. Install the dependencies

   • npm install

4. Create an .env file in the root of the repository and add the following keys:

   PORT=<Your port number>
   APP_NAME=<Your application name>
   GOOGLE_CLIENT_ID=<From Firebase>
   SESSION_SECRET=<A made up secret>
   FIREBASE_APIKEY=<From Firebase>
   FIREBASE_AUTHDOMAIN=<From Firebase>
   FIREBASE_PROJECTID=<From Firebase>
   FIREBASE_STORAGEBUCKET=<From Firebase>
   FIREBASE_MESSAGINGSENDERID=<From Firebase>
   FIREBASE_APPID=<From Firebase>
   

5. Start the application in development mode npm run dev