https://github.com/marcusoftnet/htmx-todo-tutorial
Code for some HTMx tutorial blog posts
https://github.com/marcusoftnet/htmx-todo-tutorial
Last synced: over 1 year ago
JSON representation
Code for some HTMx tutorial blog posts
- Host: GitHub
- URL: https://github.com/marcusoftnet/htmx-todo-tutorial
- Owner: marcusoftnet
- Created: 2025-01-17T13:47:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-24T14:44:31.000Z (over 1 year ago)
- Last Synced: 2025-01-24T15:31:59.662Z (over 1 year ago)
- Language: JavaScript
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# 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](https://www.marcusoft.net/2025/01/htmx-todo-tutorial.html)
1. [Part II - Google Authentication](https://www.marcusoft.net/2025/01/htmx-todo-tutorial-II.html)
1. [Part III - Building the app](https://www.marcusoft.net/2025/01/htmx-todo-tutorial-III.html)
1. [Part IV - Advanced updates](https://www.marcusoft.net/2025/01/htmx-todo-tutorial-IV.html)
1. [Part V - Validation](https://www.marcusoft.net/2025/01/htmx-todo-tutorial-V.html)
1. [Part VI - Clean up first page load](https://www.marcusoft.net/2025/01/htmx-todo-tutorial-VI.html)
## Tools
To build this I have used:
* Express
* Firebase (Authentication and storage)
* EJS Templates
* HTMx
## Get this to run
1. Create a [Firebase project](https://console.firebase.google.com/)
* Enable authentication - and copy the Google Client Id
* Enable Firestore - and copy the configuration
1. Clone the this repository
* `git clone https://github.com/marcusoftnet/htmx-todo-tutorial && cd htmx-todo-tutorial`
1. Install the dependencies
* `npm install`
1. Create an `.env` file in the root of the repository and add the following keys:
```text
PORT=
APP_NAME=
GOOGLE_CLIENT_ID=
SESSION_SECRET=
FIREBASE_APIKEY=
FIREBASE_AUTHDOMAIN=
FIREBASE_PROJECTID=
FIREBASE_STORAGEBUCKET=
FIREBASE_MESSAGINGSENDERID=
FIREBASE_APPID=
```
1. Start the application in development mode `npm run dev`