TL; DR
Echos d’Autre Part (Echoes of Elsewhere) is a french-language modern Web Novel in the form of a PWA that allows for platform-exclusive features, like light/dark mode no-distraction reading, offline caching, automatic ToC revealing, new episode web-push notifications, and an evolving map.
It’s entirely static and is made with Google’s Lit as a Webcomponent thin layer and native web APIs.
About the project
This project is a web novel but also a PWA that was intended to provide an enjoyable reading experience on the web: light and dark modes, offline reading and memory of last episode read, with a table of contents and summary of past episodes, that uncover depending on your progress, and a map that uncovers as you read.
It’s about a part of the city of Nantes, France, and teleported into an unknown world. The narration changes from one episode to the other, letting you see the point of view of different characters.
My work on the project
I built the PWA using Lit as a front-end framework, and a custom script builds it on the back-end. The site is entirely static and each new episode is generated out of markdown text and meta-data. It’s hosted on a Raspberry Pi at home, and the lightness of the app and of its content make it ideal for slow connections – it also does not saturate my home network (it’s not that popular, but you never know, it might be one day! 😅)
As part of the PWA, the app features :
- A static, local-first shell with all the required code and features
- A manifest for system installation
- A fetching and caching system for the episode list and new episodes
- Progress persistence in between visits
- Push notifications 🔔 for new episodes
- Switchable Light ☀️ and dark 🌙 themes
- A colorful logo animated using SVG and some Javascript code
- A table of content with summaries of the episodes that you read already and spoiler tags on the rest
You can try it for yourself on the website itself (🇫🇷). Don’t hesitate to reach out if you like reading it!