Maybe we can live without libraries, people like you and me. ...
Something went wrong.
; - } - - return this.props.children; - } -} - -// Usage -
- {error}
-
-)}
-```
-
-## Testing
-
-### Unit Testing
-
-Use Jest and React Testing Library for unit tests:
-
-```jsx
-import { render, screen, fireEvent } from '@testing-library/react';
-import MyComponent from './MyComponent';
-
-test('renders component with title', () => {
- render(
-
-```
-
-## Best Practices
-
-### Component Design
-
-1. **Single Responsibility** - Each component should have one clear purpose
-2. **Reusability** - Design components to be reusable across the application
-3. **Composition** - Build complex UIs by composing simpler components
-4. **Controlled Components** - Prefer controlled components for form elements
-5. **Props Drilling** - Use context or Redux to avoid excessive prop drilling
-
-### Code Organization
-
-1. **Consistent Naming** - Use consistent naming conventions (PascalCase for components)
-2. **Logical Grouping** - Group related files in directories
-3. **Export Strategy** - Use default exports for components, named exports for utilities
-4. **Import Organization** - Group imports logically (external, internal, styles)
-
-### Performance
-
-1. **Bundle Size** - Monitor bundle size and optimize when necessary
-2. **Rendering** - Use React.memo, useMemo, and useCallback appropriately
-3. **API Calls** - Implement caching and pagination where appropriate
-4. **Images** - Optimize images and use lazy loading
-
-### Security
-
-1. **XSS Prevention** - React automatically escapes content, but be careful with dangerouslySetInnerHTML
-2. **Token Storage** - Store JWT tokens securely (HttpOnly cookies or secure localStorage)
-3. **Input Validation** - Validate and sanitize user inputs
-4. **CORS** - Ensure proper CORS configuration on the backend
-
-This guide should help maintain consistency and quality across the React frontend implementation in the Lin project.
\ No newline at end of file
diff --git a/UI_COMPONENT_SNAPSHOT.md b/UI_COMPONENT_SNAPSHOT.md
deleted file mode 100644
index 50b434c0e5a1c5c3841cc64b8afb6c1615b1f7ae..0000000000000000000000000000000000000000
--- a/UI_COMPONENT_SNAPSHOT.md
+++ /dev/null
@@ -1,208 +0,0 @@
-# Lin UI Component Snapshot
-
-## Overview
-
-This document provides a snapshot of the current UI components in the Lin application, focusing on recent changes to the Header and Sidebar components.
-
-## Recent UI Changes
-
-### Header Component Updates
-
-The Header component has been modified to improve the user interface:
-
-1. **Moved User Profile and Logout**:
- - Relocated the user profile and logout functionality to the far right of the header
- - This change provides a more intuitive user experience by placing account-related actions in the top-right corner
-
-2. **Removed Desktop Navigation Items**:
- - Cleared the desktop navigation area (previously in the center) to create a cleaner interface
- - This change focuses attention on the primary content and reduces visual clutter
-
-### Sidebar Component Updates
-
-The Sidebar component has been modified to improve the user interface:
-
-1. **Removed Username Display**:
- - Removed the username display from the bottom of the sidebar
- - This change creates a cleaner sidebar interface and reduces information overload
-
-## Current UI Component Structure
-
-### Header Component
-
-Location: `frontend/src/components/Header/Header.jsx`
-
-Key Features:
-- Fixed position at the top of the screen
-- Responsive design for mobile and desktop
-- Mobile menu toggle button
-- User profile and logout functionality (top-right)
-- Logo and application title (top-left)
-- Backdrop blur effect for modern appearance
-
-### Sidebar Component
-
-Location: `frontend/src/components/Sidebar/Sidebar.jsx`
-
-Key Features:
-- Collapsible design with smooth animations
-- Responsive behavior for mobile and desktop
-- Navigation menu with icons and labels
-- Gradient backgrounds and modern styling
-- Touch-optimized for mobile devices
-- Keyboard navigation support
-
-### App Layout
-
-Location: `frontend/src/App.jsx`
-
-Key Features:
-- Conditional rendering based on authentication state
-- Responsive layout with Header and Sidebar
-- Mobile-first design approach
-- Accessibility features (skip links, ARIA attributes)
-- Performance optimizations (lazy loading, memoization)
-
-## Component Interactions
-
-### Authentication State Handling
-
-The UI components adapt based on the user's authentication state:
-
-1. **Unauthenticated Users**:
- - See only the logo and application title in the header
- - No sidebar is displayed
- - Redirected to login/register pages
-
-2. **Authenticated Users**:
- - See user profile and logout options in the header
- - Have access to the full sidebar navigation
- - Can access protected routes (dashboard, sources, posts, etc.)
-
-### Responsive Behavior
-
-1. **Desktop (>1024px)**:
- - Full sidebar is visible by default
- - Header displays user profile information
- - Traditional navigation patterns
-
-2. **Mobile/Tablet (<1024px)**:
- - Sidebar is collapsed by default
- - Header includes mobile menu toggle
- - Touch-optimized interactions
- - Overlay effects for mobile menus
-
-## Styling and Design System
-
-### Color Palette
-
-The application uses a consistent color palette:
-
-- Primary: Burgundy (#910029)
-- Secondary: Dark Gray (#39404B)
-- Accent: Light Blue (#ECF4F7)
-- Background: Light gradient backgrounds
-- Text: Dark Blue-Gray (#2c3e50)
-
-### Typography
-
-- Font family: System UI fonts
-- Font weights: 400 (regular), 500 (medium), 600 (semi-bold), 700 (bold)
-- Responsive font sizes using Tailwind's scale
-
-### Spacing System
-
-- Consistent spacing using Tailwind's spacing scale
-- Responsive padding and margin adjustments
-- Grid-based layout system
-
-## Performance Considerations
-
-### Optimizations Implemented
-
-1. **Lazy Loading**:
- - Components loaded on-demand
- - Code splitting for better initial load times
-
-2. **Memoization**:
- - React.memo for components
- - useMemo and useCallback for expensive operations
-
-3. **Skeleton Loading**:
- - Loading states for data fetching
- - Smooth transitions between loading and content states
-
-### Mobile Performance
-
-1. **Touch Optimization**:
- - Touch-manipulation classes for better mobile interactions
- - Hardware acceleration for animations
-
-2. **Reduced Complexity**:
- - Simplified animations on mobile devices
- - Optimized rendering for smaller screens
-
-## Accessibility Features
-
-### Implemented Features
-
-1. **Keyboard Navigation**:
- - Arrow key navigation for menus
- - Escape key to close modals/menus
- - Skip links for screen readers
-
-2. **ARIA Attributes**:
- - Proper labeling of interactive elements
- - Role attributes for semantic structure
- - Live regions for dynamic content
-
-3. **Focus Management**:
- - Visible focus indicators
- - Proper focus trapping for modals
- - Focus restoration after interactions
-
-## Testing and Quality Assurance
-
-### Component Testing
-
-1. **Unit Tests**:
- - Component rendering tests
- - Prop validation
- - Event handling verification
-
-2. **Integration Tests**:
- - State management verification
- - API integration testing
- - Routing behavior validation
-
-### Browser Compatibility
-
-1. **Supported Browsers**:
- - Latest Chrome, Firefox, Safari, Edge
- - Mobile browsers (iOS Safari, Chrome for Android)
-
-2. **Responsive Testing**:
- - Multiple screen sizes
- - Orientation changes
- - Touch vs. mouse interactions
-
-## Future Improvements
-
-### Planned Enhancements
-
-1. **UI/UX Improvements**:
- - Enhanced animations and transitions
- - Improved loading states
- - Additional accessibility features
-
-2. **Performance Optimizations**:
- - Further code splitting
- - Image optimization
- - Caching strategies
-
-3. **Feature Additions**:
- - Dark mode support
- - Customizable layouts
- - Advanced analytics dashboard
-
-This snapshot represents the current state of the UI components as of the recent changes. The modifications to the Header and Sidebar have created a cleaner, more intuitive interface while maintaining all core functionality.
\ No newline at end of file
diff --git a/docu_code/Animation.txt b/docu_code/Animation.txt
deleted file mode 100644
index 8d3959c0eb8b4fc56bd374c2ce9a52a69ac6e0d8..0000000000000000000000000000000000000000
--- a/docu_code/Animation.txt
+++ /dev/null
@@ -1,2841 +0,0 @@
-========================
-CODE SNIPPETS
-========================
-TITLE: Customize Tailwind CSS Animation Theme
-DESCRIPTION: Illustrates how to extend or override Tailwind CSS animation utilities by defining custom animations within your `@theme` configuration. This allows for project-specific animation definitions.
-
-SOURCE: https://tailwindcss.com/docs/animation
-
-LANGUAGE: CSS
-CODE:
-```
-@theme { --animate-wiggle: wiggle 1s ease-in-out infinite; @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }}
-```
-
-LANGUAGE: HTML
-CODE:
-```
-
- {/* Content that stacks on mobile, side-by-side on desktop */}
-
-1
2
3
4
5
6
1
2
3
4
5
6
Storage used: 75%
0.48 GB out of 2 GB remaining
Maybe we can live without libraries, people like you and me. ...
... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد
1
2
3
4
5
6
1
2
3
4
5
6
-```
-
-----------------------------------------
-
-TITLE: TailwindCSS Effects Utilities
-DESCRIPTION: Documentation for TailwindCSS utilities related to visual effects like shadows, opacity, and blend modes, allowing control over how elements appear and interact visually.
-
-SOURCE: https://tailwindcss.com/docs/box-shadow
-
-LANGUAGE: APIDOC
-CODE:
-```
-box-shadow
-text-shadow
-opacity
-mix-blend-mode
-background-blend-mode
-mask-clip
-mask-composite
-mask-image
-mask-mode
-mask-origin
-mask-position
-mask-repeat
-mask-size
-mask-type
-```
-
-----------------------------------------
-
-TITLE: Tailwind CSS Transform Utilities
-DESCRIPTION: API documentation for Tailwind CSS utility classes that apply 2D or 3D transformations to an element. These utilities control rotation, scaling, skewing, translation, and perspective effects.
-
-SOURCE: https://tailwindcss.com/docs/flex-basis
-
-LANGUAGE: APIDOC
-CODE:
-```
-backface-visibility: Defines whether or not the back face of an element is visible when facing the user.
-perspective: Defines how far the user is from the z-plane.
-perspective-origin: Sets the origin for the perspective property.
-rotate: Rotates an element.
-scale: Scales an element.
-skew: Skews an element.
-transform: Applies a 2D or 3D transformation to an element.
-transform-origin: Sets the origin for transformations.
-transform-style: Specifies how nested elements are rendered in 3D space.
-translate: Moves an element along the X, Y, or Z axis.
-```
-
-----------------------------------------
-
-TITLE: Tailwind CSS Transform Utilities
-DESCRIPTION: Documentation for Tailwind CSS utilities that apply 2D or 3D transformations to an element, such as rotation, scaling, skewing, and translation.
-
-SOURCE: https://tailwindcss.com/docs/padding
-
-LANGUAGE: APIDOC
-CODE:
-```
-Transforms:
- - backface-visibility: Defines whether the back face of an element is visible when turned towards the user.
- - perspective: Defines how far the object is from the user.
- - perspective-origin: Defines the origin of the perspective for 3D transforms.
- - rotate: Rotates an element around a fixed point.
- - scale: Scales an element up or down.
- - skew: Skews an element along the X and Y axes.
- - transform: Applies a 2D or 3D transformation to an element.
- - transform-origin: Sets the origin for transformations of an element.
- - transform-style: Specifies how nested elements are rendered in 3D space.
- - translate: Moves an element from its current position.
-```
-
-----------------------------------------
-
-TITLE: CSS Equivalent for Tailwind Complex Selector
-DESCRIPTION: Illustrates the simplified CSS output corresponding to a complex Tailwind class, showing how media queries, pseudo-classes, and attribute selectors are combined.
-
-SOURCE: https://tailwindcss.com/docs/styling-with-utility-classes
-
-LANGUAGE: CSS
-CODE:
-```
-@media (prefers-color-scheme: dark) and (width >= 64rem) { button[data-current]:hover { background-color: var(--color-indigo-600); }}
-```
-
-----------------------------------------
-
-TITLE: Tailwind CSS Transforms Utility Classes
-DESCRIPTION: Reference for Tailwind CSS utility classes for applying CSS transforms like rotation, scaling, skewing, and translation.
-
-SOURCE: https://tailwindcss.com/docs/background-size
-
-LANGUAGE: APIDOC
-CODE:
-```
-backface-visibility: Utilities for controlling whether the back face of an element is visible when rotated.
-perspective: Utilities for controlling the perspective property.
-perspective-origin: Utilities for controlling the perspective origin property.
-rotate: Utilities for rotating elements.
-scale: Utilities for scaling elements.
-skew: Utilities for skewing elements.
-transform: General utility for applying transforms.
-transform-origin: Utilities for controlling the origin of an element's transform.
-transform-style: Utilities for controlling how nested elements are rendered in 3D space.
-translate: Utilities for translating elements.
-```
-
-----------------------------------------
-
-TITLE: TailwindCSS Transform Utilities
-DESCRIPTION: This section lists TailwindCSS utilities for applying 2D and 3D transformations to elements, such as rotation, scaling, skewing, translation, and perspective controls. These utilities enable complex visual manipulations and dynamic element positioning.
-
-SOURCE: https://tailwindcss.com/docs/border-color
-
-LANGUAGE: APIDOC
-CODE:
-```
-backface-visibility
-perspective
-perspective-origin
-rotate
-scale
-skew
-transform
-transform-origin
-transform-style
-translate
-```
-
-----------------------------------------
-
-TITLE: CSS Transform Properties
-DESCRIPTION: Documentation for CSS properties that apply 2D or 3D transformations to an element, such as rotation, scaling, skewing, and translation.
-
-SOURCE: https://tailwindcss.com/docs/margin
-
-LANGUAGE: APIDOC
-CODE:
-```
-backface-visibility: Defines whether or not the back face of an element is visible when facing the user.
-perspective: Defines how far the user is from the z=0 plane when viewing a 3D transformed element.
-perspective-origin: Sets the origin for the perspective property.
-rotate: Rotates an element around a fixed point.
-scale: Scales an element up or down.
-skew: Skews an element along the X and Y axes.
-transform: Applies a 2D or 3D transformation to an element.
-transform-origin: Sets the origin for transformations of an element.
-transform-style: Specifies how nested elements are rendered in 3D space.
-translate: Moves an element from its current position.
-```
-
-----------------------------------------
-
-TITLE: Tailwind CSS Mask Left Gradient Utilities
-DESCRIPTION: Provides Tailwind CSS utility classes for creating linear gradient masks that originate or terminate from the left edge of an element. These classes set the `mask-image` property using `linear-gradient(to left, ...)`, supporting various value types for customization.
-
-SOURCE: https://tailwindcss.com/docs/mask-image
-
-LANGUAGE: APIDOC
-CODE:
-```
-mask-l-from-
-```
-
-----------------------------------------
-
-TITLE: Applying Tailwind CSS Perspective Utilities
-DESCRIPTION: This example demonstrates how to use `perspective-dramatic` and `perspective-normal` utilities to control the perceived distance of elements along the Z-axis, affecting 3D transformations. It shows how different perspective values change the visual depth.
-
-SOURCE: https://tailwindcss.com/docs/perspective
-
-LANGUAGE: HTML
-CODE:
-```
-
-
-1
- 2
- 3
- 4
- 5
- 6
-
-
-```
-
-----------------------------------------
-
-TITLE: Tailwind CSS Mask Bottom Gradient Utilities
-DESCRIPTION: Defines Tailwind CSS utility classes for creating linear gradient masks that originate or terminate from the bottom edge of an element. These classes control the `mask-image` property with `linear-gradient(to bottom, ...)`, allowing customization with numbers, percentages, colors, custom properties, or arbitrary values.
-
-SOURCE: https://tailwindcss.com/docs/mask-image
-
-LANGUAGE: APIDOC
-CODE:
-```
-mask-b-from-1
- 2
- 3
- 4
- 5
- 6
-- To develop digital content plan, manage and monitor different content executions for social and online platforms to maximize the communication effectiveness and impact
- To manage, monitor and keep optimizing the performance of social platforms of MB and AMG
- To monitor and manage internet word of mouth to keep the health of brand and product image
- To develop digital content plan, manage and monitor different content executions for social and online platforms to maximize the communication effectiveness and impact
- To manage, monitor and keep optimizing the performance of social platforms of MB and AMG
- To monitor and manage internet word of mouth to keep the health of brand and product image
- To develop digital content plan, manage and monitor different content executions for social and online platforms to maximize the communication effectiveness and impact
- To manage, monitor and keep optimizing the performance of social platforms of MB and AMG
- To monitor and manage internet word of mouth to keep the health of brand and product image
- To develop digital content plan, manage and monitor different content executions for social and online platforms to maximize the communication effectiveness and impact
- To manage, monitor and keep optimizing the performance of social platforms of MB and AMG
- To monitor and manage internet word of mouth to keep the health of brand and product image
- To develop digital content plan, manage and monitor different content executions for social and online platforms to maximize the communication effectiveness and impact
- To manage, monitor and keep optimizing the performance of social platforms of MB and AMG
- To monitor and manage internet word of mouth to keep the health of brand and product image
-
- );
-}
-```
-
-----------------------------------------
-
-TITLE: Install Prettier Extension in VS Code
-DESCRIPTION: Instructions to install the Prettier extension directly from the VS Code Quick Open palette, enabling automatic code formatting.
-
-SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/editor-setup.md#_snippet_0
-
-LANGUAGE: Shell
-CODE:
-```
-ext install esbenp.prettier-vscode
-```
-
-----------------------------------------
-
-TITLE: Example React Compiler Output
-DESCRIPTION: This JavaScript code snippet illustrates an example of the output generated by the React Compiler. It shows how the compiler automatically adds memoization logic, such as the `_c` function call and conditional rendering based on a sentinel symbol, to optimize component rendering.
-
-SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-compiler/installation.md#_snippet_7
-
-LANGUAGE: JavaScript
-CODE:
-```
-import { c as _c } from "react/compiler-runtime";
-export default function MyApp() {
- const $ = _c(1);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = Welcome to my app
-Hello World
;
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- return t0;
-}
-```
-
-----------------------------------------
-
-TITLE: Stage, Commit, and Push Git Changes
-DESCRIPTION: Steps to stage all modified files, commit them with a descriptive message, and then push the changes from your local branch to your forked repository on GitHub.
-
-SOURCE: https://github.com/reactjs/react.dev/blob/main/README.md#_snippet_4
-
-LANGUAGE: Shell
-CODE:
-```
-git add -A && git commit -m "My message"
-```
-
-LANGUAGE: Shell
-CODE:
-```
-git push my-fork-name the-name-of-my-branch
-```
-
-----------------------------------------
-
-TITLE: Complete React Context and Reducer Implementation Example
-DESCRIPTION: A comprehensive example demonstrating the complete setup and usage of React Context with `useReducer` for managing a task list. It includes the main application component, context definitions, individual components for adding and listing tasks, and the reducer logic.
-
-SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/scaling-up-with-reducer-and-context.md#_snippet_16
-
-LANGUAGE: javascript
-CODE:
-```
-import { useReducer } from 'react';
-import AddTask from './AddTask.js';
-import TaskList from './TaskList.js';
-import { TasksContext, TasksDispatchContext } from './TasksContext.js';
-
-export default function TaskApp() {
- const [tasks, dispatch] = useReducer(
- tasksReducer,
- initialTasks
- );
-
- return (
- Day off in Kyoto
--
- {tasks.map(task => (
-
-
-
-
- ))}
-
Hello, {name}
; -} - -export default function App() { - returnHello, world!
-
-
-
-
-
- {details.title}
-{details.description}
- - ); -} -``` - -LANGUAGE: jsx -CODE: -``` -import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; - -function SearchList({searchText, videos}) { - // Activate with useDeferredValue ("when") - const deferredSearchText = useDeferredValue(searchText); - const filteredVideos = filterVideos(videos, deferredSearchText); - return ( -
- {filteredVideos.length === 0 && (
-
- );
-}
-
-export default function Home() {
- const videos = use(fetchVideos());
- const count = videos.length;
- const [searchText, setSearchText] = useState('');
-
- return (
- No results
- )}
-
- {filteredVideos.map((video) => (
- // Animate each item in list ("what")
-
-
-
- ))}
-
- {artist.name}
-🌀 Loading...
; -} -``` - -LANGUAGE: js -CODE: -``` -import {use} from 'react'; -import { fetchData } from './data.js'; - -export default function Albums({ artistId }) { - const albums = use(fetchData(`/${artistId}/albums`)); - return ( --
- {albums.map(album => (
-
- - {album.title} ({album.year}) - - ))} -
-
-
-
-
-
-
- );
-}
-```
-
-LANGUAGE: css
-CODE:
-```
-* {
- box-sizing: border-box;
-}
-
-body {
- font-family: sans-serif;
- margin: 20px;
- padding: 0;
-}
-
-.square {
- background: #fff;
- border: 1px solid #999;
- float: left;
- font-size: 24px;
- font-weight: bold;
- line-height: 34px;
- height: 34px;
- margin-right: -1px;
- margin-top: -1px;
- padding: 0;
- text-align: center;
- width: 34px;
-}
-
-.board-row:after {
- clear: both;
- content: '';
- display: table;
-}
-
-.status {
- margin-bottom: 10px;
-}
-.game {
- display: flex;
- flex-direction: row;
-}
-
-.game-info {
- margin-left: 20px;
-}
-```
-
-----------------------------------------
-
-TITLE: Complete React Function Component Migration Example
-DESCRIPTION: This is the complete example of the `Greeting` component after being fully migrated from a class component to a functional component. It showcases the simplified syntax for defining components and accessing props, along with its usage within the `App` component, demonstrating a fully converted functional component setup.
-
-SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/Component.md#_snippet_42
-
-LANGUAGE: js
-CODE:
-```
-function Greeting({ name }) {
- return Hello, {name}!
; -} - -export default function App() { - return ( - <> --
-
- -
- -
- -
-
- );
-}
-
-function MyButton({ count, onClick }) {
- return (
-
- );
-}
-```
-
-----------------------------------------
-
-TITLE: Comprehensive example of data display and inline styling in React
-DESCRIPTION: A complete example showcasing how to display dynamic data (user name, image URL, image size) within JSX. It includes string concatenation in attributes (`alt`) and inline styling using JavaScript objects (`style={{ width: ..., height: ... }}`).
-
-SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/index.md#_snippet_8
-
-LANGUAGE: javascript
-CODE:
-```
-const user = {
- name: 'Hedy Lamarr',
- imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
- imageSize: 90,
-};
-
-export default function Profile() {
- return (
- <>
- Counters that update together
-{user.name}
-{children}
; - case 2: - return{children}
; - case 3: - return{children}
; - case 4: - return{children}
; - case 5: - return{children}
; - case 6: - return{children}
; - default: - throw Error('Unknown level: ' + level); - } -} -``` - -LANGUAGE: javascript -CODE: -``` -import { createContext } from 'react'; - -export const LevelContext = createContext(1); -``` - -LANGUAGE: css -CODE: -``` -.section { - padding: 10px; - margin: 5px; - border-radius: 5px; - border: 1px solid #aaa; -} -``` - ----------------------------------------- - -TITLE: Install React and ReactDOM via npm -DESCRIPTION: Installs the core React library and ReactDOM for web rendering using npm. This command should be executed in your project's root directory to add necessary dependencies. - -SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/add-react-to-an-existing-project.md#_snippet_0 - -LANGUAGE: Shell -CODE: -``` -npm install react react-dom -``` - ----------------------------------------- - -TITLE: Package Dependencies for React ViewTransition Example -DESCRIPTION: This `package.json` file lists the necessary dependencies for running the React ViewTransition example. It specifies `experimental` versions for `react` and `react-dom` to ensure compatibility with the `unstable_ViewTransition` API, along with `react-scripts` for development utilities. - -SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/ViewTransition.md#_snippet_15 - -LANGUAGE: json -CODE: -``` -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - } -} -``` - ----------------------------------------- - -TITLE: Install React Compiler Babel Plugin -DESCRIPTION: Installs the `babel-plugin-react-compiler` as a development dependency using npm, Yarn, or pnpm. The `@rc` tag ensures the installation of the latest release candidate version, which is recommended for current usage. - -SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/react-compiler/installation.md#_snippet_0 - -LANGUAGE: bash -CODE: -``` -npm install -D babel-plugin-react-compiler@rc -``` - -LANGUAGE: bash -CODE: -``` -yarn add -D babel-plugin-react-compiler@rc -``` - -LANGUAGE: bash -CODE: -``` -pnpm install -D babel-plugin-react-compiler@rc -``` - ----------------------------------------- - -TITLE: Install Vite for a new React project -DESCRIPTION: This command initializes a new React project using Vite, creating a directory named 'my-app' and setting up the basic React template. Vite provides a fast and lean development experience. - -SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/build-a-react-app-from-scratch.md#_snippet_0 - -LANGUAGE: bash -CODE: -``` -npm create vite@latest my-app -- --template react -``` - ----------------------------------------- - -TITLE: React Component Animation with useEffect and useRef -DESCRIPTION: This example demonstrates how to integrate a third-party animation library (`FadeInAnimation`) with a React component. It uses `useRef` to get a reference to the DOM node and `useEffect` to manage the animation's lifecycle, starting it when the component mounts and stopping it on unmount. - -SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useEffect.md#_snippet_5 - -LANGUAGE: javascript -CODE: -``` -import { useState, useEffect, useRef } from 'react'; -import { FadeInAnimation } from './animation.js'; - -function Welcome() { - const ref = useRef(null); - - useEffect(() => { - const animation = new FadeInAnimation(ref.current); - animation.start(1000); - return () => { - animation.stop(); - }; - }, []); - - return ( -- Welcome -
- ); -} - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -- {show &&
Sally Ride's Packing List
--
-
Hello {{ person }}!
-{% else %} -Hello, World!
-{% endif %} -``` - ----------------------------------------- - -TITLE: Install Python Environment and Flask Project -DESCRIPTION: This snippet provides commands to set up a Python virtual environment, activate it, and install the current Flask project in editable mode. This is a standard procedure for preparing a Python development environment. - -SOURCE: https://github.com/pallets/flask/blob/main/examples/javascript/README.rst#_snippet_0 - -LANGUAGE: text -CODE: -``` -$ python3 -m venv .venv -$ . .venv/bin/activate -$ pip install -e . -``` - ----------------------------------------- - -TITLE: Example Flask Debug Server Console Output -DESCRIPTION: This snippet displays the typical console output when the Flask development server starts in debug mode. It confirms the application being served, the active debug mode, the local URL for access, and the activation of the debugger with its PIN, indicating a successful server startup. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/tutorial/factory.rst#_snippet_4 - -LANGUAGE: text -CODE: -``` -* Serving Flask app "flaskr" -* Debug mode: on -* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) -* Restarting with stat -* Debugger is active! -* Debugger PIN: nnn-nnn-nnn -``` - ----------------------------------------- - -TITLE: Install Test Dependencies and Run Tests with Coverage -DESCRIPTION: This snippet outlines the steps to install testing dependencies, run tests using pytest, and generate a code coverage report. It ensures the project's functionality and code quality are verified. - -SOURCE: https://github.com/pallets/flask/blob/main/examples/javascript/README.rst#_snippet_2 - -LANGUAGE: text -CODE: -``` -$ pip install -e '.[test]' -$ coverage run -m pytest -$ coverage report -``` - ----------------------------------------- - -TITLE: Handle Multiple HTTP Methods for Flask Routes -DESCRIPTION: Shows how to configure a Flask route to respond to specific HTTP methods (e.g., GET, POST) using the `methods` argument in the `@app.route` decorator. This allows for different logic based on the request type, such as handling form submissions. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_9 - -LANGUAGE: python -CODE: -``` -from flask import request - -@app.route('/login', methods=['GET', 'POST']) -def login(): - if request.method == 'POST': - return do_the_login() -``` - ----------------------------------------- - -TITLE: Install Gunicorn and application in a virtual environment -DESCRIPTION: This snippet outlines the standard procedure to set up a Python virtual environment, install your Flask application, and then install Gunicorn using pip. This is a common and recommended setup for deploying Python web applications. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/deploying/gunicorn.rst#_snippet_0 - -LANGUAGE: shell -CODE: -``` -$ cd hello-app -$ python -m venv .venv -$ . .venv/bin/activate -$ pip install . # install your application -$ pip install gunicorn -``` - ----------------------------------------- - -TITLE: Flask Redirects and Errors: `redirect` and `abort` -DESCRIPTION: Illustrates the basic usage of `flask.redirect` to send a user to another URL and `flask.abort` to immediately terminate a request with an HTTP error code. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_24 - -LANGUAGE: python -CODE: -``` -from flask import abort, redirect, url_for - -@app.route('/') -def index(): - return redirect(url_for('login')) - -@app.route('/login') -def login(): - abort(401) - this_is_never_executed() -``` - ----------------------------------------- - -TITLE: Separate Flask Views for GET and POST Methods -DESCRIPTION: Demonstrates how to define distinct view functions for different HTTP methods (GET and POST) on the same route in Flask. This approach, using `@app.get` and `@app.post` decorators, helps organize logic when specific actions are tied to particular request methods, such as displaying a form versus processing its submission. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_10 - -LANGUAGE: python -CODE: -``` -@app.get('/login') -def login_get(): - return show_the_login_form() - -@app.post('/login') -def login_post(): - return do_the_login() -``` - ----------------------------------------- - -TITLE: Run a Flask Application from the Command Line -DESCRIPTION: This command shows how to run the Flask application using the 'flask' command-line interface. The '--app hello' option specifies the application file (e.g., 'hello.py'). The output indicates the server is running locally, typically on port 5000. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_1 - -LANGUAGE: text -CODE: -``` -$ flask --app hello run - * Serving Flask app 'hello' - * Running on http://127.0.0.1:5000 (Press CTRL+C to quit) -``` - ----------------------------------------- - -TITLE: Define Basic Flask Routes -DESCRIPTION: Demonstrates how to bind Python functions to specific URL paths using the `@app.route` decorator in Flask. This allows the application to respond to requests at the defined endpoints. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_5 - -LANGUAGE: python -CODE: -``` -@app.route('/') -def index(): - return 'Index Page' - -@app.route('/hello') -def hello(): - return 'Hello, World' -``` - ----------------------------------------- - -TITLE: Run Flask Application -DESCRIPTION: This command starts the Flask development server for the 'js_example' application. It makes the application accessible via a web browser at the specified local address. - -SOURCE: https://github.com/pallets/flask/blob/main/examples/javascript/README.rst#_snippet_1 - -LANGUAGE: text -CODE: -``` -$ flask --app js_example run -``` - ----------------------------------------- - -TITLE: Flask Error Handling: Custom 404 Page -DESCRIPTION: Shows how to customize error pages in Flask using the `errorhandler` decorator. This example specifically handles a 404 Not Found error by rendering a custom template and setting the correct status code. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_25 - -LANGUAGE: python -CODE: -``` -from flask import render_template - -@app.errorhandler(404) -def page_not_found(error): - return render_template('page_not_found.html'), 404 -``` - ----------------------------------------- - -TITLE: Create a Minimal Flask Web Application -DESCRIPTION: This snippet demonstrates how to create a basic Flask application. It imports the Flask class, creates an application instance, defines a route for the root URL ('/'), and returns a simple 'Hello, World!' HTML paragraph. The '__name__' argument helps Flask locate resources like templates. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_0 - -LANGUAGE: python -CODE: -``` -from flask import Flask - -app = Flask(__name__) - -@app.route("/") -def hello_world(): - return "Hello, World!
" -``` - ----------------------------------------- - -TITLE: Install pyuwsgi for Flask applications -DESCRIPTION: This snippet provides shell commands to set up a Python virtual environment, install a Flask application, and then install the `pyuwsgi` package, which offers precompiled wheels for quick setup but lacks SSL support. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/deploying/uwsgi.rst#_snippet_0 - -LANGUAGE: text -CODE: -``` -$ cd hello-app -$ python -m venv .venv -$ . .venv/bin/activate -$ pip install . -$ pip install pyuwsgi -``` - ----------------------------------------- - -TITLE: Define Project Metadata with pyproject.toml -DESCRIPTION: The `pyproject.toml` file is used to describe a Python project and define how it should be built. This example specifies the project's name, version, description, and runtime dependencies, along with the build system requirements for `flit_core`. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/tutorial/install.rst#_snippet_0 - -LANGUAGE: toml -CODE: -``` -[project] -name = "flaskr" -version = "1.0.0" -description = "The basic blog app built in the Flask tutorial." -dependencies = [ - "flask", -] - -[build-system] -requires = ["flit_core<4"] -build-backend = "flit_core.buildapi" -``` - ----------------------------------------- - -TITLE: Importing the Flask Request Object -DESCRIPTION: Shows the standard way to import the `request` object from the `flask` module, which is necessary before using it to access client data. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_17 - -LANGUAGE: python -CODE: -``` -from flask import request -``` - ----------------------------------------- - -TITLE: Using request_context with WSGI Environment -DESCRIPTION: Illustrates an alternative method for binding a request context by passing a full WSGI environment to `app.request_context`. This allows for more granular control over the request context during testing or specific scenarios. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_16 - -LANGUAGE: python -CODE: -``` -with app.request_context(environ): - assert request.method == 'POST' -``` - ----------------------------------------- - -TITLE: Running Flask App with Debug Mode - Shell -DESCRIPTION: Command line example showing how to start a Flask development server with debug mode enabled using the `flask run` command. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/config.rst#_snippet_3 - -LANGUAGE: text -CODE: -``` -$ flask --app hello run --debug -``` - ----------------------------------------- - -TITLE: Basic Flask Application Setup and Configuration -DESCRIPTION: This snippet demonstrates the initial setup of a Flask application by creating an instance of the Flask class. It shows how to configure the application using `app.config.from_mapping` for default settings and `app.config.from_prefixed_env()` for environment-based configuration. A basic route is also included to illustrate a simple 'Hello, World!' endpoint. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/lifecycle.rst#_snippet_0 - -LANGUAGE: python -CODE: -``` -from flask import Flask - -app = Flask(__name__) -app.config.from_mapping( - SECRET_KEY="dev", -) -app.config.from_prefixed_env() - -@app.route("/") -def index(): - return "Hello, World!" -``` - ----------------------------------------- - -TITLE: Render Jinja2 Templates in Flask -DESCRIPTION: Shows how to use Flask's `render_template` function to serve dynamic HTML pages. It demonstrates passing Python variables as keyword arguments to a Jinja2 template, enabling personalized content based on URL parameters or other application data. - -SOURCE: https://github.com/pallets/flask/blob/main/docs/quickstart.rst#_snippet_12 - -LANGUAGE: python -CODE: -``` -from flask import render_template - -@app.route('/hello/') -@app.route('/hello/