Git Product home page Git Product logo

htmxual's Introduction

htmxual โœจ

htmxual is a demonstration application for building frontends without JavaScript. It utilizes Go Gin as the web server, Templ (a library for JSX-style templating in Go), and HTMX in the frontend. ๐Ÿš€

There are multiple examples included:

  • /count shows a basic counter implemented without JavaScript.
  • /todo demonstrates a simple todo list.
  • /sse shows a simple chat application using server-sent events.
  • /secure shows a simple login form with a protected page using basic auth

Features ๐ŸŒŸ

Counter Example: Visit /count/ to see a basic counter implemented without using JavaScript.

Todo List Example: Access /todo/ to explore a simple todo list demonstration.

Server-Sent Events: Visit /sse/ to see a simple chat application using server-sent events.

Secure Login: Access /secure/ to see a simple login form with a protected page using basic auth.

Technologies Used ๐Ÿ’ป

Go Gin: Web framework used for the backend.

Templ: Library for JSX-style templating in Go.

HTMX: Used in the frontend to enable interactions without traditional JavaScript.

Getting Started ๐Ÿ

To get the project up and running locally, follow these steps:

Prerequisites: Ensure you have Go installed. โœ…

Clone the Repository: git clone https://github.com/niklastreml/htmxual.git

Navigate to the Directory: cd htmxual

Run the Application: Execute go run ./cmd/app in your terminal.

Access the Application: Open your browser and go to http://localhost:8080/. ๐ŸŒ

Developing the Project โ–ถ๏ธ

To run htmxual, you'll need to use Air to streamline the development process. Follow these steps:

Prerequisites โœ”๏ธ

Make sure you have Go installed on your machine.

Installation ๐Ÿ› ๏ธ

  1. Install Air by running:
    go get -u github.com/cosmtrek/air
    

Starting the Application ๐Ÿš€

  1. Once Air is installed, navigate to the project directory.

  2. In your terminal, run the following command:

    air
    
  3. Air will watch for file changes and automatically rebuild and restart the server.

  4. Access the application by opening your browser and going to http://localhost:8080/.

Usage ๐ŸŽฏ

  • Access /count/ to view the counter example.
  • Visit /todo/ to explore the todo list functionality.

Contributing ๐Ÿค

Contributions are welcome! If you'd like to add features, fix bugs, or improve the documentation, please feel free to submit pull requests.

  1. Fork the project.
  2. Create your feature branch (git checkout -b feature/AmazingFeature).
  3. Commit your changes (git commit -m 'Add some AmazingFeature').
  4. Push to the branch (git push origin feature/AmazingFeature).
  5. Open a pull request.

License ๐Ÿ“œ

This project is licensed under the MIT License - see the LICENSE file for details. ๐Ÿ“„

htmxual's People

Contributors

niklastreml avatar

Stargazers

 avatar Tom avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.