Initial

dss-api/.editorconfig

@@ -0,0 +1,153 @@
+###############################
+# Core EditorConfig Options   #
+###############################
+
+root = true
+
+# All files
+[*]
+indent_style = space
+indent_size = 4
+
+# Code files
+[*.{cs,csx,vb,vbx}]
+indent_size = 4
+insert_final_newline = true
+charset = utf-8-bom
+
+###############################
+# .NET Coding Conventions     #
+###############################
+
+[*.{cs,vb}]
+# Organize usings
+dotnet_sort_system_directives_first = true
+dotnet_separate_import_directive_groups = false
+
+# this. preferences
+dotnet_style_qualification_for_field = false:silent
+dotnet_style_qualification_for_property = false:silent
+dotnet_style_qualification_for_method = false:silent
+dotnet_style_qualification_for_event = false:silent
+
+# Language keywords vs BCL types preferences
+dotnet_style_predefined_type_for_locals_parameters_members = true:silent
+dotnet_style_predefined_type_for_member_access = true:silent
+
+# Parentheses preferences
+dotnet_style_parentheses_in_arithmetic_binary_operators = always_for_clarity:silent
+dotnet_style_parentheses_in_relational_binary_operators = always_for_clarity:silent
+dotnet_style_parentheses_in_other_binary_operators = always_for_clarity:silent
+dotnet_style_parentheses_in_other_operators = never_if_unnecessary:silent
+
+# Modifier preferences
+dotnet_style_require_accessibility_modifiers = for_non_interface_members:silent
+dotnet_style_readonly_field = true:suggestion
+
+# Expression-level preferences
+dotnet_style_object_initializer = true:suggestion
+dotnet_style_collection_initializer = true:suggestion
+dotnet_style_explicit_tuple_names = true:suggestion
+dotnet_style_null_propagation = true:suggestion
+dotnet_style_coalesce_expression = true:suggestion
+dotnet_style_prefer_is_null_check_over_reference_equality_method = true:silent
+dotnet_style_prefer_inferred_tuple_names = true:suggestion
+dotnet_style_prefer_inferred_anonymous_type_member_names = true:suggestion
+dotnet_style_prefer_auto_properties = true:silent
+dotnet_style_prefer_conditional_expression_over_assignment = true:silent
+dotnet_style_prefer_conditional_expression_over_return = true:silent
+
+###############################
+# Naming Conventions          #
+###############################
+
+# Style Definitions
+dotnet_naming_style.pascal_case_style.capitalization             = pascal_case
+
+# Use PascalCase for constant fields
+dotnet_naming_rule.constant_fields_should_be_pascal_case.severity = suggestion
+dotnet_naming_rule.constant_fields_should_be_pascal_case.symbols  = constant_fields
+dotnet_naming_rule.constant_fields_should_be_pascal_case.style    = pascal_case_style
+dotnet_naming_symbols.constant_fields.applicable_kinds            = field
+dotnet_naming_symbols.constant_fields.applicable_accessibilities  = *
+dotnet_naming_symbols.constant_fields.required_modifiers          = const
+
+dotnet_naming_rule.private_members_with_underscore.symbols  = private_fields
+dotnet_naming_rule.private_members_with_underscore.style    = prefix_underscore
+dotnet_naming_rule.private_members_with_underscore.severity = suggestion
+dotnet_naming_symbols.private_fields.applicable_kinds           = field
+dotnet_naming_symbols.private_fields.applicable_accessibilities = private
+dotnet_naming_style.prefix_underscore.capitalization = camel_case
+dotnet_naming_style.prefix_underscore.required_prefix = _
+
+
+###############################
+# C# Code Style Rules         #
+###############################
+
+[*.cs]
+# var preferences
+csharp_style_var_for_built_in_types = true:silent
+csharp_style_var_when_type_is_apparent = true:silent
+csharp_style_var_elsewhere = true:silent
+
+# Expression-bodied members
+csharp_style_expression_bodied_methods = false:silent
+csharp_style_expression_bodied_constructors = false:silent
+csharp_style_expression_bodied_operators = false:silent
+csharp_style_expression_bodied_properties = true:silent
+csharp_style_expression_bodied_indexers = true:silent
+csharp_style_expression_bodied_accessors = true:silent
+
+# Pattern-matching preferences
+csharp_style_pattern_matching_over_is_with_cast_check = true:suggestion
+csharp_style_pattern_matching_over_as_with_null_check = true:suggestion
+
+# Null-checking preferences
+csharp_style_throw_expression = true:suggestion
+csharp_style_conditional_delegate_call = true:suggestion
+
+# Modifier preferences
+csharp_preferred_modifier_order = public,private,protected,internal,static,extern,new,virtual,abstract,sealed,override,readonly,unsafe,volatile,async:suggestion
+
+# Expression-level preferences
+csharp_prefer_braces = true:silent
+csharp_style_deconstructed_variable_declaration = true:suggestion
+csharp_prefer_simple_default_expression = true:suggestion
+csharp_style_pattern_local_over_anonymous_function = true:suggestion
+csharp_style_inlined_variable_declaration = true:suggestion
+
+###############################
+# C# Formatting Rules         #
+###############################
+
+# New line preferences
+csharp_new_line_before_open_brace = false
+csharp_new_line_before_else = false
+csharp_new_line_before_catch = false
+csharp_new_line_before_finally = false
+csharp_new_line_before_members_in_object_initializers = false
+csharp_new_line_before_members_in_anonymous_types = false
+csharp_new_line_between_query_expression_clauses = false
+
+# Indentation preferences
+csharp_indent_case_contents = true
+csharp_indent_switch_labels = true
+csharp_indent_labels = flush_left
+
+# Space preferences
+csharp_space_after_cast = false
+csharp_space_after_keywords_in_control_flow_statements = true
+csharp_space_between_method_call_parameter_list_parentheses = false
+csharp_space_between_method_declaration_parameter_list_parentheses = false
+csharp_space_between_parentheses = false
+csharp_space_before_colon_in_inheritance_clause = true
+csharp_space_after_colon_in_inheritance_clause = true
+csharp_space_around_binary_operators = before_and_after
+csharp_space_between_method_declaration_empty_parameter_list_parentheses = false
+csharp_space_between_method_call_name_and_opening_parenthesis = false
+csharp_space_between_method_call_empty_parameter_list_parentheses = false
+
+# Wrapping preferences
+csharp_preserve_single_line_statements = true
+csharp_preserve_single_line_blocks = true

