Skip to main content

CardHolder - business card storage application

Problem    

Throughout my career, I met many professionals in their respective fields and exchange a few words, and obtained their business cards as well. I used to store them in my cardholder or simply in my cupboard but it was quite frustrating to find a specific business card of someone when you need their services. moreover, there was quite some more annoying situation where I was not at home and don't have any business card at my reach but badly need to contact someone to reach out for their services so bearing in mind that modern problem requires modern solution I decided to create my own application which will solve the issue to store, search and carry all those business cards around.

Solution

  1. my first solution was to download an already existing application, but some were paid application some were freemium and all of them did not have the specific feature that I want to use in my day to day basis 
  2. I started creating prototypes using two Xamarin which is a cross-platform development for both IOS and android. Due to the fact that I had to learn Xamarin and was i bite rusty when it comes to native development of an android application, I scrap the idea of a mobile application
  3. using Angular framework as client-side and ASP.Net core Web API seems a good idea at first but to develop a simple application with simple CRUD operations will be time and resource waste
  4. since I wanted a simple application I also considered using a console application, I started the prototype but scrap the idea as well because in terms of experience it was not user friendly.
  5. While having a conversation which a colleague, he mentioned a technology called Blazor from Microsoft thus I checked the documentation of the technology online and I was quite amazed and fascinated by the simplicity yet the power of this technology thus I decide to give it a try

Prototype

Using Xamarin technology

Views




Model



Screenshot



Using console application

Main menu



Navigation

Navigation through the console application was pretty much simple, using numbers it would be practical to navigate through menu such as view all cards, view details of a card, add a card, and so on.

View cards and details





CardHolder web Application

To build up the application I used Blazor technology, developed and maintained by Microsoft. It is still considered as a "young" technology with mixed reviews by as far as concern my personal opinion, the technology in question is very powerful and easy to understand the logic of the framework. You don't need to learn alternate technology to develop a full-fledged web application compare to the most common approach where the client-side will be developed using framework such as angular, vue.js, react and so and the backend be a common API using maybe ASP.NET web API

Technology

The technologies used for this project are:
  1. Boostrap for visual appearance, HTML and CSS
  2. Blazor for web development including front and back end
  3. entity framework core
  4. SQL server 

Overview

Home page/ cards



View a card





Add a card







Toggle cards view

Listview

Card view



Search

The search is one of the most used feature in the application. it will search every field which contained the searched keyword.

source code snippets


Labels:

Comments

  1. Technology Group1 March 2022 at 04:45

    Great information shared in this blog. Helps in gaining concepts about new information and concepts.
    Awsome information provided. Very useful for the beginners.
    Dot Net Blazor
    Hire Blazor Developers

    ReplyDelete
  2. Rajani8 April 2022 at 05:23

    Very useful information to everyone thanks for sharing.
    Azure DevOps Online Training
    Azure DevOps Training
    Azure DevOps Online Training in Hyderabad
    Azure Devops Training Online

    ReplyDelete

Post a Comment

Popular posts from this blog

Car Wash System vb.net

This software consists of a database that save the registration number of every vehicle being wash along side with the date, type of wash made and price Screen Shot Source Code To view records in the database: Dim conn As OleDbConnection = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\washRcd.accdb;Persist Security Info=False") Dim sql As String sql = " SELECT * FROM tblwash" conn.Open() Dim dt As New DataTable Dim cmd2 As New OleDb.OleDbDataAdapter(sql, conn) cmd2.Fill(dt) DataGridView1.DataSource = dt DataGridView1.Refresh() conn.Close() To insert new record in the database: Private Sub insert() Dim conn As OleDbConnection = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\washRcd.accdb;Persist Security Info=False") Dim updateSql As String = String.Format(...
10 comments
Read more

Face recognition using EmguCV 3.0 and typing pattern recognition

Introduction An MSc project with the title Student Examination System, where the objective is to put the students in an examination condition but instead of having an invigilator in an examination center, the system will cater for the proper ongoing of the exam. the system can be used as an online examination system The system is able to: Recognizing the face shape of a particular student Detect if there is more than one person in the examination room  Analyze the typing pattern of a student and detect if any one person is taking part in the exam voice recognition for the student and detect if there is more than one person speaking in the examination room Setup Download Emgu CV from  http://www.emgu.com/wiki/index.php/Main_Page Download Haarcascade from  https://github.com/opencv/opencv/tree/master/data/haarcascades Create an account at  https://www.keytrac.net/ Face recognition The snippet below illustrates how the Emgu CV is loaded whe...
2 comments
Read more

Student Information System - AngularJS , ASP.NET API, C#

Web based application the student information system is a small application that allows user to register and login to view information about a particular student and can perform several actions like Login and register to the application View students  Add new student Delete a particular student Update user information Screen Shot Project architecture routing.js, config.js and app.js allow the application to route from one partial view to another and config.js is used to save all the endpoint needed to access the API.   For separation of concerns, in the solution panel separate partial views, controller and services in different directories and reference it in index.html to enable angular to load all the files required Login process login.html LoginController.js Using $resource from AngularJS to make an API call and response  with a user details model UserViewModel and UserDetailsViewModel Using Unity fo...
2 comments
Read more