Project — Announcement Board | Development Standards

React + Django ~8 Hours Intermediate

What You Are Building

Build a workspace-based announcement board using Django REST Framework and React.

This project teaches

Django model design
DRF API
Service layer
React list/detail/form pages
Permission handling
Loading, empty, and error states

Flow Design

Example Flow

flowchart TD
    Login[User logs in]
    Workspace[Selects workspace]
    Board[Opens Announcement Board]

    Login --> Workspace --> Board

    Board --> Owner[Owner Flow]
    Board --> Admin[Admin Flow]
    Board --> Member[Member Flow]

    Owner --> OwnerList[View announcements across owned workspaces]
    OwnerList --> OwnerFilter[Search / filter / paginate]
    OwnerFilter --> OwnerDraft[Create or edit draft]
    OwnerDraft --> OwnerPublish[Publish, pin, unpublish, or delete]
    OwnerPublish --> OwnerView[Open detail and audit visibility]

    Admin --> AdminList[View workspace announcements]
    AdminList --> AdminFilter[Search / filter / paginate]
    AdminFilter --> AdminDraft[Create or edit draft in assigned workspace]
    AdminDraft --> AdminPublish[Publish or update announcement]
    AdminPublish --> AdminView[Open detail and manage pinned state]
    AdminPublish -. cannot publish to another workspace .-> AdminBlocked[Blocked by workspace permission rules]

    Member --> MemberList[View published announcements only]
    MemberList --> MemberSearch[Search / filter visible announcements]
    MemberSearch --> MemberDetail[Open announcement detail]
    MemberDetail -. drafts and admin controls are hidden .-> MemberBlocked[Restricted actions denied]

Required Screens

Announcement List Page

Should show:

Title, short description, author, publish status, created date, and pinned state.
Search/filter by title, status, and pinned state.
Pagination for longer announcement history.
Create Announcement button for Admin/Owner only.
View button or card click to open full detail.
Clear distinction between draft and published records.
Loading, empty, filtered-empty, and error states.

Announcement Detail Page

Should show:

Full title, content, author, published date, and workspace context.
Attachment upload/download is out of scope for the base project.
Pin/unpin and edit actions for Admin/Owner only.
Draft visibility blocked for members.

Create/Edit Announcement Form

Fields:

Title, content, workspace, status, and pinned flag.
Shared add/edit form with publish and save-draft behavior.
Validation for required title/content and permission-safe workspace selection.

Base scope note:

Visibility is fixed to the selected workspace, so extra visibility modes are not part of the base project.
Attachment upload is out of scope for the base project.

Publish / Delete Actions

Should include:

Confirmation for destructive delete.
Clear publish/unpublish or draft-to-published state change.
Immediate list refresh after pin, publish, or delete.
No admin controls visible to members.

Django Backend Structure

Recommended structure:

announcements/
  models.py
  serializers.py
  views.py
  urls.py
  services.py
  permissions.py
  tests.py

Use the service layer for business logic, not the view.

Example service responsibilities:

Create announcement.
Publish announcement.
Validate workspace access.
Record audit log.
Send notification if required.

Data Model

Recommended Announcement model fields:

Field	Purpose
`workspace`	Workspace relation.
`title`	Announcement title.
`content`	Full content.
`status`	Draft or published.
`is_pinned`	Pin important announcement.
`created_by`	Author.
`published_at`	Publish timestamp.

Permission Rules

Actor	Allowed
Owner	Create, update, delete, publish all announcements.
Admin	Create and manage announcements in assigned workspace.
Member	Read published announcements in own workspace.
Non-member	No access.

Acceptance Checklist

Owner/Admin can create announcement.
Member cannot create, edit, publish, or delete announcements.
Draft announcements are hidden from members.
Published announcements are visible to workspace members.
Admin cannot publish to another workspace.
Service layer handles business rules.
DRF permissions enforce access server-side.
React handles loading, empty, and error states.