dss-api/.gitignore

@@ -0,0 +1,350 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+[Ll]ogs/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# Visual Studio 2017 auto generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/

dss-api/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "workbench.colorTheme": "Ayu Mirage"
+}

dss-api/Controllers/WeatherForecastController.cs

@@ -0,0 +1,39 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
+
+namespace DSS.Api.Controllers
+{
+    [ApiController]
+    [Route("[controller]")]
+    public class WeatherForecastController : ControllerBase
+    {
+        private static readonly string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        private readonly ILogger<WeatherForecastController> _logger;
+
+        public WeatherForecastController(ILogger<WeatherForecastController> logger)
+        {
+            _logger = logger;
+        }
+
+        [HttpGet]
+        public IEnumerable<WeatherForecast> Get()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = DateTime.Now.AddDays(index),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            })
+            .ToArray();
+        }
+    }
+}

dss-api/Data/Annotations/SlugFieldAttribute.cs

@@ -0,0 +1,12 @@
+using System;
+
+namespace DSS.Api.Data.Annotations {
+    [AttributeUsage(AttributeTargets.Property)]
+    public class SlugFieldAttribute : Attribute {
+        public string SourceField { get; }
+
+        public SlugFieldAttribute(string sourceField) {
+            SourceField = sourceField;
+        }
+    }
+}

dss-api/Data/DSSDbContext.cs

@@ -0,0 +1,26 @@
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using DSS.Api.Data.Models;
+using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore;
+
+namespace DSS.Api.Data {
+    public class DSSDbContext : IdentityDbContext {
+        public DSSDbContext(DbContextOptions<DSSDbContext> options)
+            : base(options) {
+        }
+        public override Task<int> SaveChangesAsync(bool acceptAllChangesOnSuccess,
+                                        CancellationToken cancellationToken = default) {
+            foreach (var entity in ChangeTracker.Entries()
+                                    .Where(e => e.State == EntityState.Added || e.State == EntityState.Modified)
+                                    .Where(e => e.Entity is ISluggedEntity)
+                                    .Select(e => e.Entity as ISluggedEntity)
+                                    .Where(e => string.IsNullOrEmpty(e.Slug))) {
+                entity.Slug = entity.GenerateSlug(this);
+            }
+        }
+        public DbSet<AudioItem> AudioItems { get; set; }
+        public DbSet<Tag> Tags { get; set; }
+    }
+}

dss-api/Data/Extensions/EntityExtesions.cs

@@ -0,0 +1,73 @@
+using System;
+using System.Collections.Generic;
+using System.Data;
+using System.Linq;
+using DSS.Api.Data.Annotations;
+using DSS.Api.Data.Models.Interfaces;
+using Microsoft.EntityFrameworkCore;
+
+namespace DSS.Api.Data.Extensions {
+    public static class EntityExtesions {
+        private class ProxySluggedModel : ISluggedEntity {
+            public string Slug { get; set; }
+        }
+        public class GenerateSlugFailureException : Exception {
+            public GenerateSlugFailureException(string message) : base(message) { }
+        }
+
+        public static IEnumerable<T> ExecSQL<T>(this DbContext context, string query)
+                                             where T : class, ISluggedEntity, new() {
+            using (var command = context.Database.GetDbConnection().CreateCommand()) {
+                command.CommandText = query;
+                command.CommandType = CommandType.Text;
+                context.Database.OpenConnection();
+
+                using (var reader = command.ExecuteReader()) {
+                    var result = reader.Select(r => new T {
+                        Slug = r["Slug"] is DBNull ? string.Empty : r["Slug"].ToString()
+                    });
+                    return result.ToList();
+                }
+            }
+        }
+        public static string GenerateSlug(this IUniqueFieldEntity entity, DbContext context, ILogger logger = null) {
+            try {
+                var property = entity.GetType()
+                    .GetProperties()
+                    .FirstOrDefault(prop => Attribute.IsDefined(prop, typeof(SlugFieldAttribute)));
+                if (property != null) {
+                    var attribute = property
+                        .GetCustomAttributes(typeof(SlugFieldAttribute), false)
+                        .FirstOrDefault();
+
+                    var t = entity.GetType();
+                    var tableName = context.Model.FindEntityType(t).GetTableName();
+                    if (!string.IsNullOrEmpty(tableName)) {
+                        var sourceField = (attribute as SlugFieldAttribute)?.SourceField;
+                        if (string.IsNullOrEmpty(sourceField)) {
+                            logger?.LogError($"Error slugifying - Entry title is blank, cannot slugify");
+                            // need to throw here, shouldn't save without slug
+                            throw new GenerateSlugFailureException("Entry title is blank, cannot slugify");
+                        }
+
+                        var slugSource = entity.GetType()
+                                             .GetProperty(sourceField)
+                                             ?.GetValue(entity, null)
+                                             ?.ToString() ?? string.Empty;
+
+                        var source = context.ExecSQL<ProxySluggedModel>($"SELECT Slug FROM {tableName}")
+                            .Select(m => m.Slug);
+
+                        return slugSource.Slugify(source);
+                    }
+                }
+            } catch (Exception ex) {
+                logger?.LogError($"Error slugifying {entity.GetType().Name} - {ex.Message}");
+                // need to throw here, shouldn't save without slug
+                throw new GenerateSlugFailureException(ex.Message);
+            }
+
+            return string.Empty;
+        }
+    }
+}

