Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EPIC] Create a Phoenix 1.5.3 Todo List App #36

Closed
2 tasks done
nelsonic opened this issue May 20, 2020 · 35 comments
Closed
2 tasks done

[EPIC] Create a Phoenix 1.5.3 Todo List App #36

nelsonic opened this issue May 20, 2020 · 35 comments
Assignees
@SimonLab
Labels
awaiting-review enhancement starter T1d technical

Comments

@nelsonic
Copy link
Member

nelsonic commented May 20, 2020 •
edited
Loading

Now that we have shipped auth and auth_plug,
We can build a far more realistic Todo List Tutorial
that will act as a showcase for both the simplicity of Phoenix
and the ease with which Auth can be added to any app using auth_plug.

My reasoning for prioritising this Tutorial is that it forms the basis for our App.
First and foremost our App is a "Todo List with integrated Time Tracking"
see: https://github.com/dwyl/product-roadmap
So if we can show people the Todo List part as a complete beginner's tutorial
with code that will be very similar to our App, then we can successfully "on board" people into contributing to our App. 💡

Todo

PR in progress awaiting-review: #35
@nelsonic
Copy link
Member Author

nelsonic commented May 21, 2020 •
edited
Loading

The update to Phoenix 1.5.1 is underway in dwyl/phoenix-chat-example#39 🧑‍💻
I will be pairing with @iteles on that PR for 1h/day in the evenings. 👩‍❤️‍👨

Meanwhile creating a brand new tutorial from scratch is a distinct/independent task.
I feel that this is important for showcasing how simple Phoenix and our Auth is!
So I'm going to work on it today.

@nelsonic nelsonic self-assigned this May 21, 2020
@nelsonic nelsonic mentioned this issue May 21, 2020
Merged
nelsonic added a commit that referenced this issue May 22, 2020
@nelsonic
mix phx.new app (Phoenix 1.5.1) #36
9ad2bff
nelsonic added a commit that referenced this issue May 22, 2020
@nelsonic
update version of Elixir & OTP in .travis.yml #36
c3968df
@nelsonic
Copy link
Member Author

todo-list-phoenix-default-ui-new-item

todo-list-phoenix-default-ui-show-item

todo-list-phoenix-default-ui-show-items-list

nelsonic added a commit that referenced this issue May 22, 2020
@nelsonic
add instructions and links for step 2.1 (add resources to router.ex) #36
cfd8ab7
@nelsonic
Copy link
Member Author

https://todomvc-app.herokuapp.com
image

@nelsonic
Copy link
Member Author

http://todomvc.com/examples/vanillajs
image

nelsonic added a commit that referenced this issue May 22, 2020
@nelsonic
add TodoMVC HTML for step 3 #36
fdc6429
@nelsonic
Copy link
Member Author

edit-as-html

@nelsonic
Copy link
Member Author

Once the HTML for the <section> is editable, select it and copy-paste it.
todomvc

todomvc-html-editable-copy

@nelsonic
Copy link
Member Author

TodoMVC without the TodoMVC styles:
before-adding-css

nelsonic added a commit that referenced this issue May 23, 2020
@nelsonic
add dummy TodoMVC code to index.html.eex for step 3.1 #36
bddacda
@nelsonic
Copy link
Member Author

With the layout template saved, your /items page should now look like this:
items-with-todomvc-css

nelsonic added a commit that referenced this issue May 23, 2020
@nelsonic
update layout template to include TodoMVC CSS step 3.2 #36
1d91980
nelsonic added a commit that referenced this issue May 23, 2020
@nelsonic
add complete/1 and checked/1 view functions to lib/app_web/views/item…
9147b06 
…_view.ex step 3.3 of #36
nelsonic added a commit that referenced this issue May 23, 2020
@nelsonic
update item template in templates/item/index.html.eex #36
8425bc8
@nelsonic
Copy link
Member Author

Now that we are rendering the actual items it looks like this:
image

nelsonic added a commit that referenced this issue May 23, 2020
@nelsonic
Step 4: create test/app_web/views/item_view_test.exs to test view fun…
031df40 
…ctions #36
nelsonic added a commit that referenced this issue May 23, 2020
@nelsonic
add default values for person_id and status in lib/app/ctx/item.ex #36
cc28797
nelsonic added a commit that referenced this issue May 23, 2020
@nelsonic
simplify new item form template to just :text field #36
3d5f181
@nelsonic
Copy link
Member Author

If you run the Phoenix App now and visit http://localhost:4000/items/new you will see the single :text input field:
image
However if you attempt to submit it you will see an error.

@nelsonic
Copy link
Member Author

Footer hidden when there are no items:
phx-todo-footer-hidden

@nelsonic
Copy link
Member Author

Default home page:
page_template

@nelsonic
Copy link
Member Author

Todo app on Home page:
todo-app-on-homepage

nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
Step 11.2 Update / (default route) to invoke ItemController #36
82f9070
nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
delete all Page related files (Controller, View, Template & Test) as …
0c25dd4 
…no longer used #36
nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
create elixir_buildpack.config with latest Elixir/OTP for Heroku deploy
dccf482 
#36
nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
enable prod.secret.exs for heroku deploy #36
2597244
nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
add engine directive to package.json to use Node v12 on heroku #36
805e437
nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
add node_version=12.17.0 to elixir_buildpack.config for heroku deploy #…
407fc68 
…36
@nelsonic
Copy link
Member Author

Heroku version:
todo-app-heroku-version

@nelsonic
Copy link
Member Author

Final version running on localhost:
phoenix-todo-list-on-localhost

nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
add final GIF of running the app on localhost #36
2de0326
@nelsonic
Copy link
Member Author

PR is ready to review: #35

@nelsonic nelsonic assigned SimonLab and unassigned nelsonic May 29, 2020
@nelsonic
Copy link
Member Author

Decided that Ctx was more confusing than just calling the Context "Todo" so re-named it:
image

nelsonic added a commit that referenced this issue May 29, 2020
@nelsonic
Rename "Ctx" to "Todo" so the Contenxt has more meaning #36 (comment)
88a94a6
nelsonic added a commit that referenced this issue May 30, 2020
@nelsonic
reorder the steps in section 3 #36
d14cdf1
@nelsonic nelsonic changed the title [EPIC] Create a Phoenix 1.5.3 Todo List App with Auth [EPIC] Create a Phoenix 1.5.3 Todo List App Jun 1, 2020
@nelsonic
Copy link
Member Author

nelsonic commented Jun 3, 2020

PR #35 reviewed, improved and merged by @SimonLab 🚀

@nelsonic nelsonic closed this as completed Jun 3, 2020
HotategaiDev added a commit to HotategaiDev/phoenix-todo-list-tutorial- that referenced this issue Dec 4, 2023
@HotategaiDev
add debug code to app.scss see: dwyl/phoenix-todo-list-tutorial#36 (c…
a7b1568 
…omment)
HotategaiDev added a commit to HotategaiDev/phoenix-todo-list-tutorial- that referenced this issue Dec 4, 2023
@HotategaiDev
add explanation of Why double-click to edit is needed and link to CSS d…
ef9ad6d 
…wyl/phoenix-todo-list-tutorial#36 (comment)
HotategaiDev added a commit to HotategaiDev/phoenix-todo-list-tutorial- that referenced this issue Dec 4, 2023
@HotategaiDev
Rename "Ctx" to "Todo" so the Contenxt has more meaning dwyl/phoenix-…
3548eef 
…todo-list-tutorial#36 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@SimonLab SimonLab

Labels
awaiting-review enhancement starter T1d technical
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nelsonic @SimonLab