Junior Dev intern task - MERN - Leads

Task Overview:

The task is to build a Lead Management Tool with a focus on both frontend and backend
development using the MERN stack. The tool will manage leads and customer details for a
pharmacy business. This task will evaluate the developer’s proficiency in creating a
responsive and scalable application with a focus on component handling, global state
management, and efficient API integration.

Backend Requirements (Node.js/Express + MongoDB):

1. Users Table (Authentication):

• Fields: name, email, password, role, status.

• Use JWT for secure login sessions.

• Implement role-based access (admin/user).

2. Leads Table (Expanded Details):

• Include fields for leadName, contactNumber, email, address, status, assignedTo,

nextFollowUpDate, nextFollowUpTime, leadSource, conversionDate, leadNotes,
customerType, purchaseHistory, and medicalNeeds.

• Provide CRUD functionality for leads.

• Implement data validation and error handling on the backend.

3. API Requirements:

• Ensure clean and modular code in the backend (controllers, services, routes).

• Handle request validation, authorization, and sanitization of input.

• Implement pagination, filtering, sorting, and searching for leads.

Frontend Requirements (React.js):

UI Components:

• Modular Component Structure: Ensure the frontend code is structured into reusable,
modular components.

• Component State Management: Use React Hooks (useState, useEffect) for local state
management.
• Global State Management: Implement Redux or Context API for managing global state
(e.g., user authentication, leads data).

• Routing: Use React Router for navigating between views (e.g., dashboard, edit lead, view
lead).

List View:

• A list view displaying all leads.

• Features:

• Sort by columns like next follow-up date, lead status, lead source, etc.

• Filters for status, assignedTo, and lead source.

• Search by leadName, email, contactNumber.

• Pagination controls.

Edit View:

• Form-based UI for editing or creating a lead.

• Include fields for leadName, contactNumber, email, lead source, next follow-up date/time,
status, etc.

• Dynamic form fields: Post-conversion, customer details should be editable, such as

purchase history and medical needs.

• Validation for required fields (e.g., lead name, contact).

Filtering & Sorting:

• Implement real-time sorting and filtering with frontend state changes.

• Handle API requests for filters and sorting on the backend to manage large datasets
efficiently.

Search Functionality:

• Search for leads by name, email, or contact number.

• The search should trigger API calls with debounce functionality to minimize unnecessary
requests.

Notifications & Follow-up Reminders:

• Display follow-up reminders for upcoming appointments or calls.

• Notifications should be displayed in the UI (e.g., toast messages).

Frontend Best Practices:

1. Code Structure:

• Separate components into meaningful directories (e.g., components, views, services).

• No use of global variables. Use context or state management solutions (e.g., Redux).

• Avoid unnecessary re-renders by optimizing React components (use useMemo, useCallback

where necessary).

2. CSS and Styling:

• Use CSS Modules or Styled Components for scoped CSS to prevent style leakage across
components.

• Ensure a responsive design for different device sizes (desktop, tablet, mobile).

3. Error Handling:

• Display user-friendly error messages for invalid input.

• Handle both client-side and server-side errors gracefully.

4. Security:

• Use proper form validation to avoid XSS and SQL injection attacks.

• Ensure secure authentication and authorization for accessing protected routes.

5. Optimization:

• Lazy load components where appropriate (e.g., large forms or complex views).

• Optimize performance by keeping API calls minimal and using local caching where
applicable (e.g., Redux or context state).

6. Testing:

• Write basic unit tests for core components and services (e.g., authentication, lead CRUD
operations).

• Use tools like Jest and React Testing Library for frontend testing.

Best Coding Practices for the MERN Stack:

1. Component Management:
• Keep components small and manageable. A single component should follow Single
Responsibility Principle.

• Avoid prop drilling by using context API or Redux to manage state at the global level.

2. Variables:

• Ensure variables are scoped appropriately (local/global) and avoid excessive global variable
usage.

• Use meaningful and descriptive names for variables and components.

3. API Integration:

• Ensure efficient API integration using Axios or Fetch.

• Handle loading states, success, and failure gracefully for all API calls.

4. Version Control & Collaboration:

• Use Git effectively for version control.

• Commits should be atomic and properly documented with meaningful commit messages.

Deliverables & Code Review Expectations:

• Code will be reviewed for:

• Proper use of React components and state management.

• Best practices in component handling and minimizing unnecessary re-renders.

• Modular and scalable code structure.

• Efficient handling of API requests (use of async/await, proper error handling).

• Clean and concise code with well-structured CSS/Styling.

• Deliverables:

• GitHub repository containing both frontend and backend.

• Documentation explaining how to set up the project locally.

• Postman collection for API testing.

• Unit tests for critical features.