@dwyl App MVP 💡 ⏳ ✅

The most basic version of the @dwyl App MVP feature set.

Please try it: mvp.fly.dev 🙏

And help us to ...

• @dwyl App MVP 💡 ⏳ ✅
• Please try it: mvp.fly.dev 🙏
• Why? 🤷‍♀️
• What? 💭
  • MVP? 🚧
  • Two Apps in One ✌️
    • Proposed MVP UI/UX 💡
• Who? 👥
  • Feedback! 🙏
    • Perform Some Actions in the App 📱
• How? 💻
  • Tech Stack? 🧰
  • Run the MVP App on your localhost ⬇️
  • Build It! 👷‍♀️
  • Contributing 👩‍💻
    • More Features? 🔔

Why? 🤷‍♀️

Our goal with this MVP is to build the minimal usable App
that covers our basic "Capture, Categorize, Complete" workflow.
It is well-documented, tested and easy for a beginner to run & understand.

We shipped the App to Fly: mvp.fly.dev and use/test it (internally).
After collecting initial feedback, we will integrate it into the main dwyl/app repo.
We maintain this repo as a reference for new joiners
wanting the most basic version to learn from.

What? 💭

A mobile-first hybrid task and activity (time) tracking tool.

MVP? 🚧

A Minimum Viable Product (MVP), as its' name suggests, is the minimum we can do to test the idea.

If you're new to MVPs, the Wikipedia article is a good starting point: wikipedia.org/wiki/Minimum_viable_product
Or listen to Eric Ries describe it in 3 minutes: https://youtu.be/1FoCbbbcYT8
Validate your business idea: THE LEAN STARTUP by Eric Ries: https://youtu.be/QaoVWtLX038
Building Minimal Viable Product with Michael Seibel UC Berkeley Course: https://youtu.be/m4isFputh68?t=75
How Not To Start A Startup | Michael Seibel: https://youtu.be/9tq-lTjTu2Q?t=413

Two Apps in One ✌️

We've found it tedious to use several separate apps for task and time tracking 🤦‍♂️
and think it's logical to combine the functionality. This MVP combines two apps into one. 💡

In our journey to understand the features we want from first principles, we built the two separate apps:

1. Todo list: github.com/dwyl/phoenix-liveview-todo-list
2. Stop Watch (Timer): github.com/dwyl/phoenix-liveview-stopwatch

We encourage you to read and understand the individual feature Apps before trying to run the MVP. 👀
But our hope is that the UI/UX in the MVP is sufficiently intuitive that it immediately makes sense. 🤞

Proposed MVP UI/UX 💡

This is our wireframe UI/UX we used as the guide to create the MVP functionality:

The idea is a todo list that tracks how much time we spend on a task.

It's deliberately "basic" and "ugly" so we don't focus on aesthetics. 🚀
It will definitely change over time as we use the App and collect feedback. 💬
If you want to help make it better, share your thoughts! 🙏

More detail on the MVP features: dwyl/app/issues/265

Who? 👥

This MVP has two target audiences:

1. @dwyl team to "dogfood" the basic workflow in our App.
   It's meant to work for us and have just enough functionality to solve our basic needs.

2. Wider community of people who want to see a fully-functioning Phoenix app with good documentation and testing.

Longer term, the MVP will help future @dwyl team members get up-to-speed on our App & Stack much faster.

Feedback! 🙏

Your feedback is very much encouraged/welcome! 💬
If you find the repo interesting/useful, please ⭐ on GitHub.
And if you have any questions, please open an issue: app-mvp/issues ❓

Perform Some Actions in the App 📱

Please visit mvp.fly.dev (or run the app on your localhost - see below)
and perform some actions to test the App:

1. Create a todo list item;
   

   Note: this item is public (anyone can see it!)
   If you want private items you need to login.

2. Start a timer for the (public) item
3. Stop the timer for the item (press start)
4. Mark the item as done (press/tap the checkbox to the left of the item.text)
5. Click on the done tab and archive the item (it will disappear)
6. Click on the archived tab and you will see your archived item
7. Create a new (public) item.
8. Start a timer for the (public) item and leave it running
9. Login using your GitHub or Google account.
10. Create a todo list item while logged-in with a tag.
11. Start a timer for the item
12. Stop the timer
13. Resume the timer that you just stopped.
14. Create a new (private) todo list item while logged-in with a different tag
15. Start a timer for the item
16. Open a second web browser and watch the realtime sync!
17. Click on the first private item tag and see the filtered list of items with that tag
18. Click on the active tab or go back in the browser
19. Mark the first item you created as done
20. Edit the remaining item text for the timer that is already running.
21. Mark the (private) item as done and see the time it took.
22. Archive the item
23. Click on the tags label on the navbar to check the tags created.
24. Go back
25. Logout of the app
26. View the (public) item you created earlier with the timer still running.

That's it. The MVP in a nutshell. Here's a GIF if you're low on time:

The GIF showcases the (todo list) items, tag filtering and timers being synched across 2 browsers (one desktop and another mimicking mobile) in realtime.

How? 💻

Our goal is to document as much of the implementation as possible, so that anyone can follow along.

If you spot a gap in the docs, please let us know!

Tech Stack? 🧰

This MVP app uses the PETAL Stack described in: dwyl/technology-stack

Going through the individual feature apps listed above will give you the knowledge to understand this MVP.

If you have any coding skills (e.g: JavaScript, Java, Python, Ruby, PHP, SQL, etc.)
you will be able to follow along without much difficulty as the code is deliberately simple.

Run the MVP App on your localhost ⬇️

Note: You will need to have Elixir and Postgres installed,
see: learn-elixir#installation and learn-postgresql#installation

Tip: check the prerequisites in: /phoenix-chat-example

On your localhost, run the following commands in your terminal:

git clone [email protected]:dwyl/app-mvp.git && cd app-mvp
source .env_sample
mix setup

That will load up the necessary env variables to run the app, download the code, install dependencies, and create the necessary database + tables.

The line source .env_sample loads the environment variables required to run the App.

Once the mix setup command completes, you can run the app with:

mix s

Open the App in your web browser localhost:4000 and start your tour!

Build It! 👷‍♀️

If you want to understand how to build the MVP, please see: BUILDIT.md

Contributing 👩‍💻

All contributions from typo fixes to feature requests are always welcome! 🙌

Please start by:
a. Star the repo on GitHub so you have a "bookmark" you can return to. ⭐
b. Fork the repo so you have a copy you can "hack" on. 🍴
c. Clone the repo to your localhost and run it! (see below) 👩‍💻

For more detail, please see: dwyl/contributing

More Features? 🔔

Please note that our goal with this MVP is not to have all the features; again, it's deliberately simple.
We will be adding lots more features to the full App.
If you have feature ideas, that's great! 🎉
Please share them: app/issues