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 :shipit: (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 👍