Master C# Logo banner
Welcome to - Master C#, the easy way... - by Saurabh Nandu


Building an HTML5, ASP.NET MVC 4 based website - Part1

by Saurabh 22. May 2012 03:05

Part1 – User Story Definitions


Every year technology keeps changing and as developers we need to keep track of the latest upcoming technologies to stay relevant in this competitive game. In this series of blog posts I am going to document my journey of creating an HTML5 based website trying to use the latest relevant technology. The whole point of this series of articles is to give the you a glimpse of the process and few decisions that are involved in building a website. Often we come across various articles and demo’s which do a good job of keeping focus on the code. My motive in this series of articles is to not only show the code, but put more focus on the background process which involves lot of decisions and choices that are faced when creating a real world website. – The Website

In this series of articles I’ll be documenting the process of building a Mehndi Design ratings website. To understand more about Mehndi/Henna designs you can read up further at Wikipedia. In short Mehndi/Henna is a traditional form of temporary skin tattoo, extremely popular in Asian countries. The website will act as a platform for artists as well as end users to post their Mehndi designs and also rate and comment on designs posted by other members. The site features will be very similar to many other rating websites like RateMyKitten, RateMyPuppy etc. 

Why build this site?

As stated earlier, the point of blogging these articles was to try to understand the background process and choices. Likewise, when I was looking to spend some time updating myself on the latest technologies, I wanted to build a relevant website that could be quickly coded as well as something that was useful too. Going through several ideas and finding them already done, the first step was to pick a niche area that was unique as well as had enough users market. In my case, I do know that locally Mehndi Designs are very popular amongst ladies, Mehndi application is considered auspicious and used in many religious ceremonies like weddings etc.
Although, Mehndi design is fairly popular amongst teens, googling I could not find a single large community which focused entirely on Mehndi designs. Another observation that I made locally was that lot of Mehndi artists are from economically backward sections of the society, not having enough resources to promote their art online. Today they purely rely on word of mouth advertising to get new customers. I wanted to build a platform where they could showcase their designs, helping them in marketing their art.

So out of these observations I figured its best to build a Mehndi design ratings website. It served the goal of being in a niche area without a lot of competition, as well as it has social aspects which has the potential for good designs going viral. This would benefit the website as well as the artists. It also served my purpose of being some what smaller in scope so that it can be built quickly. 

Registering the Domain Name

Once the idea for the website was finalized, one of the first things I did before getting into the details of building the website was to register the domain name. It’s the single most important thing for building a website. Unless you have a good domain name that the users can remember and relate with, its going to be hard to drive traffic to the website. Lucky for me, the domain name was available. I have been using eNom as my domain registrar for a long time since I manage a lot of domain names. But there are several other domain register services ranging from GoDaddy, Yahoo Domains to Verio that you can use. There are many service providers who offer both domain registration as well as hosting as a combined package you can sign-up the one you feel provides you the best price and service. One word of advice is that make sure your domain registry service provides you with a comprehensive domain control panel. The domain control panel allows you to configure finer domain name related settings of DNS, Host Servers, Email Settings etc. I have found at times my friends purchasing domains from resellers, who try to sell domains at a very low price but do not provide them access to the domain control panel. This issue further escalates at the time of renewals when they charge a much steeper price for renewals, so beware of such dubious domain registrars and make sure you register your domain with a good company.

Agile/Scrum Project Planning

Its important to plan out any project before starting it out so that we have a definite path of action. These days the most popular way of project management is Agile, and this is the path I will be taking to plan my website. Although I’ll be alone building the website, the planning part of Agile methodology will help me stay focused on building the application. The aim of this blog post is not to explain the agile methodology, if you are interested to know more, then you can read up further at Agile Software Development. Even for single developers’ parts of agile methodology are very handy to define the requirements as well as stay focused on the path ahead.

User Story Definitions

The first step in planning is to define the user stories that describe the project. I am playing multiple roles over here of being the client as well as the developer, so we can’t have all the key roles that are required in Agile methodology. But still I find that user story definition on a high level is also very useful to help me expand the website definition and get a clear understanding of the work involved. There are many free and paid tools available for user story planning and management, ranging from simple ones to full blown tools like Visual Studio Team System. I looked at some of the free tools but found it far more easier to capture my user stories in an excel sheet, we use Visual Studio Team System for professional projects in my company Systenics Solutions. Below I am defining some of the top level user stories which I will be building in the application, it will also show the direction of my thinking. There are several more user stories which could be possibly defined in the user story backlog for future usage, but for now I’ll list only those user stories which I plan to implement in the website.

  1. As an anonymous user, I can register on the website using Facebook credentials.
  2. As a registered user, I can login to the website using Facebook credentials.
  3. As a user (anonymous/logged in) , I can view Mehndi designs
  4. As a user (anonymous/logged in), I can navigate between different Mehndi designs
  5. As a user (anonymous/logged in), I can view the top Mehndi designs of the month
  6. As a user (anonymous/logged in), I can view the top Mehndi artists of the month
  7. As a user (anonymous/logged in), I can view ratings for a Mehndi design
  8. As a user (anonymous/logged in), I can view comments for a Mehndi design
  9. As a user (anonymous/logged in), I can view all Mehndi designs uploaded by a selected user
  10. As a user (anonymous/logged in), I can share the Mehndi design on various social networks like Facebook, Reddit, Tumbler
  11. As a user (anonymous/logged in), I can flag a Mehndi design as inappropriate
  12. As an authenticated user, I can upload Mehndi designs
  13. As an authenticated user, I can rate Mehndi designs
  14. As an authenticated user, I can comment on Mehndi designs

Once the user stories are outlined are the next step is to define the user stories in details as well as prioritize the user stories.

Technology Selection

On one hand as a project planner its important to work with the client to define the user stories and map out the users requirements while on the other hand as a technology expert it is important to determine the mix of technologies that will be used to build the application. We need to look at the clients requirements, the end users requirements as well as the available tools in the market and select a mix of technologies which will be the best for the project. Since our application is going to be a web based application, we can either use the traditional ASP.NET Web Forms to build the front end or use the latest ASP.NET MVC project to build the web application. I have found that MVC framework provides you with much better control over the HTML that is generated in the browser as well as MVC’s default URL routing feature enables us to build SEO friendly URL’s. Hence on the frontend I choose to use ASP.NET MVC 4 as the project type.

As the database engine I choose to use SQL Server Express, for the simplest reason that this web site is not going to be data intensive hence the 10GB per database limitation works fine for us, and using SQL Server Express is free. Alternatively, we could also use MySQL if we wanted a free database. The benefit of MS SQL Server Express is that you can seamlessly upgrade to a paid version of SQL Server, you just need to change the database servers and everything works!

On the tooling side, I will be using Visual Studio 2011 Beta, could you alternatively be using Visual Studio 2010 with ASP.NET MVC 4 installed.

In this blog post I have covered the requirements of RateMyMehndi website as well as I have selected the technologies that I plan to use to build this project. In the next blog post I’ll start RateMyMehndi project and start building out each of the user stories in the order of their priority.

Tags: , , ,

User Stories

Copyright 2011 All rights reserved.