RuanMoreiraOfc / todo-app-live-view-elixir

This is a application made for a job process.

Phoenix LiveView
Frontend Mentor - Todo app

ENGLISH | PORTUGUÊS | 日本語

About

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

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

:hacker_cat: My experience

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.

📷 Screenshots

📐 Technology

• Phoenix LiveView
• HEEx
• CSS

🔌 Requirements

Before to start, you will need have installed on your computer these programs:

• Git
• Elixir

Also is good have a code editor like VSCode.

💡 Do it by yourself

Cloning

In your terminal clone the repository and install the dependencies.

- to clone the repository

git clone https://github.com/ruanmoreiraofc/todo-app-live-view-elixir.git

- to enter into the folder

cd todo-app-live-view-elixir

- to install the dependencies

mix deps.get

Usage

Now see the result with:

- to test the project

mix test

- to run the server

mix phx.server

It will expose the app in localhost:4000

⚖️ License

This project is under the MIT license. See the LICENSE for more information.

👦 Author

Made with ❤️ by Ruan Moreira de Jesus!