dss-api/Data/Models/ApplicationUser.cs

@@ -0,0 +1,23 @@
+using DSS.Api.Data.Annotations;
+using DSS.Api.Data.Models.Interfaces;
+using Microsoft.AspNetCore.Identity;
+
+namespace DSS.Api.Data.Models {
+    public static class EntityExtesions {
+
+    }
+    public class ApplicationUser : IdentityUser, ISluggedEntity {
+        // Extended Properties
+
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public long? FacebookId { get; set; }
+        public string TwitterHandle { get; set; }
+
+        public string PictureUrl { get; set; }
+
+        [SlugField(sourceField: "FullName")]
+        public string Slug { get; set; }
+        public string FullName => $"{FirstName} {LastName}";
+    }
+}

dss-api/Data/Models/AudioItem.cs

@@ -0,0 +1,18 @@
+using System.Collections.Generic;
+using DSS.Api.Data.Annotations;
+
+namespace DSS.Api.Data.Models
+{
+    public class AudioItem : BaseEntity
+    {
+
+        public string Title { get; set; }
+        public string Description { get; set; }
+        public virtual List<Tag> Tags { get; set; }
+
+        public ApplicationUser User { get; set; }
+
+        [SlugField(sourceField: "Title")]
+        public string Slug { get; set; }
+    }
+}

dss-api/Data/Models/BaseEntity.cs

@@ -0,0 +1,18 @@
+using System;
+using System.ComponentModel.DataAnnotations.Schema;
+using DSS.Api.Data.Interfaces;
+
+namespace DSS.Api.Data.Models
+{
+    public class BaseEntity : IEntity
+    {
+        public Guid Id { get; set; }
+
+        [DatabaseGenerated(DatabaseGeneratedOption.Computed)]
+        public DateTime CreateDate { get; set; } = DateTime.UtcNow;
+
+        [DatabaseGenerated(DatabaseGeneratedOption.Computed)]
+        public DateTime UpdateDate { get; set; } = DateTime.UtcNow;
+
+    }
+}

dss-api/Data/Models/Interfaces/IEntity.cs

@@ -0,0 +1,11 @@
+using System;
+
+namespace DSS.Api.Data.Models.Interfaces
+{
+    public interface IEntity
+    {
+        Guid Id { get; set; }
+        DateTime CreateDate { get; set; }
+        DateTime UpdateDate { get; set; }
+    }
+}

dss-api/Data/Models/Interfaces/ISluggedEntity.cs

@@ -0,0 +1,7 @@
+namespace DSS.Api.Data.Models.Interfaces
+{
+    public interface ISluggedEntity : IUniqueFieldEntity
+    {
+        string Slug { get; set; }
+    }
+}

dss-api/Data/Models/Interfaces/IUniqueFieldEntity.cs

@@ -0,0 +1,6 @@
+namespace DSS.Api.Data.Models.Interfaces
+{
+    public interface IUniqueFieldEntity
+    {
+    }
+}

dss-api/Data/Models/Tag.cs

@@ -0,0 +1,7 @@
+namespace DSS.Api.Data.Models
+{
+    public class Tag : BaseEntity
+    {
+        public string Name { get; set; }
+    }
+}

dss-api/Program.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Hosting;
+
+namespace DSS.Api
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            CreateHostBuilder(args).Build().Run();
+        }
+
+        public static IHostBuilder CreateHostBuilder(string[] args) =>
+            Host.CreateDefaultBuilder(args)
+                .ConfigureWebHostDefaults(webBuilder =>
+                {
+                    webBuilder.UseStartup<Startup>();
+                });
+    }
+}

dss-api/Properties/launchSettings.json

@@ -0,0 +1,30 @@
+{
+    "$schema": "http://json.schemastore.org/launchsettings.json",
+    "iisSettings": {
+        "windowsAuthentication": false,
+        "anonymousAuthentication": true,
+        "iisExpress": {
+            "applicationUrl": "http://localhost:11386",
+            "sslPort": 44308
+        }
+    },
+    "profiles": {
+        "IIS Express": {
+            "commandName": "IISExpress",
+            "launchBrowser": true,
+            "launchUrl": "weatherforecast",
+            "environmentVariables": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            }
+        },
+        "DSS.Api": {
+            "commandName": "Project",
+            "launchBrowser": true,
+            "launchUrl": "weatherforecast",
+            "applicationUrl": "https://localhost:5001;http://localhost:5000",
+            "environmentVariables": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            }
+        }
+    }
+}

dss-api/Services/Startup/DbMigrator.cs

@@ -0,0 +1,23 @@
+using DSS.Api.Data;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace DSS.Api.Services.Startup {
+    internal static class DbMigratorExtensions {
+        internal static void UpdateDatabase(
+                this IApplicationBuilder app,
+                IConfiguration config) {
+
+            using var serviceScope = app.ApplicationServices
+                .GetRequiredService<IServiceScopeFactory>()
+                .CreateScope();
+
+            using var context = serviceScope.ServiceProvider.GetService<DSSDbContext>();
+            context.Database.Migrate();
+            // DSSDbContextInitialiser.SeedUsers(userManager, context, config);
+        }
+    }
+}

