MVP Individual Contribution ‐ Sezin Dogan - bounswe/bounswe2026group4 GitHub Wiki
Sezin Dogan (Frontend)
1. Responsibilities:
I focused primarily on frontend development, building the core content browsing and discovery features of the platform. My work spanned the full lifecycle of user-facing features: from the initial registration experience and shared UI components to the feed, story detail, and the search and filter system that the customer emphasized as critical. I also contributed to wiki organization, various design and documentation efforts throughout the project.
2. Main Contributions:
- Set up the initial Docker environment for frontend development.
- Implemented the registration page with comprehensive form validation and unit tests.
- Built the feed view with story cards and pagination support.
- Created the story detail page with full narrative display and metadata rendering.
- Implemented the search bar and filter panel with time and location filters.
- Built shared UI components: loading skeletons, error states, empty states, and toaster notifications.
- Fixed navigation issues including duplicate controls and small view responsiveness problems.
- Added story interactions like/comment integration on the detail page.
- Managed wiki organization (both sidebar and home page) throughout the semester to ensure easy navigation.
- Prepared the communication plan documentation.
- Prepared the Milestones Roadmap Document to serve as an overview of our milestone scopes.
- Organised various meeting agendas and took notes in multiple meetings.
- Acted as the speaker during the stakeholder meetings and clearly communicated our elicitation questions to the stakeholders, ensuring high quality feedback.
3. Significant Issues (Top 3 per category):
Code-Related:
- Issue #161: Implement the search bar and time/location filter panel — a critical filtering feature the customer explicitly demanded, enabling users to discover stories by keyword, date range, and geographic location.
- Issue #158: Build the feed view with story cards and pagination — the main content browsing interface that all users land on, requiring performant rendering and correct pagination behavior.
- Issue #159: Create the story detail page with full narrative display and metadata — the page where users read full stories, see media, and interact through likes and comments.
Non-Code-Related:
- Issue #41: Integrated discussed changes into the Functional Requirements document — merging admin and moderator roles into a single role, eliminating redundant requirements, clarifying timeline feature specifications, streamlining complaint and reporting procedures, and ensuring consistency across all functional specifications based on decisions from the second weekly meeting.
- Issue #307: Created and finalized the Communication Plan document, defining team communication channels, response time expectations, and meeting norms for the project.
- Issue #309: Organized the wiki home page and sidebar to make project documentation more navigable and consistent for the whole team.
4. Pull Requests:
- PR #137: Added the initial Dockerized frontend setup with the necessary configuration to run the frontend in a container during local development.
- No feature-level automated tests needed; verified that the frontend ran correctly in the containerized setup. - No dedicated test file.
- PR #146: Implemented the registration page with client-side form validation covering required fields, password strength, and email format, integrated with
POST /auth/register/viaauthService.js.- Added 22 unit tests covering valid/invalid inputs, validation error states, loading states, and successful form submission. -
frontend/src/pages/__tests__/RegisterPage.test.jsx
- Added 22 unit tests covering valid/invalid inputs, validation error states, loading states, and successful form submission. -
- PR #232: Implemented shared UI primitive components —
LoadingSpinner,Skeleton/SkeletonCard/SkeletonPage,ErrorState,EmptyState, and aToaster/ToastProvider/useToastnotification system — used consistently across the application. Wired toast notifications into login and registration flows and added aNotFoundPage404 catch-all route.- Added tests for
NotFoundPage,ErrorState,EmptyState,LoadingSpinner, andToasterrendering and behavior. -frontend/src/pages/__tests__/NotFoundPage.test.jsx,frontend/src/components/ui/__tests__/EmptyState.test.jsx,frontend/src/components/ui/__tests__/ErrorState.test.jsx,frontend/src/components/ui/__tests__/LoadingSkeleton.test.jsx,frontend/src/components/ui/__tests__/LoadingSpinner.test.jsx,frontend/src/components/ui/__tests__/Toaster.test.jsx
- Added tests for
- PR #238: Implemented the feed view — the main home interface — displaying
StoryCardcomponents in a 3-column responsive grid with pagination controls, loading skeleton states, and error/empty state handling.- Added tests for
StoryCardrendering andstoryCardUtilsformatting logic. -frontend/src/components/StoryCard/__tests__/StoryCard.test.jsx,frontend/src/services/__tests__/storyService.test.js - Added tests for
FeedPageview -frontend/src/pages/__tests__/FeedPage.test.jsx
- Added tests for
- PR #247: Fixed duplicate navigation controls and an unresponsive layout on mobile by removing conflicting nav elements and applying responsive CSS.
- Updated
AppLayoutandFeedPagetests to reflect the corrected navigation structure. -frontend/src/components/AppLayout/__tests__/AppLayout.test.jsx,frontend/src/pages/__tests__/FeedPage.test.jsx
- Updated
- PR #262: Implemented the story detail page at
/stories/:id, displaying title, metadata (location, time period, contributor, date), a read-only Leaflet map centered on story coordinates, images, and narrative text.- Added 22 unit tests for
StoryDetailPage(loading, loaded, not-found, error, retry, optional fields, time period formats, map/image rendering) and 4 tests forStoryDetailMap. -frontend/src/pages/__tests__/StoryDetailPage.test.jsx,frontend/src/components/StoryDetailMap/__tests__/StoryDetailMap.test.jsx
- Added 22 unit tests for
- PR #275: Implemented the frontend search bar and filter panel supporting keyword search, year range, and location filters across both Feed and Map views. Filter state is persisted in the URL for shareable links.
- Added tests for
SearchFilter,FilterPanel,ActiveFilters,SearchBar, anduseFilterStatecovering filter application, clearing, debounce behavior, and rendering states. -frontend/src/components/SearchFilter/__tests__/SearchFilter.test.jsx,frontend/src/components/SearchFilter/__tests__/FilterPanel.test.jsx,frontend/src/components/SearchFilter/__tests__/ActiveFilters.test.jsx,frontend/src/components/SearchFilter/__tests__/SearchBar.test.jsx,frontend/src/hooks/__tests__/useFilterState.test.jsx,frontend/src/services/__tests__/storyService.test.js,frontend/src/pages/__tests__/FeedPage.test.jsx
- Added tests for
- PR #291: Refined the story card UI with improved visual layout and enforced character limits to prevent card overflow in the feed grid.
- Updated
StoryCardtests to cover the revised layout and character-limit truncation behavior. -frontend/src/components/StoryCard/__tests__/StoryCard.test.jsx
- Updated
- PR #296: Refined the story detail page by integrating
LikeButton(with optimistic updates and unauthenticated fallback) andCommentSection(paginated display, add/delete comment form), and image displays.- Added 430+ lines of tests for
CommentSection(loading, error, CRUD, pagination) and updatedLikeButton.test.jsx,StoryDetailPage.test.jsx, andSubmitStoryPage.test.jsxwithToastProviderwrappers. -frontend/src/components/Interactions/__tests__/CommentSection.test.jsx,frontend/src/components/Interactions/__tests__/LikeButton.test.jsx,frontend/src/pages/__tests__/StoryDetailPage.test.jsx,frontend/src/pages/__tests__/SubmitStoryPage.test.jsx
- Added 430+ lines of tests for
- PR #314: Made the "Submit Story" button always visible in the navigation bar for better discoverability and UX flow regardless of authentication state.
- Updated tests for
AppLayoutandLoginPageto reflect the new navigation behavior. -frontend/src/components/AppLayout/__tests__/AppLayout.test.jsx,frontend/src/pages/__tests__/LoginPage.test.jsx
- Updated tests for
- PR #339: Fixed a navigation bar layout conflict on mobile view caused by overlapping element positioning.
- Verified correct mobile layout rendering after the fix. - No dedicated test file.
- PR #346: Increased the number of visible map pins to allow more stories to be displayed on the map simultaneously — directly improving the demo experience.
- Updated
storyServicetests to reflect the increased pin limit. -frontend/src/services/__tests__/storyService.test.js
- Updated
Reviewed
- Reviewed and merged PR #344: Automatic token refresh interceptor that retries requests after refreshing the JWT instead of immediately logging out on 401.
- Reviewed and merged PR #332: Story deletion flow with confirmation dialog, authorization checks, toast feedback, and redirect to feed.
- Reviewed and merged PR #290: Auth session persistence fix that restores tokens and user state from localStorage on page refresh.
- Reviewed and merged PR #250: Story submission form with a Leaflet map picker, time period inputs, image validation, and multipart upload.
- Reviewed and merged PR #249: Interactive map view displaying story pins on an OpenStreetMap Leaflet map with popup previews.
- Reviewed and merged PR #248: User profile page showing account info and a paginated grid of the user's submitted stories.
- Reviewed and merged PR #239: App layout shell with a persistent header, responsive hamburger menu, and auth-aware navigation links.
- Reviewed and merged PR #142: Login page with backend integration, JWT token storage, and accessibility improvements.
5. Additional Information
- Organized 3 meeting agendas and maintained wiki documentation throughout the milestone, keeping team records accessible and up to date.
- Fixed critical UX issues that directly improved the demo experience: enforcing character limits on story cards prevented layout breakage, and increasing the map pin limit ensured more stories were visible during the live demo.
- Coordinated with the backend team on API integration details, bridging alignment between frontend expectations and backend responses throughout the implementation phase.
- Did extensive manual end to end testing on the web app, detected 5 bugs and opened issues for all of them, making sure the related team was informed.
- Took active roles in all meetings, ensuring no important points/topics were forgotten or overlooked.
- Took an active role as the Web Narrator in the MVP Presentation.