All Projects → lipp → Next Todos

lipp / Next Todos

Licence: mit
200 lines realtime todos app powered by next.js, preact, jet, redux and now

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Next Todos

Wsify
Just a tiny, simple and real-time self-hosted pub/sub messaging service
Stars: ✭ 452 (+286.32%)
Mutual labels:  websockets, realtime
Stl.fusion
Get real-time UI updates in Blazor apps and 10-1000x faster API responses with a novel approach to distributed reactive computing. Fusion brings computed observables and automatic dependency tracking from Knockout.js/MobX/Vue to the next level by enabling a single dependency graph span multiple servers and clients, including Blazor apps running in browser.
Stars: ✭ 858 (+633.33%)
Mutual labels:  websockets, realtime
Vue Socket.io Extended
✌️⚡️ Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io)
Stars: ✭ 506 (+332.48%)
Mutual labels:  websockets, realtime
React Storefront
React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor ([email protected]).
Stars: ✭ 292 (+149.57%)
Mutual labels:  nextjs, preact
Socketcluster Server
Minimal server module for SocketCluster
Stars: ✭ 70 (-40.17%)
Mutual labels:  websockets, realtime
Angelo
Sinatra-like DSL for Reel that supports WebSockets and SSE
Stars: ✭ 303 (+158.97%)
Mutual labels:  websockets, realtime
Supabase
The open source Firebase alternative. Follow to stay updated about our public Beta.
Stars: ✭ 25,142 (+21388.89%)
Mutual labels:  websockets, realtime
chat-with-deno-and-preact
Chat app with Deno + Preact
Stars: ✭ 27 (-76.92%)
Mutual labels:  preact, websockets
Blaze
⚡ File sharing progressive web app built using WebTorrent and WebSockets
Stars: ✭ 991 (+747.01%)
Mutual labels:  websockets, preact
Channelslightscontrol
Demo app with Django Channels to control Lights over websockets. Made for PyStPete meetup(https://www.meetup.com/Saint-Petersburg-Python-Meetup/).
Stars: ✭ 14 (-88.03%)
Mutual labels:  websockets, realtime
React Storefront
Build and deploy e-commerce progressive web apps (PWAs) in record time.
Stars: ✭ 275 (+135.04%)
Mutual labels:  nextjs, preact
Sandstone
PHP microframework designed to build a RestApi working together with a websocket server. Build a real time RestApi!
Stars: ✭ 98 (-16.24%)
Mutual labels:  websockets, realtime
Next Super Performance
The case of partial hydration (with Next and Preact)
Stars: ✭ 272 (+132.48%)
Mutual labels:  nextjs, preact
Sapphiredb
SapphireDb Server, a self-hosted, easy to use realtime database for Asp.Net Core and EF Core
Stars: ✭ 326 (+178.63%)
Mutual labels:  websockets, realtime
Pushpin
Proxy server for adding push to your API
Stars: ✭ 3,050 (+2506.84%)
Mutual labels:  websockets, realtime
Styled Components Website
The styled-components website and documentation
Stars: ✭ 513 (+338.46%)
Mutual labels:  nextjs, preact
bong-bong
Open public chat service built for the web.
Stars: ✭ 17 (-85.47%)
Mutual labels:  websockets, realtime
theodorusclarence.com
💠 Personal website and blog made using Next.js, TypeScript, Tailwind CSS, MDX Bundler, FaunaDB, and Preact.
Stars: ✭ 205 (+75.21%)
Mutual labels:  preact, nextjs
Next Translate
Next.js plugin + i18n API for Next.js 10 🌍 - Load page translations and use them in an easy way!
Stars: ✭ 867 (+641.03%)
Mutual labels:  nextjs, preact
Codeigniter Ratchet Websocket
This library contains the demo of commenting/posting realtime using CodeIgniter+AngularJS+Ratchet PHP Websocket
Stars: ✭ 84 (-28.21%)
Mutual labels:  websockets, realtime

next-todos

About 200 lines isomorphic todos app powered by next.js, redux and Jet realtime.

The todos are synced between browsers.

Live

The canonical TodoApp using node-jet as realtime data backend mechanism. Jet uses websockets for fetching/streaming the data and to make changes to the data. Redux and redux-jet are used for a clear and simple unidirectional data flow.

next.js allows to easily make the server -> client render transition (awesome!!!).

redux-jet hides the stateful nature of the realtime streaming (where differences are pushed over the wire) and helps doing the isomorphic transition with get and fetch seamlessly.

It's note worthy, that the redux store is identical for server and client js code! The only difference is that the store population on the server is triggered by the "finite" redux-jet get whereas the client issues an "infinite / streaming" redux-jet fetch

The components are jet-agnostic. All the jet related stuff is located in containers dir and store.js.

Server

The server source can be found here (90 Lines extra).

Inspect with Radar

Radar provides another view on the realtime data which is provided by a Jet Daemon running on todos-demo.now.sh.

Enter this daemon url: wss://todos-demo.now.sh

Developing

npm run dev

Production

npm run build
npm start

Not covered

  • Authentication / session
  • Scaling

Related

100 lines of code Hackernews reader using next.js and graphql.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].