This is a application made for a job process. The challenge was to create a Phoenix LiveView Application based on a todo app from "Frontend Mentor".
Note: No database setup to make it easy to test locally, all my free tiers elixir servers are being used.
The challenge was to build out a todo app and get it looking as close to the design as possible.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Add new todos to the list
- Mark todos as complete
- Delete todos from the list
- Filter by all/active/complete todos
- Clear all completed todos
- Toggle light and dark mode
- Bonus: Drag and drop to reorder items on the list
-
Bonus: Fullstack application with database
This was my first time creating a Live View SPA. I think was a worth experience, is very interesting not use any JS, but I also think is too expensive to maintain an app with Live View, at least when you do not need it, like in this todo app.
I was struggling when thinking how I would test the frontend in a Live View application, but as always, elixir make it very easy.
Phoenix.LiveViewTest could have some other methods to query a element, but it stills is very useful.
- Phoenix LiveView
- HEEx
- CSS
Before to start, you will need have installed on your computer these programs:
Also is good have a code editor like VSCode.
In your terminal clone the repository and install the dependencies.
git clone https://github.com/ruanmoreiraofc/todo-app-live-view-elixir.gitcd todo-app-live-view-elixirmix deps.getNow see the result with:
mix testmix phx.serverIt will expose the app in localhost:4000
This project is under the MIT license. See the LICENSE for more information.
Made with ❤️ by Ruan Moreira de Jesus!
