App with highly customized UI, blazing fast load, latest streamlit features usecase and user experience at heart

[pascalo]

Dear Community,

I am currently developing a website to showcase my tech skills: from coding/ web design to data handling (highcharts,altair,seaborn) to investment.

The link to the Alpha version is here and it is running entirely on Streamlit! Be mindful that the site is running on my local machine so it is possible the site may not always be up and running.

Key Features

In terms of key features and components here is what I can say for now but I will come here and refine this list over time. It is a compilation of some of the best/cool stuff I have found around

• A blazing fast Welcome Page as shown above. Decoupled from the rest of the code, the welcome page runs with fully customized HTML I have designed:

  • Banner HTML Component reading text and data from a Google Spreadsheet and a Local Database. I basically just need to update my Google Spreadsheet to get the content on the Welcome page updated
  • Custom HTML Component: Video background loading blazing fast
  • Custom: Menu Bar Design in the footer

• Login/User Management: Module 101 OAuth integration with Gmail for now. This relies/forks on st_paywall for my need.
  

  

  • User can sign in and once signed in the entire UI menu changes a User Profile form needs to be completed the first time.
    

    

  • The menu is then personalized for the user once they have entered a few datas against their profile. This is where the power of session_state comes into play. I can re-use all user settings that I initialize in session state at each rerun. This personalizes the content menu that is now permissions based. Example below with the Portfolio Simulator Tool

    

  • Under development (but not prioritized): subscription module for users via stripe (optional I wish to keep things free and open for now)

  • Once logged in, custom Menu Bar using the Hydralit package so that we have a clear distinction when we are authenticated or not

• User Agent detection: personalize/get streamlit responsive on Mobile. Custom Solution I have documented in this streamlit discussion
  

• Bubbles: displaying the PNL of each of my position in my Investment Portfolio. Custom HTML Component created and integrating with Highcharts. Next: planning to add more bubbles viz

• Perf: Integration with eToro platform for my public eToro account, displaying key metrics in a nice “streamlit dashboard” fashion!

• News: Integration with Timeline JS Next is planning to do more research on how to nicely integrate Substack/Medium and start using them together with Streamlit

• Tools: lots of stuff there

  • integration with TradingView and various third-party data integration storing data in a local database
  • Integration with Google Calendar and automatically populating a Google Calendar in Python
  • Portfolio Simulation: data integration and possibility to create new investment models for the user to backtest some ideas.

• Contact: integration with Gmail

Technical Details: Illustration and Examples
(I will add more here with time)

Automatically resizing Streamlit Website widget/HTML Components based on User Agents

    st.session_state.user_agent = get_user_agent()
    st.session_state.is_mobile = not st.session_state.user_agent.is_pc if 
    st.session_state.user_agent is not None else False 
    resize_factor = 2
...
    st.session_state.w = 910
    st.session_state.h = 769
    if st.session_state.is_mobile:
        st.session_state.w /= resize_factor
        st.session_state.h /= resize_factor

Usage of Fragments/Dialog
I also plan to roll out more usage of Fragments and Dialog that I look forward to implementing for my Contact and.or Disclaimer modules for instance.

Usage of Query Params
I also started to heavily review my code with the query params which really provide so much flexibility to what to display and what to check for the users (example to know more about OPTI and Myself just access this link directly About me or go to the tools

Eventually, the site is designed for a user to follow their favourite investor on the eToro Social Trading Platform, follow my own investing journey and/or perform further research via some tools I have developed/currently developing.

Anyway, thanks for reading that far and any feedback is welcome! I will edit this post regularly as I add more things/thoughts.

Best,
Pascal

[TomJohn]

Nope

[pascalo]

fixed sorry was trying something!

Link to the app is here

[pascalo]

Started using Experimental Dialog for my Disclaimer Module example implementation

import streamlit as st
@st.experimental_dialog(title="Disclaimer",width="small")
def Disclaimer():
    str_disclaimer = """ :warning: **The OPTI Team** is providing this site and any related materials (including newsletters, blog post, videos, social media and other communications) [...] """
    st.warning(str_disclaimer)
    if st.button("OK"):
        st.query_params.clear()
        st.rerun()

You can see it live here

I am now also using it for my login page