Elm eCommerce
ππππππππππππππ₯
A simple eCommerce demo application in 2,500 lines of Elm code, all shrank into 40KB of JavaScript, including styling and icons.
Characteristics
- Responsive
- Cart and Favorites management
- Persistent (local storage)
- Synced across tabs
- Light / Dark mode
- Bilingual
- Searchable/Sortable results
- Dashboard (+1,100 lines of Elm)
- Atomic design
- Fault tolerant
It is made of
2,500 lines of Elm
0 lines of CSS
25 lines of JavaScript
15 lines of HTML
Links
- The app demo: https://elm-ecommerce.guupa.com
- The app + The dashboard demo: https://elm-ecommerce-dashboard.guupa.com
- The app demo in Ellie: https://ellie-app.com/d2dKW5XHVcCa1
- The code: https://github.com/lucamug/elm-ecommerce
- Illustrations (γγγγ¨γ): https://www.irasutoya.com/
- Icons: https://feathericons.com/
Prerequisites
Install Node.js.
All other commands should work without installation as they are using npx
. In case there are some issues you can install the required application executing:
Optional installations for the development
npm i -g elm@0.19.1-5
npm i -g elm-go@5.0.12
Optional installations for building the optimized version to be released
npm i -g terser@5.7.0
To set up the development environment
git clone https://github.com/lucamug/elm-ecommerce.git
cd elm-ecommerce
cmd/start
Then access http://localhost:8000/
Edit src/Main.elm
and the browser will update automatically.
To start the Dashboard
cmd/startDashboard
Then access http://localhost:8001/
Edit src/Dashboard.elm
and the browser will update automatically.
To build an optimized version
cmd/build
This will create two folders, build/normal
and build/dashboard
that can be used to publish the application.
You can see these two versions of the application here: