- Getting Started
- Thought Process and Architectural Decisions
- Folder Structure
- Trade-Offs and Assumptions
- Testing
Follow these steps to run the application:
-
Install Dependencies: This project uses
npmas the package manager. Install dependencies by running:npm install
-
Run the Development Server: Start the application in development mode:
npm run dev
Open http://localhost:3000 to view the application in the browser.
-
Build for Production: To create an optimized production build:
npm run build
To preview the production build:
npm run start
This will serve the production build on http://localhost:3000.
The application is designed to be scalable and maintainable. The folder structure is as follows:
- data: Handles the data layer, including API calls and data types.
- modules: Contains application modules organized by domain, ensuring clear separation of concerns.
- shared: Holds shared resources like atomic components, hooks, utilities, etc.
- store: Contains the core Redux store configuration, root reducer, and essential logic for managing the application’s global state. This includes any middleware, utility functions, and other critical components that ensure predictable state updates and data flow throughout the application.
This organization ensures that the application is easy to scale as features grow and simplifies team collaboration.
- Current Implementation: SCSS is used to demonstrate CSS and SCSS skills.
- Recommendation: Tailwind could be a leaner alternative, offering faster UI development and smaller bundle sizes if configured correctly.
- Current Implementation: A Redux store manages global state to showcase Redux expertise.
- Recommendation:
For a small project,
React ContextanduseReducermight suffice, reducing overhead.
- Current Implementation:
The native
fetchAPI is used for network requests. - Reasoning:
It’s lightweight and avoids increasing the bundle size. For more advanced features,
axiosor similar libraries could be used in the future.
- Current Implementation: No tests have been added yet to save time.
- Recommendation: Write unit tests for critical logic (e.g., useSubmitAnswer and chatbotSlice). Consider adding end-to-end tests with Cypress for a comprehensive testing strategy.
- Future Command:
Once tests are added, run them with:npm run test