dss-api/Startup.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.HttpsPolicy;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Logging;
+
+namespace dss_api
+{
+    public class Startup
+    {
+        public Startup(IConfiguration configuration)
+        {
+            Configuration = configuration;
+        }
+
+        public IConfiguration Configuration { get; }
+
+        // This method gets called by the runtime. Use this method to add services to the container.
+        public void ConfigureServices(IServiceCollection services)
+        {
+            services.AddControllers();
+        }
+
+        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
+        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
+        {
+            if (env.IsDevelopment())
+            {
+                app.UseDeveloperExceptionPage();
+            }
+
+            app.UseHttpsRedirection();
+
+            app.UseRouting();
+
+            app.UseAuthorization();
+
+            app.UseEndpoints(endpoints =>
+            {
+                endpoints.MapControllers();
+            });
+        }
+    }
+}

dss-api/appsettings.Development.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft": "Warning",
+      "Microsoft.Hosting.Lifetime": "Information"
+    }
+  }
+}

dss-api/appsettings.json

@@ -0,0 +1,13 @@
+{
+    "ConnectionStrings": {
+        "DefaultConnection": "Host=localhost;Database=deepsouthsounds;Username=deepsouthsounds;Password=deepsouthsounds"
+    },
+    "Logging": {
+        "LogLevel": {
+            "Default": "Information",
+            "Microsoft": "Warning",
+            "Microsoft.Hosting.Lifetime": "Information"
+        }
+    },
+    "AllowedHosts": "*"
+}

dss-api/dss-api.csproj

@@ -0,0 +1,18 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+    <PropertyGroup>
+        <TargetFramework>netcoreapp3.1</TargetFramework>
+        <RootNamespace>DSS.Api</RootNamespace>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.6" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.1.6">
+          <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+          <PrivateAssets>all</PrivateAssets>
+        </PackageReference>
+        <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="3.1.4" />
+    </ItemGroup>
+
+
+</Project>

dss-api/scripts/create_dev_pgsql.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+docker run \
+    --name dss-pgsql \
+    --restart always \
+    -p 5432:5432 \
+    -e "POSTGRES_PASSWORD=H8ckMyB88lz" \
+    -e "PGDATA=/var/lib/postgresql/data/pgdata" \
+    -v /opt/postgres:/var/lib/postgresql/data \
+    -d postgres:9.6.18

dss-web/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

dss-web/.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Distribution directories
+dist/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

dss-web/README.md

@@ -0,0 +1,44 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

dss-web/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "dss-web",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "mdbreact": "^4.27.0",
+    "node-sass": "^4.14.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "typescript": "~3.7.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

dss-web/public/images/us.svg

@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640">
+  <desc>
+    The United States of America flag, produced by Daniel McRae
+  </desc>
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".67" d="M0 0h682.67v512H0z"/>
+    </clipPath>
+  </defs>
+  <g fill-rule="evenodd" clip-path="url(#a)" transform="scale(.9375)">
+    <g stroke-width="1pt">
+      <g fill="#bd3d44">
+        <path d="M0 0h972.81v39.385H0zM0 78.77h972.81v39.385H0zM0 157.54h972.81v39.385H0zM0 236.31h972.81v39.385H0zM0 315.08h972.81v39.385H0zM0 393.85h972.81v39.385H0zM0 472.62h972.81v39.385H0z"/>
+      </g>
+      <g fill="#fff">
+        <path d="M0 39.385h972.81V78.77H0zM0 118.155h972.81v39.385H0zM0 196.925h972.81v39.385H0zM0 275.695h972.81v39.385H0zM0 354.465h972.81v39.385H0zM0 433.235h972.81v39.385H0z"/>
+      </g>
+    </g>
+    <path fill="#192f5d" d="M0 0h389.12v275.69H0z"/>
+    <g fill="#fff">
+      <path d="M32.427 11.8l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM97.28 11.8l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zM162.136 11.8l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zM226.988 11.8l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zM291.843 11.8l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM356.698 11.8l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z"/>
+      <g>
+        <path d="M64.855 39.37l3.54 10.896h11.458L70.583 57l3.542 10.897-9.27-6.734-9.269 6.734L59.126 57l-9.269-6.734h11.458zM129.707 39.37l3.54 10.896h11.457L135.435 57l3.54 10.897-9.268-6.734-9.27 6.734L123.978 57l-9.27-6.734h11.458zM194.562 39.37l3.54 10.896h11.458L200.29 57l3.541 10.897-9.27-6.734-9.268 6.734L188.833 57l-9.269-6.734h11.457zM259.417 39.37l3.54 10.896h11.458L265.145 57l3.541 10.897-9.269-6.734-9.27 6.734L253.69 57l-9.27-6.734h11.458zM324.269 39.37l3.54 10.896h11.457L329.997 57l3.54 10.897-9.268-6.734-9.27 6.734L318.54 57l-9.27-6.734h11.458z"/>
+      </g>
+      <g>
+        <path d="M32.427 66.939l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM97.28 66.939l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zM162.136 66.939l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zM226.988 66.939l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zM291.843 66.939l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM356.698 66.939l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z"/>
+        <g>
+          <path d="M64.855 94.508l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zM129.707 94.508l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zM194.562 94.508l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zM259.417 94.508l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zM324.269 94.508l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z"/>
+        </g>
+      </g>
+      <g>
+        <path d="M32.427 122.078l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM97.28 122.078l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zM162.136 122.078l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zM226.988 122.078l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zM291.843 122.078l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM356.698 122.078l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z"/>
+        <g>
+          <path d="M64.855 149.647l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zM129.707 149.647l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zM194.562 149.647l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zM259.417 149.647l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zM324.269 149.647l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z"/>
+        </g>
+      </g>
+      <g>
+        <path d="M32.427 177.217l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM97.28 177.217l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zM162.136 177.217l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zM226.988 177.217l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zM291.843 177.217l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM356.698 177.217l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z"/>
+        <g>
+          <path d="M64.855 204.786l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zM129.707 204.786l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zM194.562 204.786l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zM259.417 204.786l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zM324.269 204.786l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z"/>
+        </g>
+      </g>
+      <g>
+        <path d="M32.427 232.356l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM97.28 232.356l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zM162.136 232.356l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zM226.988 232.356l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zM291.843 232.356l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zM356.698 232.356l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z"/>
+      </g>
+    </g>
+  </g>
+</svg>

