https://github.com/jlengstorf/no-js-personalization
Example of using Netlify Edge Functions to create an adaptive UI with no client-side JavaScript.
https://github.com/jlengstorf/no-js-personalization
edge-computing edge-functions personalization
Last synced: about 1 year ago
JSON representation
Example of using Netlify Edge Functions to create an adaptive UI with no client-side JavaScript.
- Host: GitHub
- URL: https://github.com/jlengstorf/no-js-personalization
- Owner: jlengstorf
- Created: 2022-05-30T07:04:59.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-11T14:30:19.000Z (almost 4 years ago)
- Last Synced: 2025-06-24T19:41:52.329Z (about 1 year ago)
- Topics: edge-computing, edge-functions, personalization
- Language: HTML
- Homepage: https://no-js-personalization.netlify.app/
- Size: 46.9 KB
- Stars: 13
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personalized UIs with No Client-Side JavaScript
This is an experiment with [Netlify Edge Functions](https://www.netlify.com/blog/announcing-serverless-compute-with-edge-functions/?utm_source=readme&utm_medium=github&utm_campaign=devex-jl) to show how we can create adaptive UIs without client-side JavaScript.
This example uses Edge Functions to set and read a cookie.
- Every time the user navigates to a new page on the site, the cookie is updated with a score for the type of content that was visited
- The score reflects an assumed interest in that category of content (more clicks === more interest is the assumption)
- When the home page is loaded, products are sorted so the most interesting show up first based on the user's current score
Try it out here: https://no-js-personalization.netlify.app/
## Local development
```sh
# clone the repo
git clone git@github.com:jlengstorf/no-js-personalization.git
# move into the folder
cd no-js-personalization/
# install dependencies
npm i
# install the Netlify CLI
npm i -g netlify-cli
# start the local dev server
ntl dev
```
## Stack
This demo uses:
- [Netlify Edge Functions](https://no-js-personalization.netlify.app/)
- [Netlify serverless functions](https://docs.netlify.com/functions/overview/) with [On-Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/#app)
- [Hasura Cloud](https://cloud.hasura.io/)
- [Unsplash](https://unsplash.com/) for images
- Plain HTML + CSS