Link to Team Issue
Throughout Sprint 3, I mainly worked on the frontend and functionality of our website by styling and formatting the landing page of our platform. This page appears when the page is first opened, meaning the page must be easy to interact with but also contain all the necessary interface for the user to navigate to other pages on the site.
Additionally, I helped me teammates out on the front-to-backend work regarding the group and channel fetching functions and obtaining the data from the
Initially, we decided to go with a horizontally orientated interface with posts on one side and chatboxes on the other side, but we switched to a verticall one which made it easier to scroll for the user and made the posts take up more the screen. We added sample posts at the top to help made the site look more full. HTe styling is within seperate containers and visually appealing. Underneth, the user is able to select from which group and channel they filter posts from. The group will be activity hub and under that, users are able ot interact with which ever club or association they want to recive posts from. The posts format themselves nicely underneath. Users are also able to add thier own posts, which will be querying the post information to be saved and fetched through backend.
One struggle I faced was in our chatroom integration. I made a visually appealing chatroom with text bubble to apear on the container side. At first I struggled wiht a liigning the text bubbles with te text itself. I fixed this by setting the position: relative for the bubble, meaning they will be posiitioned to the center of the texts. I hten added padding: 10px 15px; to the css to ensure the texts were within the perfered areas of the chatroom container.
Another feature I added was emoji reactions to posts, however, without the backend, none of these saved on reload. So, I implemented a temporary function that saved this data in the user’s local storage so that we could easily make the switch to using the backend when needed, though we ended up removing this feature until the backend for this could be sorted out.
My greatest accomplishment in Sprint 3 was implementing these stylings and formatting and troubleshooting the errors. This experience enhanced my skills with CSS and JavaScript and gave me a better understanding of how to create a user-friendly interface. Working on this project also taught me the importance of integrating individual components into a cohesive product. I enjoyed collaborating with teammates, as some focused on backend functionality while others, like me, handled frontend elements. Overall, this sprint was a valuable experience in learning how to manage different parts of a project and bring them together effectively.
async function fetchGroups() {
try {
const response = await fetch(`${pythonURI}/api/groups/filter`, {
...fetchOptions,
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ section_name: "Shared Interest" })
});
if (!response.ok) {
throw new Error('Failed to fetch groups: ' + response.statusText);
}
const groups = await response.json();
const groupSelect = document.getElementById('group_id');
groups.forEach(group => {
const option = document.createElement('option');
option.value = group.name;
option.textContent = group.name;
groupSelect.appendChild(option);
});
} catch (error) {
console.error('Error fetching groups:', error);
}
}
Here is the function that fetches POSTs from the backend, it sends a POST request to the specifically to the filtered backend at ```(/api/groups/filter)`` to retrieve groups filtered by section_name, which in our case was Shared_Interests. The response was then used to populate a dropdown menu for group selection, allowing users to choose from the available options.
