Assembling a community-driven database of knowledge by asking and answering questions.
We want users to be able to ask questions from a variety of themes and have the rest of the community answer them. This knowledge exchange would accumulate into a knowledge database available to everyone on the web.
Many times, asking a question is the fastest path to get help with a problem, and teaching is known to be an outstanding way to learn more about a topic. We decided to aggregate these qualities into a web service that grows over time and promotes sharing knowledge.
The site will have a multi-criteria search tool, where users or guests (no account needed) can find questions filtered by topics. Users will also be able to answer, vote for answers/questions, earn or set bounties for a question and create new topics through a moderated process. User participation and good conduct will be rewarded through an “achievement“ system ranking the most active and helpful users on top of the leaderboards.
Users can also become moderators, which grants them permissions to: remove questions (marking them as duplicates or inappropriate), moderate users, and accept/reject edits suggested by users. A user becomes a moderator by acquiring a certain quantity of reputation, thus showing one's value as a community member. Users can also earn achievements for performing various tasks/reaching certain milestones. On top of the moderator's privileges, administrators are also responsible for approving newly submitted topics, banning users, and removing moderator's privileges from misbehaving users.
Users are separated into groups with different permissions. Moderators have the privilege of deleting questions and comments, closing questions (by marking them as duplicates or inappropriate), and accept/reject edits suggested by other users while Administrators have all the privileges of access and modification site-wide. Registered users can ask and answer questions, comment, and vote (up and down) on answers and comments. Guests can search and consult all questions, answers, comments, and topics.
This section contextualizes the different actors that will access our system and the functionalities they'll have access to. The business rules, technical requirements, and restrictions of the project are also described in this section.
| Identifier | Description | Examples |
|---|---|---|
| User | Generic user that has access to public information, such as questions, answers, comments, and topics | n/a |
| Guest | Unauthenticated user that can register itself (sign-up) or authenticate (sign-in) into the system | n/a |
| Authenticated | Authenticated user that can ask questions, answer questions, post comments, and suggest edits | ifg |
| Author | Authenticated user that posted a question. This user can edit his question and select an answer that has "accepted", closing the question | nachos |
| Moderator | Authenticated user that is responsible for various user/post moderation tasks such as accepting edits, closing questions, and deleting comments | fogao |
| Administrator | Authenticated user that can perform all website administration activities | admin |
| OAuth API | External OAuth API that can be used to register (sign-up)/authenticate (sign-in) into the system | Gitlab |
Here are presented detailed descriptions of the planned functionalities for each actor alongside its priority for the end product.
| Identifier | Name | Priority | Description |
|---|---|---|---|
| US01 | View questions | high | As a user, I want to be able to see all questions |
| US02 | View other profiles | high | As a user, I want to be able to see members' profiles |
| US03 | Question search | high | As a user, I want to be able to search for questions |
| US04 | Filter question | high | As a user, I want to be able to filter questions so that I can find one that interests me |
| US05 | View topics | medium | As a user, I want to be able to see all topics |
| US06 | Filter topics | medium | As a user, I want to be able to filter topics so that I can find one that interests me |
| US07 | View users leaderboard | medium | As a user, I want to be able to see the site's reputation leaderboard |
| US08 | View own profile | high | As a user, I want to be able to see my own profile |
| US09 | View questions leaderboard | medium | As a user, I want to be able to see the site's top questions leaderboard |
| US010 | User search | high | As a user, I want to be able to search for users |
| US011 | Topic search | high | As a user, I want to be able to search for topics |
| Identifier | Name | Priority | Description |
|---|---|---|---|
| US11 | Register | high | As a guest, I want to be able to register a new account so that I can become an authenticated user |
| US12 | Login | high | As a guest, I want to be able to login to my registered account |
| US13 | Password recovery | medium | As a guest, I want to be able to recover my password to my registered account |
| US14 | View news | low | As a guest, I want to be able to see the site's latest news |
| Identifier | Name | Priority | Description |
|---|---|---|---|
| US21 | Edit profile | high | As an authenticated user, I want to be able to edit my profile |
| US22 | Ask question | high | As an authenticated user, I want to be able to ask a question so that it can be answered |
| US23 | Post answer | high | As an authenticated user, I want to be able to answer a question |
| US24 | Vote a question | high | As an authenticated user, I want to be able to upvote and downvote a question |
| US25 | Vote an answer | high | As an authenticated user, I want to be able to upvote and downvote an answer |
| US26 | Log out | high | As an authenticated user, I want to be able to log out from my account |
| US27 | Add comment | medium | As an authenticated user, I want to be able to add a comment to a question or answer |
| US28 | Vote a comment | medium | As an authenticated user, I want to be able to upvote and downvote a comment |
| US29 | Edit own comments | medium | As an authenticated user, I want to edit my own comments |
| US210 | See notification | medium | As an authenticated user, I want to be able to see my notifications so that I can be informed of relevant events |
| US211 | Submit topic proposal | medium | As an authenticated user, I want to be able to submit a topic proposal so that a missing topic can be created |
| US212 | Delete account | medium | As an authenticated user, I want to be able to delete my account |
| US213 | Receive reputation | medium | As an authenticated user, I want to be able to receive 'reputation' points for participating in question threads and getting my content upvoted |
| US214 | Add bounty | medium | As an authenticated user, I want to be able to add a bounty to any question using my reputation |
| US215 | Propose answer edit | low | As an authenticated user, I want to be able to propose an edit to another user's answer |
| US216 | Propose comment edit | low | As an authenticated user, I want to be able to propose an edit to another user's comment |
| US217 | Report user | medium | As an authenticated user, I want to be able to report a misbehaving user |
| US218 | Receive achievements | medium | As an authenticated user, I want to be able to receive achievements when I reach meaningful milestones |
| US219 | Edit profile picture | medium | As an authenticated user, I want to be able to edit my profile picture when I feel like it |
| Identifier | Name | Priority | Description |
|---|---|---|---|
| US31 | Close question | high | As an author, I want to be able to mark an answer to my question as accepted, closing the question thread |
| US32 | Tag questions | high | As an author, I want to be able to tag my questions with topics |
| US33 | Edit questions | medium | As an author, I want to be able to edit my questions |
| US34 | Edit tags | medium | As an author, I want to be able to edit my question's tags |
| Identifier | Name | Priority | Description |
|---|---|---|---|
| US41 | Edit answers | medium | As a moderator, I want to be able to edit a user's answer |
| US42 | Edit questions | medium | As a moderator, I want to be able to edit a user's question |
| US43 | Edit comments | medium | As a moderator, I want to be able to edit a user's comment |
| US44 | Edit question tags | medium | As a moderator, I want to be able to edit a question's tags (topics) |
| US45 | Accept/Reject edit | medium | As a moderator, I want to be able to accept or reject a user's edit proposal |
| US46 | Close question | medium | As a moderator, I want to close a user's question, marking it as duplicate or deleting it if inappropriate |
| Identifier | Name | Priority | Description |
|---|---|---|---|
| US51 | View reported users | high | As an administrator, I want to be able to see a list of reported users |
| US52 | Ban User | high | As an administrator, I want to be able to ban a reported user |
| US53 | View topic proposals | medium | As an administrator, I want to be able to view all topic proposals |
| US54 | Accept/decline topic proposals | medium | As an administrator, I want to be able to accept/decline topic proposals |
| US55 | Remove moderator status | low | As an administrator, I want to be able to remove moderator status from an authenticated user if needed |
| US56 | Add News | low | As an administrator, I want to be able to add news posts to the web site's news section |
A business rule defines or constrains one aspect of the business, to assert business structure or influence business behavior.
| Identifier | Name | Description |
|---|---|---|
| BR01 | Question Ownership | Only the user who posted a question can mark an answer as accepted |
| BR02 | Closing question | A question is only closed in three cases: it has an answer marked as correct, it was marked as duplicate or it was marked as inappropriate |
| BR03 | Single accepted answer | A question can only have one accepted answer |
| BR04 | Account deletion | When a user deletes its account, its questions, answers, and comments are still kept in the system and publicly available. Only his profile and personal information are deleted |
| BR05 | Self voting | A authenticated user cannot vote on its own questions, answers, or comments |
| BR06 | Self-moderation | A moderator cannot perform moderation activities on its own questions. |
| BR07 | Single bounty | A question can only have 1 bounty. |
| BR08 | No reopening questions | Closed questions can't be re-opened. |
Technical requirements are concerned with the technical aspects that the system must meet, such as performance-related issues, reliability issues, and availability issues.
| Identifier | Name | Description |
|---|---|---|
| TR01 | Availability | The system must be available 99 percent of the time in each 24-hour period |
| TR02 | Accessibility | The system must ensure that everyone can access the pages, regardless of whether they have any handicap or not, or the Web browser they use |
| TR03 | Usability | The system should be simple and easy to use |
| TR04 | Performance | The system should have response times shorter than 2s to ensure the user's attention |
| TR05 | Web application | The system should be implemented as a Web application with dynamic pages (HTML5, JavaScript, CSS3, and PHP) |
| TR06 | Portability | The server-side system should work across multiple platforms (Linux, Mac OS, etc.) |
| TR07 | Database | The PostgreSQL database management system must be used |
| TR08 | Security | The system shall protect information from unauthorized access through the use of an authentication and verification system |
| TR09 | Robustness | The system must be prepared to handle and continue operating when runtime errors occur |
| TR10 | Scalability | The system must be prepared to deal with the growth in the number of users and their actions |
| TR11 | Ethics | The system must respect the ethical principles in software development (for example, the password must be stored encrypted to ensure that only the owner knows it) |
| TR12 | Delivery | The product shall be delivered in a pre-configured Docker image |
Of these, the most important are: Accessibility (TR02), Usability (TR03), and Scalability (TR10). We should focus on these because the web app should be accessible to everyone despite any disabilities they might have. The web app will grow faster the more users we have, so we need to be able to keep up with the growth.
A restriction on the design limits the degree of freedom in the search for a solution.
| Identifier | Name | Description |
|---|---|---|
| C01 | Deadline | The system should be ready to be used at the end of the second semester |
Segmentation fault is a community for sharing knowledge online. People are encouraged to ask and answer questions, thus sharing what they know and leaving behind information to help others in the future.
This artefact aims to prototype the user interfaces and show how they interact with each other. It provides an overview of the interface elements and features, the sitemap, and wireflows of our project.
Segmentation fault is a web application based on HTML5, JavaScript and CSS. The user interface was implemented using the Bootstrap framework.
- Header Area
- Main Navigation Area
- Navigation Elements - Sidebar, Navbar
- Search Elements - search box
- Main Content Area
- Footer Area
Figure 1: Interface's guidelines.
In this picture, we highlighted the common characteristics of all pages:
- We implemented a responsive design.
- The sidebar is collapsible so the user can focus on the page's content without the sidebar taking much of the space of the screen.
- The page title is displayed on both the navigation bar and on the sidebar so the user can easily identify it.
- The search bar is kept on the navigation bar for both the desktop and mobile screens. This makes it consistent and easier for the user to search on our website from any page.
- The user can easily log in and sign up from the sidebar without the need to leave the current page.
- The current page is highlighted on the sidebar to make it stand out.
This is a visual representation of the relationship between the different pages of a website.
Figure 2: Sitemap.
The wireflows were designed in InVision.
Figure 3: Wireflow for navigation within the website.
Figure 4: Wireflow for authentication.
Figure 5: Wireflow centered on the admin area.
Figure 6: Wireflow centered on the user area.
Screenshots, structured in subsections, including a reference, a description, and a URL to the working version.
Page inventary:
- UI01: Home
- UI02: About
- UI03: News
- UI04: Profile
- UI05: Leaderboard
- UI06: Question
- UI07: Add Question
- UI09: Administration
Guest Vision:
Figure 7: Home Page - Desktop Guest Vision
Figure 8: Home Page - Mobile Guest Vision
Administrator Vision:
Figure 9: Home Page - Desktop Administrator Vision
Figure 10: Home Page - Mobile Administrator Vision
Description: The home page is responsible for presenting the website. It highlights the main features and invites the user to register an account. When the user is logged in, the login and sign-up buttons disappear. An authenticated user can see that he is authenticated and check his notifications. An administrator is able to see a link to the administration page.
Figure 11: About Page - Desktop
Figure 12: About Page - Mobile
Description: The about page contains more detailed information about the website and its developer team.
Figure 13: News Page
Figure 14: News Page - Mobile
Description: The news page is a way for users to keep up with the latest news related to the website.
Profile - About Tab
Figure 15: Profile Page - Desktop About Tab
Figure 16: Profile Page - Mobile About Tab
Profile - Activity Tab
Figure 17: Profile Page - Desktop Activity Tab
Figure 18: Profile Page - Mobile Activity Tab
Profile - Achievements Tab
Figure 19: Profile Page - Desktop Achievements Tab
Figure 20: Profile Page - Desktop Achievements Tab
Description: The profile page presents the public information (about, activity, achievements) about a user in an organized way.
Figure 21: Leaderboard Page
Figure 22: Leaderboard Page Mobile
Description: The leaderboard shows the current top users and questions on the website.
Authenticated Vision:
Figure 23: Question Page - Desktop Authenticated Vision
Figure 24: Question Page - Mobile Authenticated Vision
Administrator Vision:
Figure 25: Question Page - Desktop Administrator Vision
Figure 26: Question Page - Mobile Administrator Vision
Description: A question's page shows the information about a question:
- Title
- Description
- Topics
- Bounty
- Author
- Replies
- Comments
Figure 27: Add/Edit Question Page - Desktop
Figure 28: Add/Edit Question Page - Mobile
Description: The add questions page is the page where the user inputs the question information (title, description, bounty, and topics) in other for other users to reply.
Figure 29: Search Results Page - Desktop Questions Tab
Figure 30: Search Results Page - Mobile Questions Tab
Figure 31: Search Results Page - Desktop Questions Tab
Figure 32: Search Results Page - Mobile Questions Tab
Description: The search results page presents the users and questions that match a user's input on the website search bar.
Figure 33: Administration Page - Desktop.
Figure 34: Administration Page - Mobile.
Description: The administration page represents an area where an admin user can apply consult topic proposals, user reports, and moderator reports.
Changes made to the first submission:
-
Divided US02-View profile into two user stories: US02-View other's profiles and US08-View own profile
-
Added US219-Edit profile picture
-
Added US13-Password recovery
-
Added US14-View news
-
Divided US07-View leaderboard into two user stories: US07-View users leaderboard and US09-View questions leaderboard
-
Divided US03-Search into two three stories: US03-Question search, US010-User search and US011-Topic search
-
Updated US priority from low to medium: US214, US217, US218
GROUP2113, 14/03/2021
- Ana Inês Oliveira de Barros, up201806593@fe.up.pt (Editor)
- João de Jesus Costa, up201806560@fe.up.pt
- João Lucas Silva Martins, up201806436@fe.up.pt
- Ricardo Jorge Cruz Fontão, up201806317@fe.up.pt