Build a Realtime Collaborative Calculator 🧮

[nelsonic]

@MikeRund stoked that you proactively started building a calculator in LiveView to continue your knowledge quest! 🎉
Looks like you've already got something working on your localhost which is sick! 🧮 🚀
Don't want to hijack your work, just encourage to continue learning and build something awesome! 😍

Todo ✅

Please:

• add your code to this repo ➕
• borrow the .github directory from one of the other tutorials/examples e.g: https://github.com/dwyl/phoenix-chat-example/tree/main/.github so that tests run on GitHub Actions CI. 🧪
• work on the main branch and push commits as you go. ⚠️ (we don't tend to work on main in practice but it's fine in this case because you are moving fast and are the only one working on it!)
• Write tests so that you get 100% coverage see: https://github.com/dwyl/phoenix-chat-example?tab=readme-ov-file#13-what-is-not-tested (which I think you went through when you were learning Phoenix... 🤞 ) 100% coverage is our baseline for tutorials/examples and all our open source projects.
• Write-up as much as you can as if you wanted someone else to follow it from scratch. 📝 (go into as much detail as you want/need)
• Deploy to: https://fly.io/dashboard/dwyl-liveview-calc (fly.io is still the easiest/fastest way to deploy a demo Phoenix app)

History ◀️

• Show the history of the calculations that the person has performed in a side-panel. ↪️
  • should only become visible once they have peformed their first calc. 1️⃣
  • History should be session-based i.e. only visible to the person in their current web browser. 📱 (if you can make it mobile-first whereby the history appears under the calculator and to-the-side if the viewport is big enough, that's great design)

Note: later this could be auth-based i.e. if a person authenticates they can see their calculator history. 🔒
Again, Auth should be relatively straightforward to add: https://github.com/dwyl/phoenix-chat-example/blob/main/auth.md
but definitely not a priority. Just take this as far as you want to for your own learning. 👌

Bonus Level: Make it collaborative! 👥 👾

When the page loads, create an empty record for the calculation e.g: /calc/420
Put a share link somewhere on the page 🔗
When the person who created the calculation shares it with someone else they can see the result of the calc.
If either of them modify the calc it should create a new version of the calc e.g: /calc/420/1, /calc/420/2 etc.
Showing the history of this calc as a nested list.
e.g:

• 2 + 2 = 4
  • 2 + 2 / 3 = 2.66666666667
  • 2 + 2 / 3 x 3.14 = 4.0933

I have often wanted to share a the result of a calculation with team members either in the workshop/building-site
or just in home/life stuff. always end up having to create a note and share that which feels tedious.
If I had a way of sharing a link to a specific calculation it would be awesome.
and even more if I could add a small (e.g. 140char note for the calc explaining what it is.

• Allow naming the calculation by adding a name variable to the record.
• Create a desc field that allows entering a short description for the calculation.

@MikeRund LMK your thoughts. 💭 💬 🙏

[asntc]

@MikeRund if you push up your initial code I can help test it. 😄

[MikeRund]

That'd be great thank you! Writing and testing functions with this tech stack definitely has a learning curve. I'll just tinker with a couple of things and I'll push 👍

[nelsonic]

@MikeRund checkout https://fly.io/docs/elixir/getting-started/ for deploying to Fly.io so CI stops complaining.

https://fly.io/docs/flyctl/install/#windows should take you T25m and is good to know how Fly deploy works.
You can create a "Dev" Postgres instance to store data during the fly launch; will still be free tier.

[MikeRund]

I'll have a look!

[asntc]

https://phoenix-liveview-calculator.fly.dev

working but UI is a bit off ... 🥴

[nelsonic]

@MikeRund please git push your latest changes when you get a minute.
Very keen to learn from your progress. 🤓

[MikeRund]

History update has been pushed 🫸