5. Frontend Implementation

5.1 Technology Selection Process

To ensure seamless integration with backend APIs and alignment with modern web development practices, we evaluated various frontend frameworks and libraries. Our primary considerations included component reusability, development speed, and community support.

• Framework Choice: We selected React as the foundational library for building our application. Its component-based architecture, large community, and modular ecosystem made it ideal for our needs.

• Routing: We used React Router to manage navigation across different views (e.g., Login, Feed, Task Details). This enabled clean URL-based navigation without full-page reloads.

• State Management: We adopted Redux Toolkit for global state management across features like authentication, feed content, and bookmarks. Redux Toolkit’s built-in tools for asynchronous logic and reduced boilerplate accelerated our development workflow.

• Styling: While Tailwind CSS was initially planned, we switched to Material UI after our second meeting and used it throughout the project. Its component-rich ecosystem and consistent design language helped streamline the UI development.

• Form Handling: React Hook Form was used in components like task creation and user registration. It provided a lightweight and performant way to manage form state and validation with minimal re-renders.

• API Communication: We used Axios for making API calls. Its support for interceptors, clean syntax, and robust error handling made it preferable over the native Fetch API.

5.2 Team Organization and Responsibilities

The frontend team was composed of 3 members. Each member took responsibility for specific pages or components based on their familiarity and availability.

Member Name	Responsibilities
Ali Sönmez	Profile Page, Create Request Page
Ahmet Eren Aslan	Feed Page, Home Page
Musa Kaan Güney	Task Details Page, Login/Register Page

Each member followed the design specifications shared during our early meetings, and the components were structured to ensure maintainability and reusability.

5.3 Development Standards and Workflow

To maintain a coherent codebase and streamline collaboration, we followed a set of frontend standards throughout the development lifecycle.

Component Structure and Code Organization

• Pages were located in src/pages/
• Reusable components in src/components/
• Redux slices and state logic under src/store/

Branch Naming and Commit Strategy

Consistent with backend practices, we applied our Branch Naming Standard and Commit Message Guidelines to maintain Git hygiene:

• Branches: name/frontend/page (e.g., ali-sonmez/frontend/profile-page)
• Commits: feat(component): implement X, fix(ui): resolve spacing bug, etc. (This convention has not always been followed)

API Integration

API requests were made using Axios, allowing centralized request handling and support for interceptors (e.g., attaching auth tokens). Endpoints were managed via a dedicated configuration file under src/api/.

5.4 Challenges and Solutions

Challenge 1: Design-Implementation Gap

Challenge: Translating Visily-based UI designs into components while maintaining responsiveness.

Solution: Material UI’s layout system and theming capabilities helped us achieve a consistent design and responsive behavior across devices.

Challenge 2: State Synchronization

Challenge: Managing shared state between complex components such as request creation and the user dashboard.

Solution: Redux Toolkit was leveraged for centralizing state across the app, while React Hook Form simplified form state and validation.

Challenge 3: Integration with Backend

Challenge: API mismatches or evolving schemas posed risks for integration.

Solution: Since we did not have enough time to communicate and solve the problem with the backend team, we have frequently updated the backend code according to our needs in the frontend/development branch.

5.5 Testing and Quality Assurance

Although not fully implemented across all pages due to time constraints, we began integrating frontend unit and component tests using Vitest.

• Test files were placed under src/tests/
• Mock data simulated backend responses
• Tests validated rendering and basic user interactions

5.6 Lessons Learned

1. Component modularity pays off: Creating reusable components early improved development speed and consistency across the UI.
2. Centralized state management is essential: Using Redux Toolkit streamlined logic across pages and prevented common prop-drilling issues.
3. API coordination reduces rework: Frequent syncing with backend ensured smooth integrations and fewer runtime issues.
4. Material UI provides consistency: Leveraging Material UI reduced the need for custom styling and ensured visual consistency.
5. Implementation Technique: The implementation phase should not follow a strictly sequential model where the backend is completed before the frontend begins. Instead, sub-teams should collaborate closely and work on features concurrently. In our case, following a backend-first approach led to alignment issues between sub-teams, such as mismatches in API expectations and delays in integration.

5.7 Implemented vs. Pending Features

Due to time constraints, we were not able to implement all the features outlined during the design phase.

✅ Implemented and Connected to Backend

These components have been developed and successfully integrated with the backend API:

• Profile Page
  Displays user information, past and active tasks, ratings, and reviews.

• Login/Registration Page
  Includes user authentication via email and password, along with registration using required credentials.

• Home Page
  General landing interface, serving as a bridge to feed and other pages.

• Feed Page
  Shows a personalized list of assistance requests, filterable by category and urgency.

  • Urgency filter returns tasks with the same or higher urgency level.
  • There is no general search functionality (e.g., keyword search) in the current version.

• Create Request Page
  Allows users to post new tasks including title, description, category, location, urgency, etc.

⚠️ Implemented but Not Yet Connected to Backend

These components have been implemented on the frontend but are pending full backend integration:

• Task Details Page
  Displays detailed information about individual tasks. API connections (e.g., fetching details, assigning volunteers) are yet to be integrated.

⛔ Not Yet Implemented

These features are either not yet developed or are under discussion for future sprints:

• Volunteer for a task
• Edit or delete request
• Cancel or update a task
• Task assignment & assignee change
• Ratings & reviews
• Bookmarking and following
• Notifications system
• Task photo upload
• Task recurrence
• Search and filtering enhancements
• Admin/moderation tools
• Labels/tags and filtering by labels
• Review reporting
• Sorting tasks by engagement metrics
• Viewing and editing notification settings
• Viewing volunteer statistics
• Default sorting customization
• Dashboard summary page

Our frontend implementation artifacts can be found in the project repository:

• Frontend Code Structure
• Test Files