dss-web/public/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon"
+          href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1" />
+    <meta name="theme-color"
+          content="#000000" />
+    <meta name="description"
+          content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon"
+          href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest"
+          href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet"
+          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"
+          integrity="sha512-yxSQDoat2NPQ9U4mKdYra2YNenVsnRuGxVvyrirmrDKzwOdxKJVqkDEvQ17pL/PJ6B7n2n77Xm6d62bMjCBqCQ=="
+          crossorigin="anonymous" />
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/1.8.36/css/materialdesignicons.css" />
+    <link rel="stylesheet"
+          href="site.css">
+    <title>Deep South Sounds</title>
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

dss-web/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

dss-web/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Deep South Sounds",
+    "short_name": "dss-web",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

dss-web/src/App.scss

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

dss-web/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

dss-web/src/App.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import "./App.scss";
+import { Navbar } from "./components";
+import { Sidebar } from "./components";
+import { Content } from "./components";
+
+function App() {
+    return (
+        <div className="App">
+            <div
+                id="main-wrapper"
+                data-theme="light"
+                data-layout="vertical"
+                data-navbarbg="skin6"
+                data-sidebartype="full"
+                data-sidebar-position="fixed"
+                data-header-position="fixed"
+                data-boxed-layout="full"
+            >
+                <Navbar />
+                <Sidebar />
+                <Content />
+            </div>
+        </div>
+    );
+}
+
+export default App;

