Create app.py

app.py

@@ -0,0 +1,205 @@
+import streamlit as st
+import random
+
+# Markdown data for insights
+markdown_data = {
+    "python": """
+    ### Python - Top 10 Code Tips 🐍
+    
+    1. **Use virtual environments**: Keep dependencies isolated with `venv` or `conda`. 🛠️
+    2. **Utilize type hints**: Use Python's typing system for better code clarity and maintainability. 🖋️
+    3. **Leverage list comprehensions**: Write cleaner, more efficient loops. 🌀
+    4. **Avoid mutable default arguments**: Use `None` instead of mutable objects as function defaults. 🚫
+    5. **Use generators for large data**: Save memory with generator expressions and `yield`. 💡
+    6. **Understand the difference between `==` and `is`**: Use `is` for identity checks, `==` for equality. 🔍
+    7. **Use `enumerate()`**: Replace traditional `for` loops when needing indices. 🧮
+    8. **Try `dataclasses`**: Simplify class creation with Python’s `dataclass` decorator. 🏗️
+    9. **Use `f-strings`**: Format strings efficiently using `f"{value}"`. ✨
+    10. **Write unit tests**: Test your functions with `unittest` or `pytest`. ✅
+    """,
+    
+    "streamlit": """
+    ### Streamlit - Top 10 Code Tips 🎛️
+    
+    1. **Use `st.cache_data` for caching**: Cache expensive operations to speed up your app. ⚡
+    2. **Utilize the session state**: Store data between reruns with `st.session_state`. 🔄
+    3. **Leverage components**: Integrate React components with `streamlit-component-template`. 🧩
+    4. **Write custom widgets**: Expand functionality by creating custom Streamlit widgets. 🛠️
+    5. **Use layout options**: Design better apps with `st.columns` and `st.expander`. 📐
+    6. **Use interactive sliders**: Create smooth user interactions with `st.slider()`. 🎚️
+    7. **Handle forms properly**: Use `st.form()` for input forms to optimize reactivity. 📄
+    8. **Progress feedback**: Show progress with `st.progress()` and `st.spinner()`. 🔄
+    9. **Embed HTML**: Enhance apps with `st.markdown()` using HTML inside markdown. 🌐
+    10. **Deploy easily**: Use `streamlit.io` for one-click deployment. 🚀
+    """,
+
+    "typescript": """
+    ### TypeScript - Top 10 Code Tips 💻
+    
+    1. **Use type annotations**: Always annotate variables and function return types. 📝
+    2. **Prefer interfaces over types**: Interfaces can be extended more easily than types. 💪
+    3. **Use union and intersection types**: Combine types in flexible ways with `|` and `&`. 🛠️
+    4. **Utilize generics**: Write reusable functions and components with generics. 🔄
+    5. **Avoid `any`**: Avoid using `any` type unless absolutely necessary. 🚫
+    6. **Leverage optional chaining**: Safely access deeply nested properties. ❓
+    7. **Use `readonly` for immutability**: Enforce immutability with `readonly`. 🔒
+    8. **Utilize `never` type**: Use `never` for unreachable code paths and exhaustive checks. 🚧
+    9. **Understand narrowing**: Use control flow analysis to narrow down types. 🧮
+    10. **Enable strict mode**: Always turn on strict mode for better type safety. 🛡️
+    """,
+
+    "react_native": """
+    ### React Native - Top 10 Code Tips 📱
+    
+    1. **Use `StyleSheet`**: Organize and optimize styles with `StyleSheet.create`. 🎨
+    2. **Avoid inline styles**: Use stylesheets for reusability and performance. 🖌️
+    3. **Leverage Flexbox**: Design responsive layouts with Flexbox. 📐
+    4. **Handle platform-specific code**: Use `Platform` module for OS-specific logic. 🛠️
+    5. **Optimize images**: Use `Image` and `ImageBackground` components efficiently. 🖼️
+    6. **Utilize hooks**: Use hooks like `useEffect` and `useState` for state management. 🌀
+    7. **Use third-party libraries**: Incorporate libraries like `react-navigation` and `redux`. 📚
+    8. **Optimize for performance**: Avoid unnecessary re-renders using `React.memo` and `useCallback`. 🏎️
+    9. **Handle gestures properly**: Use `react-native-gesture-handler` for gesture-based navigation. 📲
+    10. **Utilize TypeScript**: Combine React Native with TypeScript for safer code. 💻
+    """,
+    
+    "libraries": """
+    ### Top 10 Python Libraries for SVG, TypeScript, and React Components 🛠️
+    
+    1. **lxml**: Efficiently parse and manipulate XML, including SVG. 📄
+    2. **svgwrite**: Easily create and modify SVG files in Python. 🖼️
+    3. **CairosVG**: Convert SVG files to various formats like PNG. 🔄
+    4. **pydantic**: Handle data validation and complex typing in TypeScript code generation. ✅
+    5. **datamodel-code-generator**: Automatically generate TypeScript code from Python data models. 💻
+    6. **PyV8**: Run JavaScript code from within Python, useful for generating dynamic assets. 🧑‍💻
+    7. **transcrypt**: Compile Python code to JavaScript for use with TypeScript projects. 🔄
+    8. **reactpy**: Build interactive UIs using Python for web and mobile (React-like). 📲
+    9. **react-native-svg**: Handle SVG assets in React Native applications. 📐
+    10. **streamlit-component-template**: Create custom React components inside Streamlit apps. 🎛️
+    """
+}
+
+# Set up the sidebar
+st.sidebar.title("Insights on Technologies 🛠️")
+sections = ["Python Tips", "Streamlit Tips", "TypeScript Tips", "React Native Tips", "Python Libraries"]
+selected_section = st.sidebar.selectbox("Choose a Section:", sections)
+
+# Main content display
+if selected_section == "Python Tips":
+    st.markdown(markdown_data["python"])
+elif selected_section == "Streamlit Tips":
+    st.markdown(markdown_data["streamlit"])
+elif selected_section == "TypeScript Tips":
+    st.markdown(markdown_data["typescript"])
+elif selected_section == "React Native Tips":
+    st.markdown(markdown_data["react_native"])
+elif selected_section == "Python Libraries":
+    st.markdown(markdown_data["libraries"])
+
+# Tabs for interactive code examples
+st.subheader("Interactive Code Examples 💻")
+tabs = st.tabs(["Python", "Streamlit", "TypeScript", "React Native"])
+
+# Example Python code generation
+with tabs[0]:
+    st.markdown("""
+    **Example: Python Generating TypeScript** 🎨
+    
+    ```python
+    def generate_typescript_button():
+        return '''
+        import React from 'react';
+        import { Button } from 'react-native';
+        
+        interface ButtonProps {
+            title: string;
+            onPress: () => void;
+        }
+        
+        const CustomButton: React.FC<ButtonProps> = ({ title, onPress }) => (
+            <Button title={title} onPress={onPress} />
+        );
+        
+        export default CustomButton;
+        '''
+    ```
+    """)
+    st.button("Generate TypeScript Code 🖋️")
+
+# Streamlit Example
+with tabs[1]:
+    st.markdown("""
+    **Example: Custom Streamlit Widget** 🎛️
+    
+    ```python
+    import streamlit as st
+    
+    def custom_button(label):
+        st.write(f"Button: {label}")
+        if st.button(label):
+            st.write(f"Button {label} was clicked!")
+    
+    custom_button("Click Me")
+    ```
+    """)
+    st.button("Generate Streamlit Code 💻")
+
+# TypeScript Example
+with tabs[2]:
+    st.markdown("""
+    **Example: TypeScript Component in React Native** 📱
+    
+    ```typescript
+    import React from 'react';
+    import { View, Text, StyleSheet } from 'react-native';
+    
+    const HelloWorld = () => (
+      <View style={styles.container}>
+        <Text style={styles.text}>Hello, World!</Text>
+      </View>
+    );
+    
+    const styles = StyleSheet.create({
+      container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      text: {
+        fontSize: 24,
+        color: 'blue',
+      },
+    });
+    
+    export default HelloWorld;
+    ```
+    """)
+    st.button("Generate React Native Code 📲")
+
+# React Native Example
+with tabs[3]:
+    st.markdown("""
+    **Example: React Native with TypeScript** 💻
+    
+    ```typescript
+    import React from 'react';
+    import { Text, View, Button } from 'react-native';
+    
+    interface AppProps {
+      title: string;
+    }
+    
+    const App: React.FC<AppProps> = ({ title }) => (
+      <View>
+        <Text>{title}</Text>
+        <Button title="Click Me" onPress={() => alert('Button Pressed!')} />
+      </View>
+    );
+    
+    export default App;
+    ```
+    """)
+    st.button("Generate Full React Native App 📲")
+
+# Footer
+st.sidebar.info("🎉 Enjoy exploring Python, Streamlit, TypeScript, and React Native!")