Please enable JavaScript.

Coggle requires JavaScript to display documents.

TODO, VUE - Coggle Diagram

- - - - Redux
        
        Redux toolkit
        
        Redux saga
      - performance optimizing
        
        Lazy Loading & Code Splitting: React.lazy(), Suspense, dynamic imports.
        
        Performance Optimization: React Profiler, useMemo, useCallback, virtualization.
    - - TYPESCRIPT
      - ES6 +
    - - Styled component
      - Bootstrap
      - Css module
      - Ant design
      - SASS
      - Tailwind css
    - - GraphQL
      - tRPC
      - REST API
        
        Axios config
      - React query
    - - webpack
      - vite
      - babel
    - - REACT TESTING LIBRARY
  - - - Micro front-end
        
        my recent project i have work on that is a micro front-end base lms. it have been design for students and instructor. this platform allow student to register, enroll course , tracking progress and obtain certifications.
        it allow instrucstor ccan create course with many lesson formats such as docs. video. quiz, arrange keys -anwser and etc....
        
        Benefits of Using App-Shell
        
        ✅ Separation of Concerns – Each micro-app can be developed and deployed independently.
        
        ✅ Scalability – New micro-apps can be added easily without affecting others.
        
        ✅ Performance Optimization – Loads only the required micro-apps, reducing bundle size.
        
        ✅ Better Developer Collaboration – Different teams can work on separate micro-apps without conflicts.
        
        this app using micro front end architechture with webpack module fedaration. supper app include few mmicroapp like student-app, instructor-app, landing-app, app-sso and app-shell
        
        explain the micro-frontend architecture you implemented in this project?
        
        we use webpack module federation to dev lms app, by splitting app into independent micro app: student app,....
        
        each micro app was configured as a remote module in webpack. exposing components and pages to the app shell. the app shell we call the host app
        
        app shell that is the cỏe container, responsible for navigation and routing, authen and author, state management and cordinate micro app dynamically
        
        flow:
        
        user visit the platform ( the app shell will load the landing page_
        
        when user click login, they are redirrect to app sso
        
        on succeffull login, app-sso store jwt in http onlu cookies
        
        user is redirect back to the main LMS
        
        app shell read the user from jwt
        
        the coressponding micro app is loaded dynamicallyu using webpack module federarion
        
        sharing state bw micro app
        
        usingg redux, defind redux store in a app shell and expose it via module fedaration, ,micro app import and use the share state
        
        use pattern pub/sub event bus ( cross app communication)
        
        create an event bus on app shell
        
        problems : verion mismatchers in micro front-end
        
        difference version of sharee dependencies ( react 17 in one app , and react 18 in otherr)
        
        it can lead to duplicate library instances, incompatible errors , app crashes
        
        solution: ensure all micro-apps use the same version of shared packkages at runtime
        
        { singleton: true, eager: true, requiredVersion: "^18.2.0" },
        
        Use a Monorepo (NX, Turborepo)
        Ensures consistent dependency versions across all micro-apps.
        Simplifies updates by managing dependencies in one place.
        
        "workspaces": [
        
        4 more items...
        
        ]
        
        pnpm,
        
        3 more items...
        
        Did you face any performance issues while implementing Module Federation? How did you resolve them?
        Yes, bundle size issues occurred due to duplicate dependencies. We optimized this by sharing common dependencies in the App-Shell and using Webpack's splitChunks. Also, lazy loading of modules improved performance.
        
        How did you manage versioning and updates for different micro-apps?
        Each micro-app was deployed independently using CI/CD pipelines. We followed semantic versioning, ensuring backward compatibility and feature flags to control rollout.
        
        How did your team divide responsibilities between front-end and back-end developers?
        Front-end developers built micro-app UIs and consumed APIs, while backend developers handled GraphQL resolvers, database queries, and authentication logic.
        
        How did you communicate and coordinate with backend developers working on the GraphQL API?
        We followed API contracts, documented schemas in GraphQL Playground, and communicated via Slack. We used mock APIs for front-end testing before actual integration.
        
        How did you ensure seamless integration between different micro-frontends developed by different teams?
        We defined API contracts early, maintained a shared component library, and used remote module loading to prevent hard dependencies between micro-apps.
      - graphql query
        
        ✅ How to structure GraphQL queries for your ED LMS platform?
        
        Use Apollo Client for frontend GraphQL queries/mutations.
        
        Implement a modular GraphQL API with role-based access control.
      - authen and authoration
        
        4️⃣ How do you manage authentication across micro frontends?
        
        when using microfront , authentication should be handled globally
        
        store authentication in app shell and passs it to micro-app via global context or cookies
        
        Cross-App Authentication Using Cookies
        
        Use HttpOnly Secure Cookies so all micro-apps share the same session:
        
        ts
        
        Copy
        
        Edit
        
        res.cookie("authToken", token, {
        
        httpOnly: true,
        
        secure: true,
        
        domain: ".ed-lms.com", // Shared across subdomains
        
        });
        
        How does the authentication and authorization system work in your application?
        We implemented role-based authentication using JWT and OAuth2.0 with App-SSO. Upon login, a secure token was issued and stored in HTTP-only cookies to prevent XSS attacks. Micro-apps validated tokens before accessing protected resources. Authorization rules were enforced at both frontend (routes & UI components) and backend (GraphQL resolvers).
    - - infinite scrolling
      - building oroduct recommendation system
      - lazy loading , webP format, CDN
        
        Lazy loading defers the loading of images until they are about to enter the viewport. Instead of loading all images when the page loads, images are only loaded when the user scrolls near them.
        
        WebP is a modern image format developed by Google that provides superior compression without losing quality.
        
        Compared to JPEG/PNG:
        
        25-34% smaller file size (better compression).
        
        Supports lossy & lossless compression.
        
        Supports transparency (like PNG) and animation (like GIF).
        
        A CDN (Content Delivery Network) is a network of servers distributed globally that caches and delivers static assets (images, CSS, JS, etc.) from the closest server to the user.
        
        Instead of loading images from the main server, a CDN serves them from a geographically closer edge server, reducing latency and improving speed.
        
        Benefits
        
        ✅ Faster image loading globally – Content loads from the nearest location.
        
        ✅ Reduces server load – Less burden on the main application server.
        
        ✅ Improves reliability – CDN keeps a backup copy, preventing downtime.
        
        ✅ Handles high traffic – Prevents slowdowns during peak usage.
    - - ANT DESIGN - Set up with tailwind css
    - - radix ui + tailwind css
      - rechart
      - intergrating trpc + react query
        
        trpc
        
        morndern framework that allow u to build type safe api bw front end and backend
        
        allow you to call backend functions dirrectly from front-end without create manually routes or schemas
        
        end-to-end and type safety
        
        how it works
        
        router
        
        defines yyour api endpoint as funcitons
        
        procedure
        
        Each endpoint is a "procedure" that can include input/output validation (often using zod).
        
        client
        
        Client: Calls these APIs from the frontend without manually writing fetch requests.
  - - - react, typescript, radix ui, tailwind css, storybook, redux, axios
    - - login
      - base layout
      - product management
        
        create product
        
        update product
        
        delete product
        
        view product with grid view and list item
        
        filter: filter by name, price,
        
        paginations
      - functionalities
        
        dark mode
        
        accessibilities
        
        storybook
        
        atomic design
  - - - Convert figma to react code
    - - Atomic design
        
        Chia component thành các atoms, molecules, organisms tái sử dụng
      - Storybook
        
        Xây dựng kiểm thử component một cách độc lập
      - Theming & Component Prop Variations: Tạo các components tái sử dụng.
        
        tạo một thư viện ui component riêng + viết storybook
    - - Component Composition: Xây dựng UI theo cách linh hoạt thay vì dùng quá nhiều props.
        
        Lazy Loading & Code Splitting: React.lazy(), Suspense, dynamic imports.
        
        State Management: Redux Toolkit, Zustand, React Context API.
        
        Performance Optimization: React Profiler, useMemo, useCallback, virtualization.