dss-web/src/components/Content.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Content = () => {
+    return (
+        <div className="container-fluid">
+            <div className="row">
+                <div className="col-12">
+                    <div className="card">
+                        <div className="card-body"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Content;

dss-web/src/components/Navbar.tsx

@@ -0,0 +1,783 @@
+import React from "react";
+
+const Navbar = () => {
+    return (
+        <header className="topbar">
+            <nav className="navbar top-navbar navbar-expand-md navbar-light">
+                <div className="navbar-header" data-logobg="skin1">
+                    {/* This is for the sidebar toggle which is visible on mobile only */}
+                    <a className="nav-toggler waves-effect waves-light d-block d-md-none">
+                        <i className="ti-menu ti-close" />
+                    </a>
+                    {/* ============================================================== */}
+                    {/* Logo */}
+                    {/* ============================================================== */}
+                    <a className="navbar-brand" href="index.html">
+                        {/* Logo icon */}
+                        <b className="logo-icon">
+                            {/*You can put here icon as well // <i className="wi wi-sunset"></i> //*/}
+                            {/* Dark Logo icon */}
+                            <img
+                                src="/images/logo-icon.png"
+                                alt="homepage"
+                                className="dark-logo"
+                            />
+                            {/* Light Logo icon */}
+                            <img
+                                src="/images/logo-light-icon.png"
+                                alt="homepage"
+                                className="light-logo"
+                            />
+                        </b>
+                        {/*End Logo icon */}
+                        {/* Logo text */}
+                        <span className="logo-text">
+                            {/* dark Logo text */}
+                            <img
+                                src="/images/logo-text.png"
+                                alt="homepage"
+                                className="dark-logo"
+                            />
+                            {/* Light Logo text */}
+                            <img
+                                src="/images/logo-light-text.png"
+                                className="light-logo"
+                                alt="homepage"
+                            />
+                        </span>
+                    </a>
+                    {/* ============================================================== */}
+                    {/* End Logo */}
+                    {/* ============================================================== */}
+                    {/* ============================================================== */}
+                    {/* Toggle which is visible on mobile only */}
+                    {/* ============================================================== */}
+                    <a
+                        className="topbartoggler d-block d-md-none waves-effect waves-light"
+                        data-toggle="collapse"
+                        data-target="#navbarSupportedContent"
+                        aria-controls="navbarSupportedContent"
+                        aria-expanded="false"
+                        aria-label="Toggle navigation"
+                    >
+                        <i className="ti-more" />
+                    </a>
+                </div>
+                {/* ============================================================== */}
+                {/* End Logo */}
+                {/* ============================================================== */}
+                <div
+                    className="navbar-collapse collapse"
+                    id="navbarSupportedContent"
+                >
+                    {/* ============================================================== */}
+                    {/* toggle and nav items */}
+                    {/* ============================================================== */}
+                    <ul className="navbar-nav mr-auto">
+                        <li className="nav-item d-none d-md-block">
+                            <a
+                                className="nav-link sidebartoggler waves-effect waves-light"
+                                data-sidebartype="mini-sidebar"
+                            >
+                                <i className="mdi mdi-menu font-24" />
+                            </a>
+                        </li>
+                        {/* ============================================================== */}
+                        {/* mega menu */}
+                        {/* ============================================================== */}
+                        <li className="nav-item dropdown mega-dropdown">
+                            <a
+                                className="nav-link dropdown-toggle waves-effect waves-dark"
+                                href="#"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                <span className="d-none d-md-block">
+                                    Mega <i className="fa fa-angle-down" />
+                                </span>
+                                <span className="d-block d-md-none">
+                                    <i className="mdi mdi-dialpad font-24" />
+                                </span>
+                            </a>
+                            <div className="dropdown-menu animated bounceInDown">
+                                <div className="mega-dropdown-menu row">
+                                    <div className="col-lg-3 col-xlg-2 mb-4">
+                                        <h4 className="mb-3">CAROUSEL</h4>
+                                        {/* CAROUSEL */}
+                                        <div
+                                            id="carouselExampleControls"
+                                            className="carousel slide"
+                                            data-ride="carousel"
+                                        >
+                                            <div
+                                                className="carousel-inner"
+                                                role="listbox"
+                                            >
+                                                <div className="carousel-item active">
+                                                    <div className="container p-0">
+                                                        {" "}
+                                                        <img
+                                                            className="d-block img-fluid"
+                                                            src="/images/big/img1.jpg"
+                                                            alt="First slide"
+                                                        />
+                                                    </div>
+                                                </div>
+                                                <div className="carousel-item">
+                                                    <div className="container p-0">
+                                                        <img
+                                                            className="d-block img-fluid"
+                                                            src="/images/big/img2.jpg"
+                                                            alt="Second slide"
+                                                        />
+                                                    </div>
+                                                </div>
+                                                <div className="carousel-item">
+                                                    <div className="container p-0">
+                                                        <img
+                                                            className="d-block img-fluid"
+                                                            src="/images/big/img3.jpg"
+                                                            alt="Third slide"
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <a
+                                                className="carousel-control-prev"
+                                                href="#carouselExampleControls"
+                                                role="button"
+                                                data-slide="prev"
+                                            >
+                                                {" "}
+                                                <span
+                                                    className="carousel-control-prev-icon"
+                                                    aria-hidden="true"
+                                                />{" "}
+                                                <span className="sr-only">
+                                                    Previous
+                                                </span>{" "}
+                                            </a>
+                                            <a
+                                                className="carousel-control-next"
+                                                href="#carouselExampleControls"
+                                                role="button"
+                                                data-slide="next"
+                                            >
+                                                {" "}
+                                                <span
+                                                    className="carousel-control-next-icon"
+                                                    aria-hidden="true"
+                                                />{" "}
+                                                <span className="sr-only">
+                                                    Next
+                                                </span>{" "}
+                                            </a>
+                                        </div>
+                                        {/* End CAROUSEL */}
+                                    </div>
+                                    <div className="col-lg-3 mb-4">
+                                        <h4 className="mb-3">ACCORDION</h4>
+                                        {/* Accordian */}
+                                        <div id="accordion">
+                                            <div className="card mb-1">
+                                                <div
+                                                    className="card-header"
+                                                    id="headingOne"
+                                                >
+                                                    <h5 className="mb-0">
+                                                        <button
+                                                            className="btn btn-link"
+                                                            data-toggle="collapse"
+                                                            data-target="#collapseOne"
+                                                            aria-expanded="true"
+                                                            aria-controls="collapseOne"
+                                                        >
+                                                            Collapsible Group
+                                                            Item #1
+                                                        </button>
+                                                    </h5>
+                                                </div>
+                                                <div
+                                                    id="collapseOne"
+                                                    className="collapse show"
+                                                    aria-labelledby="headingOne"
+                                                    data-parent="#accordion"
+                                                >
+                                                    <div className="card-body">
+                                                        Anim pariatur cliche
+                                                        reprehenderit, enim
+                                                        eiusmod high life
+                                                        accusamus terry.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="card mb-1">
+                                                <div
+                                                    className="card-header"
+                                                    id="headingTwo"
+                                                >
+                                                    <h5 className="mb-0">
+                                                        <button
+                                                            className="btn btn-link collapsed"
+                                                            data-toggle="collapse"
+                                                            data-target="#collapseTwo"
+                                                            aria-expanded="false"
+                                                            aria-controls="collapseTwo"
+                                                        >
+                                                            Collapsible Group
+                                                            Item #2
+                                                        </button>
+                                                    </h5>
+                                                </div>
+                                                <div
+                                                    id="collapseTwo"
+                                                    className="collapse"
+                                                    aria-labelledby="headingTwo"
+                                                    data-parent="#accordion"
+                                                >
+                                                    <div className="card-body">
+                                                        Anim pariatur cliche
+                                                        reprehenderit, enim
+                                                        eiusmod high life
+                                                        accusamus terry.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="card mb-1">
+                                                <div
+                                                    className="card-header"
+                                                    id="headingThree"
+                                                >
+                                                    <h5 className="mb-0">
+                                                        <button
+                                                            className="btn btn-link collapsed"
+                                                            data-toggle="collapse"
+                                                            data-target="#collapseThree"
+                                                            aria-expanded="false"
+                                                            aria-controls="collapseThree"
+                                                        >
+                                                            Collapsible Group
+                                                            Item #3
+                                                        </button>
+                                                    </h5>
+                                                </div>
+                                                <div
+                                                    id="collapseThree"
+                                                    className="collapse"
+                                                    aria-labelledby="headingThree"
+                                                    data-parent="#accordion"
+                                                >
+                                                    <div className="card-body">
+                                                        Anim pariatur cliche
+                                                        reprehenderit, enim
+                                                        eiusmod high life
+                                                        accusamus terry.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-3  mb-4">
+                                        <h4 className="mb-3">CONTACT US</h4>
+                                        {/* Contact */}
+                                        <form>
+                                            <div className="form-group">
+                                                <input
+                                                    type="text"
+                                                    className="form-control"
+                                                    id="exampleInputname1"
+                                                    placeholder="Enter Name"
+                                                />{" "}
+                                            </div>
+                                            <div className="form-group">
+                                                <input
+                                                    type="email"
+                                                    className="form-control"
+                                                    placeholder="Enter email"
+                                                />{" "}
+                                            </div>
+                                            <div className="form-group">
+                                                <textarea
+                                                    className="form-control"
+                                                    id="exampleTextarea"
+                                                    rows={3}
+                                                    placeholder="Message"
+                                                    defaultValue={""}
+                                                />
+                                            </div>
+                                            <button
+                                                type="submit"
+                                                className="btn btn-info"
+                                            >
+                                                Submit
+                                            </button>
+                                        </form>
+                                    </div>
+                                    <div className="col-lg-3 col-xlg-4 mb-4">
+                                        <h4 className="mb-3">List style</h4>
+                                        {/* List style */}
+                                        <ul className="list-style-none">
+                                            <li>
+                                                <a>
+                                                    <i className="fa fa-check text-success" />{" "}
+                                                    You can give link
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a>
+                                                    <i className="fa fa-check text-success" />{" "}
+                                                    Give link
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a>
+                                                    <i className="fa fa-check text-success" />{" "}
+                                                    Another Give link
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a>
+                                                    <i className="fa fa-check text-success" />{" "}
+                                                    Forth link
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a>
+                                                    <i className="fa fa-check text-success" />{" "}
+                                                    Another fifth link
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        {/* ============================================================== */}
+                        {/* End mega menu */}
+                        {/* ============================================================== */}
+                        {/* ============================================================== */}
+                        {/* create new */}
+                        {/* ============================================================== */}
+                        <li className="nav-item dropdown">
+                            <a
+                                className="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                <span className="d-none d-md-block">
+                                    Create New{" "}
+                                    <i className="fa fa-angle-down" />
+                                </span>
+                                <span className="d-block d-md-none">
+                                    <i className="fa fa-plus" />
+                                </span>
+                            </a>
+                            <div
+                                className="dropdown-menu"
+                                aria-labelledby="navbarDropdown"
+                            >
+                                <a className="dropdown-item" href="#">
+                                    Action
+                                </a>
+                                <a className="dropdown-item" href="#">
+                                    Another action
+                                </a>
+                                <div className="dropdown-divider" />
+                                <a className="dropdown-item" href="#">
+                                    Something else here
+                                </a>
+                            </div>
+                        </li>
+                        {/* ============================================================== */}
+                        {/* Search */}
+                        {/* ============================================================== */}
+                        <li className="nav-item search-box">
+                            {" "}
+                            <a className="nav-link waves-effect waves-dark">
+                                <i className="ti-search" />
+                            </a>
+                            <form className="app-search position-absolute">
+                                <input
+                                    type="text"
+                                    className="form-control"
+                                    placeholder="Search & enter"
+                                />{" "}
+                                <a className="srh-btn">
+                                    <i className="ti-close" />
+                                </a>
+                            </form>
+                        </li>
+                    </ul>
+                    {/* ============================================================== */}
+                    {/* Right side toggle and nav items */}
+                    {/* ============================================================== */}
+                    <ul className="navbar-nav">
+                        {/* ============================================================== */}
+                        {/* create new */}
+                        {/* ============================================================== */}
+                        <li className="nav-item dropdown">
+                            <a
+                                className="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown2"
+                                role="button"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                <i className="flag-icon flag-icon-us" />
+                            </a>
+                            <div
+                                className="dropdown-menu dropdown-menu-right  animated bounceInDown"
+                                aria-labelledby="navbarDropdown2"
+                            >
+                                <a className="dropdown-item" href="#">
+                                    <i className="flag-icon flag-icon-us" />{" "}
+                                    English
+                                </a>
+                                <a className="dropdown-item" href="#">
+                                    <i className="flag-icon flag-icon-fr" />{" "}
+                                    French
+                                </a>
+                                <a className="dropdown-item" href="#">
+                                    <i className="flag-icon flag-icon-es" />{" "}
+                                    Spanish
+                                </a>
+                                <a className="dropdown-item" href="#">
+                                    <i className="flag-icon flag-icon-de" />{" "}
+                                    German
+                                </a>
+                            </div>
+                        </li>
+                        {/* ============================================================== */}
+                        {/* Comment */}
+                        {/* ============================================================== */}
+                        <li className="nav-item dropdown">
+                            <a
+                                className="nav-link dropdown-toggle waves-effect waves-dark"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                {" "}
+                                <i className="mdi mdi-bell font-24" />
+                            </a>
+                            <div className="dropdown-menu dropdown-menu-right mailbox animated bounceInDown">
+                                <span className="with-arrow">
+                                    <span className="bg-primary" />
+                                </span>
+                                <ul className="list-style-none">
+                                    <li>
+                                        <div className="drop-title bg-primary text-white">
+                                            <h4 className="mb-0 mt-1">4 New</h4>
+                                            <span className="font-light">
+                                                Notifications
+                                            </span>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <div className="message-center notifications">
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="btn btn-danger btn-circle">
+                                                    <i className="fa fa-link" />
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Luanch Admin
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        Just see the my new
+                                                        admin!
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:30 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="btn btn-success btn-circle">
+                                                    <i className="ti-calendar" />
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Event today
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        Just a reminder that you
+                                                        have event
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:10 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="btn btn-info btn-circle">
+                                                    <i className="ti-settings" />
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Settings
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        You can customize this
+                                                        template as you want
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:08 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="btn btn-primary btn-circle">
+                                                    <i className="ti-user" />
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Pavan kumar
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        Just see the my admin!
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:02 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <a className="nav-link text-center mb-1 text-dark">
+                                            {" "}
+                                            <strong>
+                                                Check all notifications
+                                            </strong>{" "}
+                                            <i className="fa fa-angle-right" />{" "}
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </li>
+                        <li className="nav-item dropdown">
+                            <a
+                                className="nav-link dropdown-toggle waves-effect waves-dark"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                <i className="font-24 mdi mdi-comment-processing" />
+                            </a>
+                            <div className="dropdown-menu dropdown-menu-right mailbox animated bounceInDown">
+                                <span className="with-arrow">
+                                    <span className="bg-danger" />
+                                </span>
+                                <ul className="list-style-none">
+                                    <li>
+                                        <div className="drop-title text-white bg-danger">
+                                            <h4 className="mb-0 mt-1">5 New</h4>
+                                            <span className="font-light">
+                                                Messages
+                                            </span>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <div className="message-center message-body">
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="user-img">
+                                                    {" "}
+                                                    <img
+                                                        src="/images/users/1.jpg"
+                                                        alt="user"
+                                                        className="rounded-circle"
+                                                    />{" "}
+                                                    <span className="profile-status online pull-right" />{" "}
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Pavan kumar
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        Just see the my admin!
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:30 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="user-img">
+                                                    {" "}
+                                                    <img
+                                                        src="/images/users/2.jpg"
+                                                        alt="user"
+                                                        className="rounded-circle"
+                                                    />{" "}
+                                                    <span className="profile-status busy pull-right" />{" "}
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Sonu Nigam
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        I've sung a song! See
+                                                        you at
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:10 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="user-img">
+                                                    {" "}
+                                                    <img
+                                                        src="/images/users/3.jpg"
+                                                        alt="user"
+                                                        className="rounded-circle"
+                                                    />{" "}
+                                                    <span className="profile-status away pull-right" />{" "}
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Arijit Sinh
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        I am a singer!
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:08 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                            {/* Message */}
+                                            <a className="message-item">
+                                                <span className="user-img">
+                                                    {" "}
+                                                    <img
+                                                        src="/images/users/4.jpg"
+                                                        alt="user"
+                                                        className="rounded-circle"
+                                                    />{" "}
+                                                    <span className="profile-status offline pull-right" />{" "}
+                                                </span>
+                                                <div className="mail-contnet">
+                                                    <h5 className="message-title">
+                                                        Pavan kumar
+                                                    </h5>{" "}
+                                                    <span className="mail-desc">
+                                                        Just see the my admin!
+                                                    </span>{" "}
+                                                    <span className="time">
+                                                        9:02 AM
+                                                    </span>{" "}
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <a className="nav-link text-center link text-dark">
+                                            {" "}
+                                            <b>See all e-Mails</b>{" "}
+                                            <i className="fa fa-angle-right" />{" "}
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </li>
+                        {/* ============================================================== */}
+                        {/* End Messages */}
+                        {/* ============================================================== */}
+                        {/* ============================================================== */}
+                        {/* User profile and search */}
+                        {/* ============================================================== */}
+                        <li className="nav-item dropdown">
+                            <a
+                                className="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                <img
+                                    src="/images/users/1.jpg"
+                                    alt="user"
+                                    className="rounded-circle"
+                                    width={31}
+                                />
+                            </a>
+                            <div className="dropdown-menu dropdown-menu-right user-dd animated flipInY">
+                                <span className="with-arrow">
+                                    <span className="bg-primary" />
+                                </span>
+                                <div className="d-flex no-block align-items-center p-15 bg-primary text-white mb-2">
+                                    <div>
+                                        <img
+                                            src="/images/users/1.jpg"
+                                            alt="user"
+                                            className="img-circle"
+                                            width={60}
+                                        />
+                                    </div>
+                                    <div className="ml-2">
+                                        <h4 className="mb-0">Steave Jobs</h4>
+                                        <p className=" mb-0">
+                                            <a
+                                                href="/cdn-cgi/l/email-protection"
+                                                className="__cf_email__"
+                                                data-cfemail="f2849380879cb2959f939b9edc919d9f"
+                                            >
+                                                [email&nbsp;protected]
+                                            </a>
+                                        </p>
+                                    </div>
+                                </div>
+                                <a className="dropdown-item">
+                                    <i className="ti-user mr-1 ml-1" /> My
+                                    Profile
+                                </a>
+                                <a className="dropdown-item">
+                                    <i className="ti-wallet mr-1 ml-1" /> My
+                                    Balance
+                                </a>
+                                <a className="dropdown-item">
+                                    <i className="ti-email mr-1 ml-1" /> Inbox
+                                </a>
+                                <div className="dropdown-divider" />
+                                <a className="dropdown-item">
+                                    <i className="ti-settings mr-1 ml-1" />{" "}
+                                    Account Setting
+                                </a>
+                                <div className="dropdown-divider" />
+                                <a className="dropdown-item">
+                                    <i className="fa fa-power-off mr-1 ml-1" />{" "}
+                                    Logout
+                                </a>
+                                <div className="dropdown-divider" />
+                                <div className="pl-4 p-10">
+                                    <a className="btn btn-sm btn-success btn-rounded">
+                                        View Profile
+                                    </a>
+                                </div>
+                            </div>
+                        </li>
+                        {/* ============================================================== */}
+                        {/* User profile and search */}
+                        {/* ============================================================== */}
+                    </ul>
+                </div>
+            </nav>
+        </header>
+    );
+};
+export default Navbar;

dss-web/src/components/index.ts

@@ -0,0 +1,5 @@
+import Content from "./Content";
+import Sidebar from "./Sidebar";
+import Navbar from "./Navbar";
+
+export { Navbar, Sidebar, Content };

dss-web/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

dss-web/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

dss-web/src/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

dss-web/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

dss-web/src/serviceWorker.ts

@@ -0,0 +1,149 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL,
+      window.location.href
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}

dss-web/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

dss-web/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}