Elixir, Graphql, Vite Todo App Tutorial

A beginner step-by-step guide to building a simple todo app utilizing an Elixir backend, Graphql API, and Vite/React frontend.

About the Project

Elixir is a really powerful tool that has been out for several years. Though Elixir has a great frontend framework in Phoenix and Liveview, some developers aren't familiar with building an app in this framework. This tutorial exposes how to get started with Elixir while still having the ability to utilize Typescript and React on the frontend.

Prerequisites

Before you get started, there are a few things you should have installed on your system.

• Postgres
• Erlang
• Elixir
• Node package manager: pnpm, npm, or yarn

Running the finished app locally

If you want to check out the finished Todo app locally make sure you have the prerequisites above and follow these steps:

Clone the repo

git clone [email protected]:headwayio/todo_ex_vite.git && cd todo_ex_vite

Create the database, install dependencies, and seed the initial user data

mix setup

Run the backend

mix phx.server

Run the frontend

cd frontend && pnpm run dev

You should now be able to visit the following urls to play with the application:

GraphQL API: http://localhost:4000/graphiql

Frontend: http://localhost:5173