Skip to content

Week 3 - CI/CD and more features

During this week you will enhance your application with more features and implement automated quality assurance through CI/CD pipelines.

Development requirements

This week you will receive additional user stories. You will need to implement these, keep in mind that all the week 2 user stories are also still required.

As a user, I want to receive clear feedback when something goes wrong so that I understand what happened and how to proceed.
  • All error messages should appear as popup notifications on the frontend.
  • Error messages should be clear and helpful (e.g., "Failed to upload image: file too large" rather than "Error 500").
  • Examples of errors to handle: failed post submission, image upload failures, network connectivity issues.
As a user, I want to control when error messages are dismissed so that I can read them at my own pace and not lose important information.
  • Error popups must have a close button that the user needs to click to dismiss them.
  • Popups should not auto-dismiss - user interaction is required.
As a user, I want to see the most current content when I refresh the page or interact with posts so that I'm always viewing up-to-date information.
  • When multiple users are using the application simultaneously, refreshing the page should show all recent posts and vote counts.
  • If someone else adds a post while I'm viewing the page, refreshing should show their new post.
  • If someone else votes on a post, refreshing should show the updated vote count.
  • The application should handle concurrent voting correctly (no lost votes or incorrect counts).
  • Consider race conditions when multiple users vote on the same post simultaneously.
As a user, I want to be able to add pictures to my posts so that I can share visual content along with my thoughts.
  • There should be an option to upload an image when creating a post.
  • Users can create posts with text only, image only, or both text and image.
  • Uploaded images should be displayed within the post on the main page.
  • Support common image formats (JPEG, PNG, GIF).
As a user, I want to see titles on posts so that I can quickly understand what each post is about before reading the full content.
  • There should be a separate input field for the post title when creating a post.
  • Titles should be mandatory.
  • The title should be displayed prominently above the post content.
  • Titles should have a character limit to ensure reasonable length for display.

Operations requirements

This week you should move your local code validation tools to the GitLab CI/CD environment.

GitLab CI/CD

GitLab CI/CD uses a .gitlab-ci.yml file in your repository root to define automated workflows called pipelines. By default, these pipelines run every time you push code. You should already have this file from the first week, where we asked you to create a simple "hello world" pipeline to verify your GitLab setup was working correctly.

But now, your pipeline must automatically run the same quality checks you've been doing locally: linting, formatting, and unit testing. The exact structure is flexible - you can organize these checks as separate stages or combine them into a single stage.

Pipeline failure policy

The pipeline must fail if ANY of these stages fail. This is a fundamental principle of CI/CD that prevents broken or poorly formatted code from entering your main branch.

Documentation requirements

What we expect your documentation to have?

Refer back to the week 2 documentation.

  • Do you need to update anything you wrote last week?

Pipeline documentation

  • How is your pipeline structured?
  • What does your pipeline do?

Image storage

  • How did you handle image storage?

Tasks

  • Go through the user stories and implement all new features.
  • Set up a CI/CD pipeline that runs your code validation steps.
    • Formatting, linting and unit testing.
    • Pipeline must fail if any step fails.
  • Go through the documentation requirements and make sure to keep your documentation up to date.