https://github.com/samliebl/web-app
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.
https://github.com/samliebl/web-app
express nodejs nunjucks rest-api web-app
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/samliebl/web-app
- Owner: samliebl
- License: other
- Created: 2024-11-02T10:59:25.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-08T19:54:56.000Z (5 months ago)
- Last Synced: 2025-01-21T07:43:58.879Z (3 months ago)
- Topics: express, nodejs, nunjucks, rest-api, web-app
- Language: Nunjucks
- Homepage:
- Size: 730 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Web App
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.
Find it live at [app.samliebl.com](https://app.samliebl.com).
#### Contents
1. REST API demos
1. Note on the client-side JavaScript (AJAX functionality)
1. App
1. Directory structure
1. Routes & notes on paths
--
## REST API demos
1. Demonstration of a `GET` API call/request
1. Rendering the site with Nunjucks via Express
1. Three Demonstrations of `POST` API call/requests
1. A simple `POST` API call/request
1. A more complex `POST` request
1. Number lookup with Twilio carrier lookup API `POST` request
--
## App
The app itself works via the `server.js` file in the home directory.
### Directory structure
```
.
├╴ .env¹
├╴ .env.example²
├╴ views/
│ ├╴ _layouts/
│ │ └╴ base.njk
│ ├╴ _partials/
│ │ ├╴ client-side-js.njk
│ │ ├╴ get-render.njk
│ │ ├╴ lookup-form.njk
│ │ ├╴ nav.njk
│ │ ├╴ post-simple.njk
│ │ └╴ post-whisper.njk
│ ├╴ index.njk
│ └╴ error.njk
├╴ public/
│ ├╴ css/
│ │ └╴ main.css
│ └╴ js/
│ └╴ main.js
├╴ routes/
│ ├╴ download-transcription.js
│ ├╴ home.js
│ ├╴ index.js
│ ├╴ lookup.js
│ ├╴ submit.js
│ └╴ transcribe.njk
├╴ uploads/³
└╴ server.js
---
Notes:
1. You will add your own
2. As an example, with placeholder data, for what yours would look like
3. where the audio files & transcription takes place
```
Take a look at the source code—mostly in `server.js` and then in the templates directory (`views/`) for the client-side code.
### Routes
Each 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...
```js
app.use('/', routes);
```
#### Notes on paths
The 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.
```js
// Use modularized routes
app.use((req, res, next) => {
req.projectRoot = projectRoot; // Attach project root to request object
next();
});
```
## License
MIT