How naserrasoulii/feature-based-react works
This React feature-based boilerplate demonstrates a user flow from the browser entry point through centralized routing and feature routes to Welcome, Post, and Product pages. Post and Product hooks load remote data, using the shared fetch-state hook for loading, errors, and refetching; their pages can present feature-specific lists and items. Core layout and shared UI, HTTP, constants, and utility layers support the app. The README documents modular routing and shared layers; sampled source confirms the entry, route aggregation, data hooks, fetch hook, and HTTP service. Unsampled view-to-component wiring is not asserted.
Main entry points: router.tsx Route aggregator · Welcome/routes.ts Welcome routes · Post/routes.ts Post routes · Product/routes.ts Product routes
Components 23
Application shell
- React entry
src/main.tsx - Route aggregator
src/router.tsx - Full layout
src/core/layouts/FullLayout.tsx - Header
src/core/layouts/components/Header.tsx - UI wrappers
src/core/components/shadcn
Feature pages
- Welcome routes
src/features/Welcome/routes.ts - Post routes
src/features/Post/routes.ts - Product routes
src/features/Product/routes.ts - Welcome page
src/features/Welcome/views/WelcomeView.tsx - Post page
src/features/Post/views/PostView.tsx - Post data hook
src/features/Post/hooks/usePost.ts - Post list
src/features/Post/components/PostList.tsx - Post item
src/features/Post/components/PostItem.tsx - Product page
src/features/Product/views/ProductView.tsx - Product data hook
src/features/Product/hooks/useProducts.ts - Product list
src/features/Product/components/ProductList.tsx - Product item
src/features/Product/components/ProductItem.tsx
Shared runtime
- Fetch state
src/shared/hooks/useFetch.ts - HTTP service
src/shared/services/http.service.ts - Shared UI
src/shared/components
Other components
- Browser user
- Posts API
- Products API
Connections 15
- Browser user → React entry: opens app
- React entry → Route aggregator: renders
- Route aggregator → Welcome routes: aggregates routes
- Route aggregator → Post routes: aggregates routes
- Route aggregator → Product routes: aggregates routes
- Welcome routes → Full layout: mounts layout
- Post routes → Full layout: mounts layout
- Product routes → Full layout: mounts layout
- Welcome routes → Welcome page: selects page
- Post routes → Post page: selects page
- Product routes → Product page: selects page
- Post data hook → Fetch state: uses state
- Product data hook → Fetch state: uses state
- Post data hook → Posts API: fetches posts
- Product data hook → Products API: fetches products