Custom Svelte Chat UI/UX Connected to Python/Flask API

Developed custom Chat UI/UX web app to showcase client's backend AI API.

Web app was developed from scratch using latest versions of Svelte, Sveltekit, TailwindCSS, along with some UI elements from Preline UI.

start with basic functionality and design - keep it clean and "generic" so it can serve up demo experiences for various clients

leverage familiar chat interface and UX elements, i.e. "don't reinvent the wheel"

all reactivity leverages standard Svelte features

dynamic routing so that the last part of the URL is passed as a param to the API, driving the context for the chat

fully responsive so it works same on mobile as on desktop

Work completed included creating net new Svelte web app, researching and deciding on best design approach, starting point.

While the web app leveraged the "AI Prompt" design from Preline UI, much work was needed to componentize the design and add in all reactivity, communication with API, session management, and flow of data.

Client desired professional cloud hosting to establish a sound foundation for future iterations and growth. Likewise, continuous integration and deployments (CI/CD) were desired to facilitate iterative development and ongoing enhancements.

Client requested app to be hosted in their Azure account - this was a net new addition for the client.

I did all setup, configuration, etc... for the Azure Web App

Deployments were setup to happen automatically upon code commits to GitHub repo

Dev instance deploys from code commits to Dev branch

Merges to Main branch trigger deployments to Prod Azure instance

Also setup Azure hosting and CI/CD deployments for the Python / Flask API (will add as separate project here on Contra).

Developed API endpoint for testing to mimic the JSON data structure

Collaborated on API data structure, i.e. how to structure data elements for easy consumption by front-end code

Added logging library (loguru) to Python/Flask app. Documented usage and met with Developers to demo and discuss.