car-dealership-application (version 1.0)

• A proof of concept/simple prototype for ASP.NET Core application integrated with client side frameworks libraries.
• Important: Note this repository is related to these two repositories here and here. This repository is foucsed on web development that uses the deployed car dealership Flask API in Azure.. Be sure to check out all of them.

Table of Contents

• Learning Purpose
• Main Features
• Demo
• Technology Applied
• Third-party npm libraries
• Software Requirement
• Project Setup
• Future Works

Learning Purpose 📚

• To practice essential skills for client-side web development using libraries like Babel, Webpack, Typescript, React, ...
• To practice essential skills for server-side web development in ASP.NET.
• To prepare for my future career as full-stack web developer 🤩.

Main Features

• Using self-deployed flask machine learning API (found here) to predict car price.

Demo

1. Demo for car price prediction

   • 

2. Demo for basic functionalities like CRUD

   • 

Technology Applied 🤖

• ASP.NET Core MVC 5.0
• Typescript: Perform type checking to produce more robust Javascript code

Third-party npm libraries (Credits to them)

• Webpack: To compile Typescript to Javascript
• gulp: To automate deployment workflow like compiling Typescript before clean/build
• @types libraries: To provide TypeScript support for javascript-only libraries
• Chart.js: To create beautiful charts with mature plugins found here
• chartjs-plugin-zoom: To provide zoom functionalities for chart.js
• Bootstrap & JQuery: To build responsive & Interative Web
• fontawesome: To provide UI icons

Software Requirement (Windows 10 Environment) 💻

• Visual Studio 2019 Community Edition
• Node.js: To use npm package manager
• IIS manager: To host car price prediction flask API in local machine for faster testing

Read here on how to enable IIS manager in Windows 10.

Project Setup ⚙

1. Open the project in Visual Studio 2019 by clicking on the CarDealershipWebApp.sln.
2. Once open, libman.json right-click the libman.json file in Solution Explorer and select the "Restore Client-Side Libraries" option.
3. Then, open the cmd and navigate project root directory, then type npm install. This will install all the npm packages into node_modules folder.
4. Bind the Gulp task is to "Before Build/After Build/Clean". Follow the steps in here.

Future Works 🔮

1. Learn React and learn to develop ASP.NET Core application with React framework.
2. Learn to use Babel with Typescript and Webpack to compile to Javascript code that is compatible to older browser (hopefully Internet Explorer 🤣).
3. Learn how to deploy the whole web application to Azure App service using Docker.
4. Master webpack. (e.g. Learn on how to bundle Typescript/css files into multiple entry files for different areas.
5. Explore various APIs available in ASP.NET Core like Identity.