Research‐Documentation‐Frontend‐Web

Research Documentation

This section provides insights into the technologies, architecture, and design decisions behind the Greener frontend.

Technology Stack

Overview

The Greener frontend is built using modern JavaScript technologies to ensure a responsive, scalable, and maintainable application.

Core Technologies

• React (v19.1.0): A JavaScript library for building user interfaces, chosen for its component-based architecture and ecosystem.
• React Router (v7.5.3): Handles client-side routing, enabling seamless navigation across pages like Home, Dashboard, and Profile.
• Axios (v1.9.0): Used for making HTTP requests to the backend API, with interceptors for token-based authentication.
• Redux Toolkit (v2.8.0): Manages global state for user authentication, waste logs, and other shared data.
• Create React App (v5.0.1): Bootstrapped the project, providing a pre-configured development environment with Webpack, Babel, and ESLint.

Testing

• Jest: Integrated via Create React App for unit and integration testing.
• React Testing Library (v16.3.0): Facilitates testing React components by simulating user interactions.

Styling

• CSS Modules: Scoped CSS files (e.g., Home.css, Dashboard.css) ensure styles are component-specific and avoid conflicts.
• Global Styles: index.css and App.css for shared styles like typography and layout.

Why This Stack?

• React: Industry-standard, supports reusable components, and has a vast community.
• Redux Toolkit: Simplifies state management compared to vanilla Redux.
• Axios: Lightweight and flexible for API interactions.
• Create React App: Reduces setup time, ideal for rapid prototyping and development.

Architecture

Overview

The Greener frontend follows a component-based architecture with a clear separation of concerns, leveraging React's modularity.

Directory Structure

• src/components/: Houses reusable and page-specific components, organized by feature (e.g., auth/, dashboard/).
• src/services/: Contains API service logic (api.js) for backend communication.
• src/public/: Static assets like icons, favicon, and manifest for PWA support.
• src/: Root files like App.js (main app component), index.js (entry point), and global styles.

Component Hierarchy

• App.js: Root component, sets up routing with react-router-dom.
• Pages: Top-level components like Home, Dashboard, Profile, each corresponding to a route.
• Common Components: Navbar for navigation, reused across authenticated pages.
• Feature Components: Specific to pages, e.g., ChallengeCard in ChallengesPage.

Data Flow

• State Management: Redux Toolkit manages global state (e.g., user authentication, waste logs).
• API Integration: Axios in api.js handles requests, with interceptors adding JWT tokens.
• Local State: React's useState and useEffect for component-specific state (e.g., form inputs in WasteLog).

Routing

• Uses react-router-dom for client-side routing.
• Routes defined in App.js, mapping paths (e.g., /dashboard, /waste) to components.

Scalability Considerations

• Modular components allow easy addition of new features.
• CSS Modules prevent style conflicts.
• Redux Toolkit's slice-based approach simplifies state management for future growth.

Design Decisions

Component-Based Architecture

• Why: React's component model promotes reusability and maintainability.
• Impact: Components like Navbar and ChallengeCard are reusable across pages.

Redux Toolkit for State Management

• Why: Simplifies Redux boilerplate, suitable for managing user sessions and API data.
• Alternative Considered: React Context (lighter but less robust for complex state).

Axios with Interceptors

• Why: Centralized token management for authenticated API requests.
• Alternative Considered: Fetch API (native but requires more manual configuration).

CSS Modules

• Why: Scoped styles prevent conflicts, unlike global CSS or inline styles.
• Alternative Considered: Styled-components (adds runtime overhead).

Create React App

• Why: Quick setup with pre-configured tools, ideal for student projects.
• Alternative Considered: Vite (faster but less mature at project start).

Authentication Flow

• Why: JWT-based authentication stored in localStorage for simplicity.
• Trade-off: Security risks mitigated by short-lived tokens and secure backend.

Progressive Web App (PWA) Support

• Why: manifest.json and service workers enable offline capabilities and app-like experience.
• Impact: Enhances user engagement, especially on mobile.