owned this note
owned this note
Published
Linked with GitHub
### SWE 574 Software Development As A Team
### Individual Contributions - Group 1
### Deniz Baran ASLAN - 2021719183
### Summary:
As a member of the frontend team, I designed several pages of the web application, fixed frontend bugs, implemented a custom dark theme, contributed to my teammates' implementations and made adjustments to the default theme, fonts, and header.
I also served as the note taker to document and moderate general meetings, maintained our project's wiki and presented our progress at milestone meetings.
### Documentation I Wrote:
As I was responsible for the wiki, I wrote many of the pages we have with contributions from teammates. Mainly: the homepage, conventions, communication plan, responsibility matrix, requirements, milestones and deliverables, user scenarios, meeting notes, and the team distributions. I was also the major contributor of the three milestone reports as per my role. In addition to authoring these documents, I proofread and corrected everyone's issue descriptions and pull requests as well.
### Most Significant Feature I Implemented:
The most significant feature I implemented in the project is the dark mode. As seen in issue [#299](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/299) and pull request [#314](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/314), I had to create a custom React theme, design the new theme, implement it for the relevant elements, and inspect each page thoroughly to fix the elements that did not integrate properly. This task was made more challenging due to our use of Material UI, which overrides CSS parameters for certain elements. I had to build a custom theme because the built-in dark theme of Material UI did not integrate well with our application. In order to make it work, I had to use in-line styling on many elements. See the screenshots below for the end result:


### Challenges I Faced:
* Material UI: MUI is a React component library that normally makes frontend development faster and more convenient. Unfortunately, it made our project more difficult to design. This is because it overrides certain defaulta and its component need to be styled differently thank regular HTML elements. It would take too much effort to remove or replace it in our frontend, and the result would not look appealing to the eye. As such, I was stuck styling its element sseparately using alternate solutions, and development took twice as long.
* Rebuilding Docker Image: Initially, I had to rebuild the Docker frontend image each time I changed a line of code, so that I could see it in action and test it. This meant that I had to wait around five minutes even for the tiniest change to take effect, such as increasing font size on a button. Development was too slow. Thankfully, Sadık solved this issue by coming up with an alternative, which is to run the frontend locally with npm without dockerizing it.
* Browser Discrepancies: I had to build and test each frontend feature for multiple browsers, since the discrepancies in their rendering meant the web app would look different in every browser. This took too much time, and I eventually settled for just Google Chrome and Firefox, with a few checks for Safari as well.
### Requirements I Addressed With My Work:
|Number|Requirement|
|-|-|
|F-1.4|The system shall display warning notifications when the user enters non-valid form inputs while registering.
|F-2.9|The system shall allow users to edit their memories’ content.
|F-2.17|The system shall allow users to edit their memories’ title.
|F-2.18|The system shall allow users to edit their memories’ time.
|F-2.19|The system shall allow users to edit their memories’ tag.
|F-2.20|The system shall allow users to edit their memories’ tag label.
|F-2.21|The system shall allow users to edit their memories’ location.
|F-6.15|The system shall allow users to see search results as a timeline by sorting ascending and descending
|NF-2| The system shall be available as a Web application.
|NF-3| The system shall support web browsers such as Google Chrome, Microsoft Edge, and Mozilla Firefox.
|NF-4| The system shall be available in English.
|S-2.3| The system shall have dark mode support.
### Issues I Was Assigned and Handled:
|Number|Issue Title & Description|
|-|-|
|#336|[Address frontend test warnings](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/336)
|#322|[Reduce "Create New Memory" button font-size](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/322)
|#321|[Put some space above the logo](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/321)
|#316|[Fix logout button](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/316)
|#315|[Record Demonstration Videos](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/315)
|#312|[Create deliverables table](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/312)
|#301|[Plan cross-team meetings](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/301)
|#300|[Clean up issues and pull requests](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/300)
|#299|[Implement dark mode](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/299)
|#297|[Improve timeline response formatting](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/297)
|#295|[Write final milestone report](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/295)
|#285|[Implement frontend pop-up warnings](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/285)
|#282|[Fix following stories font](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/282)
|#240|[Fix frontend fonts](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/240)
|#175|[Create sample memory for professor](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/175)
|#174|[Write new user scenarios](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/174)
|#173|[Write milestone 2 report](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/173)
|#172|[Redesign search frontend](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/172)
|#171|[Redesign memory viewing screen](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/171)
|#170|[Redesign memory creation screen](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/170)
|#163|[Fix login page scaling](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/163)
|#111|[Add feature to edit memory content](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/111)
|#87|[Upload mockups directly to repo](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/87)
|#73|[Create responsibility assignment matrix](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/73)
|#72|[Create communication plan](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/72)
|#71|[Create additional design documents and plans](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/71)
|#69|[Proofread and fix typos](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/69)
|#68|[Improve frontend design](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/68)
|#64|[Write milestone 1 report](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/64)
|#59|[Determine branch use for trivial changes](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/59)
|#58|[Get milestone report template](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/58)
|#47|[Hold first frontend meeting](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/47)
|#44|[Get on the same page](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/44)
|#40|[Adjust Milestone 1 Deliverables](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/40)
|#38|[Create Scenarios for Milestone 1](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/38)
|#29|[Organize and revise requirements](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/29)
|#12|[Organize the sidebar of the wiki ](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/12)
|#6|[Clean up Requirements](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/6)
|#2|[Create custom issue labels](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/2)
|#1|[Create custom sidebar](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/issues/1)
### Pull Requests I Opened And Merged:
|Number|Pull Request Title & Description|
|-|-|
|#372|[Imp/336 address frontend test warnings](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/372)
|#323|[Imp/321 322 minor frontend fixes](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/323)
|#320|[Bug/Fix misaligned headers #316](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/320)
|#317|[Bug/316 Fix Logout Button](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/317)
|#314|[Feature/299 implement dark mode](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/314)
|#311|[Feature/285 implement frontend pop up warnings](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/311)
|#310|[Feature/297 improve timeline response formatting](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/310)
|#296|[Merge final report to dev branch](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/296)
|#289|[Fix remaining wrong fonts](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/289)
|#280|[Bug/163 fix login page scaling](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/280)
|#279|[Apply Josefin Sans font to profile memory list, search results, homepage](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/279)
|#199|[Feature/172 redesign search frontend](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/199)
|#198|[Feature/171 redesign memory viewing screen](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/198)
|#182|[feature/170 Redesign memory creation screen](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/182)
|#94|[Merge milestone 1 report](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/94)
### Pull Requests I Reviewed
|Number|Pull Request Title & Description
|-|-
|#357|[Feature/356 frontend minor refinements](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/357)
|#355|[Feature/354 unit test for recommendations page](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/355)
|#352|[340 unit test for profile pages](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/352)
|#351|[Dev->Main #321 #322 #324 #326 #332 #335 #328 #299 #331 #342 #341 #346 #340 #348 #349 #340 #354 #356 #358 #360 #362 #364 #366 #368 #370](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/351)
|#339|[Add AllStories component test](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/339)
|#338|[Feature/331 minor refinements](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/338)
|#337|[Feature/335 frontend unit test coverage](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/337)
|#333|[Add Register Unit Test](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/333)
|#330|[Bug/328 time edit runtime error](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/330)
|#309|[Dev->Main #240 #274 #277 #283 #287 #288 #284 #163 #302 #303 #306 #281 #282 #297 #316 #313](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/309)
|#235|[Add Search semantic tag feature on search](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/235)
|#231|[Fix story author photo](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/231)
|#190|[Reports->Main Milestone-2](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/190)
|#165|[Dev->Main #101 #105 #81 #109 #100 #124 #120 #131 #133 #123 #124 #136 #138 #135 #103 #108 #122 #145 #147 #152 #157 #161 #158 #166 ](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/165)
|#146|[feature/145-register-page-design](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/146)
|#93|[Dev->Main #75 #77 #89](https://github.com/SWE574-Fall2023-Group1/SWE574-Fall2023-G1/pull/93)