{"id":18232757,"url":"https://github.com/elidaniel92/spa-with-pure-js","last_synced_at":"2026-05-04T01:35:27.585Z","repository":{"id":260708391,"uuid":"876905264","full_name":"elidaniel92/spa-with-pure-js","owner":"elidaniel92","description":"This project is a Single Page Application (SPA) built using pure HTML, CSS, and JavaScript for learning purposes.","archived":false,"fork":false,"pushed_at":"2024-11-02T00:22:36.000Z","size":108,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T11:39:21.786Z","etag":null,"topics":["docker","docker-compose","html","javascript","learn-to-code","learning-resources","nginx","nginx-docker","single-page-app","single-page-applications","webapp"],"latest_commit_sha":null,"homepage":"http://spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elidaniel92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-22T18:44:18.000Z","updated_at":"2024-11-02T00:22:39.000Z","dependencies_parsed_at":"2024-11-02T01:19:49.695Z","dependency_job_id":"c00268fc-62d0-4622-aea8-68bf7b5aaa23","html_url":"https://github.com/elidaniel92/spa-with-pure-js","commit_stats":null,"previous_names":["elidaniel92/spa-with-pure-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elidaniel92/spa-with-pure-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elidaniel92%2Fspa-with-pure-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elidaniel92%2Fspa-with-pure-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elidaniel92%2Fspa-with-pure-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elidaniel92%2Fspa-with-pure-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elidaniel92","download_url":"https://codeload.github.com/elidaniel92/spa-with-pure-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elidaniel92%2Fspa-with-pure-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32591603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"ssl_error","status_checked_at":"2026-05-03T22:09:10.534Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","docker-compose","html","javascript","learn-to-code","learning-resources","nginx","nginx-docker","single-page-app","single-page-applications","webapp"],"created_at":"2024-11-04T14:03:34.208Z","updated_at":"2026-05-04T01:35:27.570Z","avatar_url":"https://github.com/elidaniel92.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 👨‍🎓📖 SPA with Pure JavaScript\n\nThis project is a Single Page Application (SPA) built using pure HTML, CSS, and JavaScript. It demonstrates client-side routing and rendering without relying on any front-end frameworks or libraries.\n\nIt is 🚫 **NOT** intended for 🪲 **production usage**! It's simple and hackable enough to be used for 👨‍🎓 **Learning Purposes**.\n\n\u003e ⚠️ **Note**: this webapp depends on [catfact.ninja API](https://catfact.ninja/). See: [cat-fact.js](src/pages/cat-fact/cat-fact.js#L7)\n\n## 🏃‍♂️TL;DR\n\nView the website hosted on AWS S3: http://spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com\n\n## ✨ Features\n\n- **Dynamic Page Loading:** Pages (home and cat fact) are dynamically loaded into a single content area without reloading the entire page.\n- **Back/Forward Navigation:** Properly handles the browser's back and forward buttons, ensuring seamless navigation between pages.\n- **Nginx Setup:** Dockerized with an Nginx configuration for serving the SPA.\n- **User Navigation Count:** Tracks offline navigation within the SPA and page reloads.\n\n    1. Displays the count of offline navigations (i.e., page changes within the SPA without a full page reload). The value is updated by JavaScript in the app.js file, incrementing each time navigation occurs within the SPA.\n\n    2. Displays the number of times the page has been reloaded since the session began. This value is managed using sessionStorage, incrementing each time the page is reloaded. The updated value is reflected in the page, as shown in both the `app.js` and `contact.html` files.\n\n## 📁 Project Structure\n\n```bash\nsrc/\n│   ├── index.html           # Main entry point of the app  \n│   ├── 404.html             # Redirect to index.html, necessary when running with http-server (npm package)\n│   ├── contact.html         # A normal HTML page\n│   ├── app/                 # JavaScript logic\n│   │    └── app.js          # Main SPA logic, including navigation and route handling\n│   │    └── routes.js       # Class responsible for routing and loading page content\n│   └── pages/               # HTML pages for different routes\n│      ├── home/\n│      │   └── home.js       # Home page content\n│      ├── about/\n│      │   └── about.js      # About page content\n│      └── not-found/\n│          └── not-found.js  # Fallback page content (404)\n├── docker-compose.yml       # Docker Compose configuration\n├── Dockerfile               # Dockerfile for containerizing the app\n├── nginx.conf               # Nginx configuration\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- 🐳 Docker and Docker Compose installed on your machine to run in a container.\n- 🟢 Node to run with NPM.\n\n### ⚙️ Installation\n\nInstall Docker or Node.js:\n\n[Install Docker](https://www.docker.com/) \n\n[Install Node](https://nodejs.org/)\n\nClone the repository:\n\n```\ngit clone https://github.com/elidaniel92/spa-with-pure-js.git\n```\n\nSwitch to the repository folder:\n\n```\ncd spa-with-pure-js\n```\n\n### 🐳 Running Locally with Docker\n\nStart the app using Docker Compose.\n\nBuild the Nginx Container Image:\n```\ndocker-compose build\n```\n\nStarted the container:\n```\ndocker-compose up\n```\n\n### 🟢 Running Locally with http-server\n\n[http-server](https://www.npmjs.com/package/http-server) is a simple command-line static HTTP server. \n\nInstall http-server with npm:\n\n```\nnpm install --global http-server\n```\n\nRun on port 8080:\n\n```\nhttp-server ./src --port 8080\n```\n\n### 🎉 Open your browser and navigate to http://localhost:8080 to view the application.\n\n#### 💡 Tip: Use Chrome DevTools (press F12) to understand how the files are loaded.\n\n![image](images/chrome-dev-tools.png \"Chrome DevTools\")\n\n\n# 📜 License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felidaniel92%2Fspa-with-pure-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felidaniel92%2Fspa-with-pure-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felidaniel92%2Fspa-with-pure-js/lists"}