Feature #4408
closedUser Story: Frontend Codebase Setup
Description
Title: Set up React frontend architecture with Redux, Jest, Formik, MUI, Tailwind, and reusable UI components.
As a frontend developer,
I want to initialize a scalable React project structure with essential libraries and tools,
so that the team can build consistent, testable, and maintainable UI modules efficiently.
Acceptance Criteria
Project Initialization
A new React project is created using Vite or Create React App (as per team choice).
Folder structure follows best practices (/components, /pages, /store, /hooks, /utils, /assets, /tests).
Environment configuration (.env) and path aliasing are set up.
State Management (Redux Toolkit)
Redux Toolkit and React Redux are configured.
Store, slices, and example reducers (e.g., userSlice, uiSlice) are set up.
Sample action and dispatch flow demonstrated in a test component.
UI Framework & Styling
MUI and TailwindCSS are integrated together.
Tailwind is configured via tailwind.config.js with theme customization.
MUI theme provider wraps the app for global theming.
Example MUI component (e.g., button, dialog) styled with Tailwind utility classes.
Forms & Validation
Formik and Yup are installed and configured.
Sample form component built (e.g., login or signup) using MUI inputs + Formik integration.
Validation schema applied using Yup.
Testing (Jest & React Testing Library)
Jest and React Testing Library are configured for unit testing.
Example test cases for components, reducers, and utility functions are written.
npm test runs successfully with coverage reporting.
Reusable UI Elements
Common components (e.g., Button, InputField, Loader, Modal, Snackbar) are created in /components/common/.
Components follow consistent props and naming conventions.
Storybook (optional) can be configured for UI documentation.
Code Quality & Tooling
ESLint, Prettier are configured.
Basic lint and format scripts added to package.json.
All dependencies and scripts documented in README.md.
Subtasks
Related issues