CSharpLiveScrumProject

Introduction

This project adds a Blog Photos section to a client's pre-existing web app. The client desires a Blog Photos section on their website for providing timely, engaging news to their customers. Created during a two-week Sprint, the blog section is written in C# using ASP.NET MVC and contributes to the web app's existing codebase. For simplicity, only code for the blog is included in this repository. The Blog Photos section has a clean and engaging UI made possible by the Bootstrap4 toolkit and the use of custom CSS classes.

Front End

The front end consists of features commonly found in a blog. The Landing Page provides a place for all blog posts to be displayed. Each post is contained within a Bootstrap card, which is an extensible content container. The number of columns containing cards depends on the window size; hence, this solution scales well for any window size, including mobile. Hovering over a card reveals more information, including options for viewing details, editing, or deleting the post.

Selecting the Details option simply displays the blog photo and title in a more expanded format in a new page. The Edit page allows for the changing of the blog title and/or photo. Selecting the Delete option takes the user to a confirmation page for verification of removal of the blog post.

A new blog post can be created by selecting Create New from the Landing Page. Once selected, a new page opens for entering a blog title and selecting a photo from the file system.

CSS styling for the Blog Photo section is consistent with the color and font schema of the overall web app.

Back End

The Model contains the properties of a blog post. Entity Framework is used to create a code-first database which links to the model. Thus the database is contained in MS SQL Server. Entity Framework is also used to scaffold the CRUD pages (in this case, the pages for Create, Details, Edit, and Delete).

One of the more complex aspects of the back end is storing and retrieving blog photos. The storage of photos is handled by the Controller's Create action method. Within this method, a separate PhotoConvert method is called and passed a photo object of type HttpPostedFileBase. This PhotoConvert method contains a BinaryReader object which is used to convert the photo to a byte array for proper storage in the database.

The ViewImage method, also contained within the Controller, receives a photo's byte array from the database, buffers the photo, and returns a File object containing the buffered photo. The ViewImage method is called from numerous Views pages, such as in the Index page here.

Agile Development Highlights

This project was created during a two-week Sprint using Microsoft Azure for DevOps. As is typical of many Sprints, events such as the Kick-Off, daily Scrums, and weekly Retrospectives were part of the development. A total of 7 Stories were required to reach Blog Photo project completion. For an example of a Story, see this one for adding Bootstrap cards to the Index page. While only a single software developer was assigned to the Blog Photos section, other developers focused on Stories relevant to other parts of the website. For an example of the dev team's Story Board at one point in time, see this screenshot.

The software dev team successfully completed all required Stories within the Sprint. Special recognition should be given to the Scrum Master for coordinating the efforts of the team and handling external issues along the way.