As the next step in the process for the Full-Stack Engineer role at Reel, we'd like you to complete this project. We'll use your solution to get a better understanding of how you approach a technical challenge. Your solution will be the starting point for the technical interview. The project is a small representation of the kind of work we do at Reel.

Our customers use our platform to monitor their energy consumption across multiple locations. They need a view that gives them a clear overview of their hourly consumption data, so they can spot patterns, compare locations, and identify anything out of the ordinary.

The function get_consumption_readings/0 in the Consumption module (lib/consumption.ex) returns a list of hourly consumption readings across multiple locations. Each reading is a ReelApp.Consumption.ConsumptionReading struct. Take a look at the struct and data to see what fields are available.

We expect the project to take 2-3 hours to complete. You are always welcome to reach out to us if something needs clarification.

Build a page that displays the consumption data in a useful way. The page should be rendered by the ReelAppWeb.Consumption.ConsumptionLive module (lib/reel_app_web/consumption/consumption_live.ex), which has already been created.

Add at least one way for the user to interact with or manipulate the data. Here are some ideas for inspiration — pick what interests you, a focused solution that does a few things well is better than a rushed attempt at everything:

• Format and style the data — number formatting, conditional styling for different statuses
• Add controls — sorting, filtering by location or status, timezone selection (the data is in UTC)
• Summarize — totals, averages, peak hours at a glance

Write a short (1200 characters max) explanation of your approach, the trade-offs you made, and what you would improve with more time. Fill in the NOTES.md file.

You can find interface components in the ReelAppWeb.CoreComponents module (lib/reel_app_web/components/core_components.ex). This includes basics like tables, forms, buttons, and inputs, as well as a stat_card and badge component. You're free to use these, modify them, or build your own.

The project also includes daisyUI, a Tailwind CSS component library with ready-to-use UI components. You can use daisyUI classes directly in your templates. You're also welcome to install additional libraries if they help you.

This project uses Elixir and Erlang. If you don't have them installed, the easiest way is with asdf:

# Install the Erlang and Elixir plugins
asdf plugin add erlang
asdf plugin add elixir

# Install the versions specified in .tool-versions (this may take a few minutes)
asdf install

# Verify it worked
elixir --version

Once Elixir is installed:

1. Run mix setup to install and setup dependencies
2. Start the Phoenix server with mix phx.server
3. Visit localhost:4000 in your browser

To run tests: mix test

1. Clone this repository locally
2. Develop your solution
3. Once you're done, create a zip of the main folder and name it <your_name>.zip
4. Send the zip file to [email protected]

We focus on three main points in our evaluation:

1. The quality and structure of the code, and the layout of the interface.
2. How you solved the task. There are many ways to approach a task like this.
3. Your reasoning about choosing this solution.

• Phoenix framework
• Phoenix guides
• Phoenix LiveView
• Assigns and HEEx templates
• LiveView lifecycle
• Tailwind CSS v4
• daisyUI v5