This project is a frontend test assignment for the DoIT MVP. It demonstrates the implementation of full CRUD operations on a posts resource using modern frontend technologies and tools.
Features
CRUD Functionality
Complete Create, Read, Update, Delete operations using Redux Toolkit and async thunks.
UI & Theming
Material UI components used throughout.
Light/Dark theme toggle in the AppBar.
Navigation
App Router with a persistent AppBar and a Drawer for navigation.
Navigation links to Home, All Posts, and Create Post.
Clean Architecture
Modular file and folder structure.
Clear separation of concerns and reusable components.
Documentation
README.md includes setup instructions and future improvement suggestions.
Pages
Home (/)
Hero section with main heading and subheading.
Two main buttons:
"View Posts" → /posts
"Create Post" → /posts/create
AppBar: blue (#2196f3) with Menu, title, and theme switcher.
Drawer with links to all major pages.
Posts List (/posts)
AppBar + Drawer
Search posts by title (TextField with search icon).
Skeleton loaders while fetching data.
Grid view with Material UI Cards:
Header with Avatar, title, subheader, delete action.
Body snippet in CardContent.
Link to full post in CardActions.
Floating SpeedDial for quick navigation to Create Post.
Post Details (/posts/[id])
Loading state (CircularProgress), then detailed Card view:
Header, full body, actions for Delete and Back to List.
Comment dialog triggered by Comment icon in AppBar with Badge.
Create Post (/posts/create)
Stepper flow: Title → Body → Preview.
Forms with icons for each step.
Dialog preview before final submission.
Snackbar for success notification.
Additional Requirements
GitHub repository with public access.
README.md includes:
Installation & startup steps
Folder structure overview
Recommendations:
Unit tests
Use of RTK Query
Mobile responsiveness
UX improvements (e.g., loaders, error handling)
Evaluation Criteria
Compliance with technical specs and visual accuracy.
Clean, readable code following DRY principles.
Logical project structure with organized folders for store, services, components, and pages.