Getting Started

Goal

This snapshot advances Emberquay Market by teaching you to boot Phoenix with LiveView on port 4002.

Every numbered folder is a complete app. Run this stage independently, then compare it with the previous folder.

Prerequisites

Use Elixir 1.15+, Mix, Node.js 20+, and Docker for Postgres stages.

Port 4002 must be free. Copy .env.example before database stages.

• Elixir and Mix
• Node.js and npm
• Docker from part 4 onward

Concepts

Phoenix boots an HTTP server; LiveView drives interactive storefront UI; Tailwind styles the chrome.

LiveView keeps interactive UI on the server; Tailwind styles the storefront; Ecto owns persistence and authorization checks.

Walkthrough

Confirm the health endpoint and storefront home load together.

Read the example, then open the matching snapshot. The repository includes validation, CSRF, and the surrounding structure.

get "/health", StoreController, :health
# GET /health → {"ok":true,"store":"Emberquay Market"}

Run and verify

Enter 01-Getting-Started, mix deps.get, copy .env.example, migrate, seed, and start Phoenix on port 4002.

Open http://127.0.0.1:4002. From data lessons onward, Ada and Grace use password123.

git clone https://github.com/michaeldunga1/fcc-phoenix-ecommerce.git
cd fcc-phoenix-ecommerce/01-Getting-Started
mix deps.get
npm --prefix assets install
cp .env.example .env
mix ecto.setup
mix phx.server

Troubleshooting

If the browser cannot connect, confirm the process is still listening on 4002.

For database failures, confirm Docker and the ember_NN name. Never commit .env, _build, deps, or node_modules.

• Read the first exception first
• Rebuild assets after Tailwind class changes
• Never commit secrets

Try this

Change the store name in config and confirm it appears on the home page.

Test a happy path and one invalid or unauthorized request.

• Make one small change
• Test it in the browser
• Compare with the next snapshot only after it works