Skip to content

ASP.NET Core MVC-based web application for providing user-interface of Kicksware sneaker resale platform

License

Notifications You must be signed in to change notification settings

nulltea/kicksware-website

Repository files navigation

repo logo

c# badge  js badge  asp.net badge  kubernetes badge  maintainability badge  license badge

Overview

Kicksware web application provides a publicly accessible visual user interface to interact with the Kicksware sneaker resale platform.

It introduces a visually satisfying, convenient, new way to both buy and sell new or used sneakers, create your own great wishlist and collaborate with other sneakerheads around the globe.

Sounds interesting? Consider visiting kicksware.com to find out for yourself!

Table of contents

Back-end design

Being a part of microservice based it system brings flexibility into web application development process while eliminating vendor and technology lock-in.

Globally Kicksware's back-end logic is written in Go programming language as a set of microservices. Unfortunately, Go isn't currently as great for front-end development as it is for back-end. Luckily, MSA is designed to deal with such problems so your client and server-side logic can be implemented with different languages. Moreover, every service can be build with its own set of languages and technologies as long as it's possible to maintain all of them.

On these terms, Kicksware web app has been developed with the use of C# language with its native Asp.Net Core, as it is a cross-platform, enterprise-ready, open-source framework for building modern, cloud-enabled, web apps.

Model-View-Controller (MVC) is a design pattern used for developing Kicksware user interfaces via dividing its program logic into three interconnected elements for defining data, visual markup and business-rules respectively.

Front-end design

What's tricky about doing front-end in a microservice architecture is the fact that users actually don’t care how well the backend is divided into atomic, loose coupled microservices. The question for them is how well it's integrated with their browser.

To make your experience of surfing through tons of great designed sneaker models even better, Kicksware relies on client-side JavaScript, reusable APIs, and prebuilt Markup. The term hiding in the names of these technologies, is JAMstack. It’s a new way of building web apps that delivers better performance, higher security, lower cost of scaling, and overall better developer experience.

The last but not the least is the visual design itself. To achieve a modern, appealing look while providing a user-friendly intuitive interface, Kicksware adopts Google's Material design.

kicksware browser

Requirements

To ensure proper, full-fledge performance of Kicksware web application, all Gateway, Tool Stack and API components must be deployed first. Otherwise, the website's public accessibility will not be possible without Traefik proxy.

It's also worth noticing that the app will actually work without a dedicated API and database, although in such conditions it will be useless.

Deployment

Kicksware web app can be deployed using the following methods:

  1. Docker Compose file

    This method require single dedicated server with installed both docker and docker-compose utilities.

    Compose configuration file can be found in the root of the project. This file already contains setting for reverse proxy routing and load balancing.

    Gitlab CI deployment pipeline configuration file for compose method can be found in .gitlab directory.

  2. Kubernetes Helm charts

    Deployment to Kubernetes cluster is the default and desired way.

    For more flexible and easier deployment Helm package manager is used. It provides a simple, yet elegant way to write pre-configured, reusable Kubernetes resource configuration using YAML and Go Templates (or Lua scripts). Helm packages are called charts.

    Web application deployment chart directory can be found in the root of the project.

    Helm chart configuration already contains configuration of Traefik IngressRoute Custom Resource Definition (CRD) for reverse proxy routing and load balancing.

    Gitlab CI deployment pipeline configuration file for K8s method can be found in the root of the project.

Wrap Up

Kicksware web app is a public exposure of a noncommercial, research project dedicated to showcasing the use of modern technologies in the context of the fashion industry.

While being a part of a distributed, diverse, microservice-based software infrastructure, it exploits the flexibility and independence provided to it by the architecture.

Although this website can't satisfy the potential buyer with a pair of new Nike's, it still tries to deliver the best usage experience with the help of both innovative web frameworks and proven graphical design solutions.

More

See other Kicksware project repositories.

License

Licensed under the GNU AGPL-3.0.