Fennorad

Welcome to Fennorad!

This is a project I am actively working on with separate pages with wildy different functionality.

Technology Used: Blazor Server, DotNet 8, Razor Pages, EFCore, Sql Server, C#, Javascript, HTML, CSS
User Profiles: This was accomplished by leveraging Microsoft Identity
Contiunous Deployment: Github Actions is used to deploy changes to the main branch of the project as well as database changeslink
Responsive UI: Bootstrap 5 is leveraged to style the UI and allow for responsive design that works on mobile and desktop.
Why Blazor?: Blazor is similar to React in terms of how components can be self contained and exported. It was a logical first step for me to venture into site building with a familiar C# background.

Overview: Chat with Claude a generative AI
Api Integration: Claude is served via an API by Anthropic. They have libraries for Python and Typescript but don't for C#. This was integrated via manually generated HttpClient requests.
UI: This page borrows UI elements from the other Chat tab but much less logic

Overview: Allows users to connect and have conversations
SQL Server: This particular piece of the project involved heavy SQL involvement. There are 5 tables leveraged for keeping track of user conversations, message history, and read receipts. DbUp is used to update the database tables to have some version control over changes.
UI: This page has the most UI heavy logic which includes: Collapsing the chat container for mobile, updating UI when messages have been received and then subsequently read, user search returning results instantaneously
How are new messages received?: There is a 15 second timer that gathers new messages for every user conversation. If a user has new messages the conversation tile will flash to indicate new messages. Once new messages are read then the conversation will no longer flash

Overview: This is an integration with Mapbox API that allows for users to get directions.
Fennorad.Mapbox: Mapbox API that has javascript libraries you can integrate with. Fennorad.Mapbox is a library I created to allow for easy integration with the Directions API within Mapbox as a Blazor component

Overview: This page allows users to search, watch, and download youtube videos.
Youtube Download: This used to leverage the youtube-dl project to be able to gather and download youtube videos. This required python to be installed in Azure and required a lot of manual manipulation of the production service. I recently pivoted to using YoutubeExplode a package that works out of the box in dotnet. This allows for either mp4 or mp3 download.
Embedded Videos: Youtube allows for embedding youtube videos plus I enabled casting (doesn't work on mobile)

Overview: This page allows users to take JSON/XML strings and makes them pretty.
Why does this matter?: I work with 3rd party APIs and when dealing with responses from code causes the returned objects to be minified. It helps to format the JSON/XML objects into a palatable format to properly asses the objects.

Overview: This page allows users to generate images using OpenApi's DALL-E 3.
Image Display & Download: If you generate more than one image it will be added to the image carousel. Can download image either by right clicking and saving or by clicking the download button.
Image Storage: Currently this project does not store generated images but have considered either storing as base64 encoded strings in a SQL Server table or in Azure Blob Storage

Questions? Reach out either via email (fernando.napier@gmail.com), Github, or LinkedIn