Skip to content

Latest commit

 

History

History
92 lines (62 loc) · 3.59 KB

project-details.md

File metadata and controls

92 lines (62 loc) · 3.59 KB

📂 Project Structure

This project uses a structure inspired by bullet-proof-react by Alan Alickovic .

Read the full detailed explanation here.

All of the codebase resides in the src directory.

Some key sub-directories in src are:

src
├── components # Shared components with reusable functionality (eg. Button, Link)
├── features   # Specific functionality related to a feature (eg. Auth, Post, Comment)
├── routes     # Global routing for the app
├── config     # Environment variables and global configuration values are exported and accessible here.
├── lib        # Preconfigured libraries used by the application
└── stores     # Global client-state store managed by Redux

🌟 Features

There are 4 main features in this app.

  • auth - User authentication (Login & Register)
  • posts - Forum posts
  • comments - Forum comments
  • users - Forum users

Each feature follows a structure convention as follows:

  • api: Handles any API calls made by the feature
  • components: Contains any components used in this feature (Any non-specific or reusable components should go in src/components/*)
  • routes: Handles any sub-routing within the feature
  • types: Defines any custom types used in this feature
  • slice.ts: Contains reducer logic and associated actions for any client-state of the feature.
  • index.ts: Exports all required components or types that is used elsewhere (e.g. by other features)

Note that each subdirectory in this convention is optional and can be left out if not required by the feature (e.g. comments feature does not have a routes subdirectory as the feature has no subrouting within it)


🛣️ Routes

Routing in this project is managed by react-router-dom v6.4.5.

Global routing is defined in src/routes/index.tsx which splits routes into two categories:

  • Public: Freely accessible (includes pages to login and register)
  • Protected: Requires user authentication to access

Only routing to the feature is handled here. Further sub-routing within the feature are handled by the respective feature itself in src/$FEATURENAME/routes/index.tsx.

e.g. src/auth/routes/index.tsx


💾 State Management

  • client-state

    Client-state in this project is managed using Redux.

    Client-state in use are:

    • posts:
      • current page number
      • current category filter
      • current sort option
      • current sort order (ascending / descending)
      • results per page
    • comments:
      • current sort option
      • current sort order (ascending / descending)
      • results per page
    • notifications

  • server-state

    Server-state in this project is managed using React Query v3.

    Server-state includes:

    • user authentication (further managed by React Query Auth)
    • creating posts and comments (CRUD)
    • fetching posts and comments (CRUD)
    • updating posts and comments (CRUD)
    • deleting posts and comments (CRUD)