In this Sprint, I learned about linking frontend actions to a backend Flask database.

Preparation

To prepare for this Sprint, my team and I created an issue to keep track of each task we needed to complete over the course of the project. This issue is linked below.

https://github.com/blackstar3092/risha_guha_2025_1/issues/8#issue-2660444958

We developed a site frontend plan to organize the aspects of our chat room that needed to be coded later in the Sprint. Though our final project differs slightly from our original plan, creating a map of frontend elements and their respective links to the backend helped us organize our collective ideas and collaborate effectively when coding.

Learnings

Here is a list of all of the skills I learned in each of the following lessons:

  • HTML and CSS Styling, including creating buttons, subcategories, dropdown menus, and embedded picture backgrounds
  • Assigning tags and classes to HTML objects
  • Flask backend server with databases
  • Storing information in a database with appropriate post requests in the script sections of HTML code
  • Fetching information from the database using IDs and preconfigured database organization
  • Concept of users, groups, channels, and posts in a tree-based heirarchy

Project Purpose

The purpose of the Sprint 3 was to create an interactive social media platform where users can express their preferences for various items in a certain category. The category for our period was Vote for the Goat, where users vote for their favorite item regarding a certain piece of Del Norte culture. For Sprint 3, my group chose to create a voting platform for the Nighthawk Dnero Store. We split our patform into four categories: Food and Drink, Spirit, Limited Edition, and Gift Cards. Users can select their favorite and least favorite items from these categories, contribute comments, and view posts from others in real-time. This project falls under the social media category, as it encourages user interaction through commenting and posting, while also incorporating elements of productivity by facilitating the collection of preferences and opinions.

Understanding and Development

Ensuring understanding of this task helped us develop it because until we understood the assignment of creating a chatroom, we were unable to accurately create the voting platform, as we were spending too much time on the liking element as opposed to the commenting element. As our project evolved, the necessity for a dynamic post submission form and backend integration became clear. The development process involved ensuring a smooth interaction between the frontend (user interface) and backend (database) to allow users to select items, post their preferences, and view others’ posts.

Inputs

Our inputs in this project were user interactions such as:

  • Selecting an item as a favorite or least favorite.
  • Filling out the post submission form with a title and comment.
  • Choosing a group and channel from dropdown menus for submitting posts.

These inputs are captured using HTML form elements and buttons, with JavaScript handling the logic to display forms and capture selection details.

Events

Events are generated when users interact with the page, such as:

  • Clicking on an item button (to select it as a favorite or least favorite).
  • Submitting the post form (triggering a post creation event).
  • Selecting a category, group, or channel, which dynamically updates the form.

These events are processed by JavaScript functions that alter the UI (e.g., changing button colors, showing the post form) and communicate with the backend (e.g., sending the post data to the server).

Outputs

Outputs include:

  • The dynamic display of the items based on user interaction (buttons for selecting items).
  • The post form that appears when an item is selected.
  • The categorized posts appearing below each item list once submitted by the users, fetched dynamically from the backend.

User Interface Design

The user interface is designed with clear, interactive elements:

  • Category Boxes: Each category has a collapsible section for selecting favorite and least favorite items within a specific subcategory of the Dnero Store.
  • Post Form: Once an item is selected, the post form is revealed, allowing users to create a post with a title, comment, and associated category.
  • Post Display: Posts from users are dynamically fetched and displayed under the relevant category at all times, showing users what other people think.

Data Definition

The backend manages data such as:

  • Posts: Containing fields for title, comment, channel_id, and user information.
  • Categories: “Food and Drink”, “Spirit”, “Limited Edition”, and “Gift Cards” are predefined as channels for posts.
  • Items: The items users can select (e.g., “Trail Mix”, “Pizza”, “Morning Song”). The data structure supports dynamic filtering and displaying of posts based on category, using the channel_id to link posts with specific items.

Individual Coding Knowledge:

My personal coding contributions include:

  • Writing JavaScript Functions: Writing functions like selectItem to manage item selection and toggle the post form, and fetchPosts to load posts dynamically.
  • Backend Integration: Using the fetch API to send and receive data from the backend (for fetching posts and submitting new ones).
  • UI/UX Design: Implementing the layout using HTML and CSS, as well as designing colors and buttons to match a cohesive theme.

Frontend Coding

The frontend is organized as follows:

  • HTML: Structure for displaying categories, item lists, and the post form.
  • CSS: Styling to ensure a consistent and attractive design.
  • JavaScript: Handles the user interactions (item selection, form display, data fetching). The toggleItems function shows or hides item lists, while selectItem handles the logic for selecting an item, changing button colors, and revealing the post form.

Backend Coding

The backend handles the data storage and retrieval:

  • API: The backend exposes endpoints for fetching posts (/api/posts), filtering them by category, and posting new data (/api/post).
  • Database: The backend stores user posts, categories, and item selections, which are retrieved by the frontend when users interact with the page. It also ensures that data is properly stored with each post, including the user’s comment and the selected category.

This separation allows the frontend to handle user interactions and display logic while the backend focuses on data management and serving the correct information when requested.

Personal Growth

My personal accomplishment of Sprint 3 was creating a functional chatroom where people can discuss their favorite and least favorite items in the Dnero Store of DNHS. I learned integration, and as one of the Backend people of my Agile Scrum group, I worked with Mr. Mortensen to learn about POST and GET requests and how I can create those requests through the different elements of our code.

Beginning 2 End Contribution

I collaborated with my teammates throughout the course of this project, as evident with my commit history to the Flocker_Frontend and Backend repositories.

Link to my Sprint 3 Team Chat Page

SPRINT 3: DNERO Store Chatroom