listario-frontend

This UI is a frontend SvelteKit app, built as a companion to an API-driven service (listario-backend).

Tech stack

• TypeScript
• SvelteKit/Svelte
• SvelteStrap

Features

• Response UI (mobile + desktop)

Getting started

Native setup

1. Clone, move into directory and create your .env

git clone https://github.com/RLRama/listario-frontend.git
cd listario-frontend
cp .env.example .env
nano .env # then fill with valid API route

2. You can either:

   • Start development server

     • npm install
       npm run dev # you can use bun instead
       

   • Build a production version

     • npm run build
       npm run preview # preview the production build
       

3. Access the UI at http://localhost:5173/

To deploy your app, you may need to install an adapter for your target environment.

Environment variables

• See .env.example

Key takeaways

• Built reactive UI with SvelteKit, Typescript and SvelteStrap
• Learned how to manage the API contract from the frontend perspective

Roadmap

• Correct consumption of backend companion API
• Live deployment (on Vercel)
• Night mode
• i18n

License

Project licensed under MIT license.

Contact

Ramiro Ignacio Rios Lopez

LinkedIn - Email - GitHub - Personal website