{"id":21148880,"url":"https://github.com/samliebl/web-app","last_synced_at":"2026-04-15T22:32:20.518Z","repository":{"id":260768879,"uuid":"882266207","full_name":"samliebl/web-app","owner":"samliebl","description":"Demonstrating some facility with REST APIs and what you can do with them. I also talk about the client-side AJAX code that's bringing this all together for a better user experience.","archived":false,"fork":false,"pushed_at":"2024-12-08T19:54:56.000Z","size":748,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T14:48:48.338Z","etag":null,"topics":["express","nodejs","nunjucks","rest-api","web-app"],"latest_commit_sha":null,"homepage":"","language":"Nunjucks","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samliebl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-02T10:59:25.000Z","updated_at":"2024-12-08T19:55:00.000Z","dependencies_parsed_at":"2024-11-19T11:37:38.019Z","dependency_job_id":"8ccd4640-9625-4268-8b7f-b0a75eb7e21b","html_url":"https://github.com/samliebl/web-app","commit_stats":null,"previous_names":["samliebl/web-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/samliebl/web-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samliebl%2Fweb-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samliebl%2Fweb-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samliebl%2Fweb-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samliebl%2Fweb-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samliebl","download_url":"https://codeload.github.com/samliebl/web-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samliebl%2Fweb-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31863477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"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":["express","nodejs","nunjucks","rest-api","web-app"],"created_at":"2024-11-20T09:29:39.188Z","updated_at":"2026-04-15T22:32:20.502Z","avatar_url":"https://github.com/samliebl.png","language":"Nunjucks","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web App\n\nDemonstrating some facility with REST APIs and what you can do with them. I also talk about the client-side AJAX code that's bringing this all together for a better user experience.\n\nFind it live at [app.samliebl.com](https://app.samliebl.com).\n\n#### Contents\n\n1. REST API demos\n1. Note on the client-side JavaScript (AJAX functionality)\n1. App\n    1. Directory structure\n    1. Routes \u0026 notes on paths\n\n--\n\n## REST API demos\n\n1. Demonstration of a `GET` API call/request  \n    1. Rendering the site with Nunjucks via Express\n1. Three Demonstrations of `POST` API call/requests\n    1. A simple `POST` API call/request\n    1. A more complex `POST` request\n    1. Number lookup with Twilio carrier lookup API `POST` request\n\n--\n\n## App\n\nThe app itself works via the `server.js` file in the home directory.\n\n### Directory structure\n\n```\n.\n├╴ .env¹\n├╴ .env.example²\n├╴ views/\n│  ├╴ _layouts/\n│  │  └╴ base.njk\n│  ├╴ _partials/\n│  │  ├╴ client-side-js.njk\n│  │  ├╴ get-render.njk\n│  │  ├╴ lookup-form.njk\n│  │  ├╴ nav.njk\n│  │  ├╴ post-simple.njk\n│  │  └╴ post-whisper.njk\n│  ├╴ index.njk\n│  └╴ error.njk\n├╴ public/\n│  ├╴ css/\n│  │  └╴ main.css\n│  └╴ js/\n│     └╴ main.js\n├╴ routes/\n│  ├╴ download-transcription.js\n│  ├╴ home.js\n│  ├╴ index.js\n│  ├╴ lookup.js\n│  ├╴ submit.js\n│  └╴ transcribe.njk\n├╴ uploads/³\n└╴ server.js\n\n---\nNotes:\n1. You will add your own\n2. As an example, with placeholder data, for what yours would look like\n3. where the audio files \u0026 transcription takes place\n```\n\nTake a look at the source code—mostly in `server.js` and then in the templates directory (`views/`) for the client-side code.\n\n### Routes\n\nEach route/API request is modularized into its own route in a `routes/` directory. There's a `routes/index.js` that collects all the route modules and exports them up to `server.js`, which in turn puts them in the mix like so...\n\n```js\napp.use('/', routes);\n```\n\n#### Notes on paths\n\nThe transcription feature allows users to download a plain text file of the transcription. To support this, there's an `uploads/` directory located at the project's root level. Since path resolution within `routes/` files can be tricky (e.g., `__dirname` resolves to the `routes/` directory), the app uses a middleware function defined before `app.use()` for the routes. This middleware attaches the project root path to the `request` object as `req.projectRoot`. By consistently using `req.projectRoot` to construct paths in route handlers, we ensure that all file operations (e.g., reading or writing in `uploads/`) reliably point to the correct directory, regardless of where the route files are located.\n\n```js\n// Use modularized routes\napp.use((req, res, next) =\u003e {\n    req.projectRoot = projectRoot; // Attach project root to request object\n    next();\n});\n```\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamliebl%2Fweb-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamliebl%2Fweb-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamliebl%2Fweb-app/lists"}