Sole Solution webstore

001 - Project

This application is a school project, and its initial scope was a period of two weeks. This meant I had a short timeframe to work with and I had to prioritise certain ideas to be able to complete the project with satisfying functionality. The task was to create an e-commerce web application of any kind and I chose to create a webstore for high-end footwear. The webstore as a brand would work in conjunction with the products and create additional value, as in “a selection of premium sneaker”. I’m a designer, therefore the project needed a concept with a strong visual aspect to branch out from. I started sketching a basic visual profile with all the essentials in Figma. From here I started rough sketching of the overall application before I broke it down to components and went into detail. When the design was finalized, I connected the artboards into a prototype with basic navigation for presentation purposes and feedback.

002 - Backend

I now had a feeling for the conceptual and then went to generate data for the application. This included selecting different sneakers, collecting written data and images of each sneaker, effectively developing the set products. I also had to gather images for the landing section of the frontpage, this is for making banners to a big carousel function. When the product list was developed and banners created, I then went to set up a Sanity database to house all the data and give “the webstore owner” capability to add, edit and remove aspects of the application without the developer's involvement. The sanity application gave the user the ability to create and store data of each product in form of name, description and price. Each product article could also house each sets colour the sneaker came in, where the user can create a new set with a name, hex-code, a thumbnail image and a list of display images of the sneaker in different angles. I also created a document that housed a scale of different shoesizes, each size in 4 increments, so the user can just toggle which size the specified shoe comes in. I also did the same for shoe brands for the purpose of a sorting function in the application that sadly didn’t get implemented in the end. Each article also had a pair of toggle inputs where the user could define if the project should be included in the data fetch and if it should be part of “this weeks selection” section of the application.

003 - Fetching

Now that the backend was settled, I could then start the development of the web application. The chosen JavaScript framework was vue.js and this gives some opportunity to how and where the data is fetched and stored. I’ve chosen to use a few methods that may not be necessary or in some instances be somewhat counterproductive, but it was done for educational purposes as in how these methods works in the first place. The first method was to fetch the entirety of the store database at “App.vue” component stage and to sort and store it in the application. This effectively gets all the content loaded in on entering the page an make it available for the whole application under the whole visit. The reason I used this method was to further immerse myself in “vuex”, with use of store.js to house data and functions, and to push, get and mutate data inside this structure. This method works fine for small applications such as the ones I'm currently developing but would be a strain on larger applications that houses larger quantities of data and preferably would fetch the needed data only on relevant instances. The second method was to place the fetch inside a mixin.js, which is used to house a script-set for multiple documents. The fetch only happens in “App.vue” and could be defined only in that one component and it would reduce chances of misunderstanding, but again this was for educational purposes.

004 - Development

Now that the data has successfully fetched and sorted into the global storage it can now be distributed across the application. I created different pages and populated them with components for different functions. For the frontpage the main components that correlates to the shop function is the product display components that pulls the product list from storage and loop thumbnails for each product. It has two of these components, one that loops the entire selection of products while the other only loops items that is marked as highlighted in the backend solution. Each thumbnail is a button that links to the product page with an individual slug as references what dataset the page is going to make use of. Within the product page the component will make use of the dataset and populate itself with different attributes, such as titles, images, prices, colours, sizes, etc. Colours and sizes variations can be selected and when pushed on “add to cart” button an item with the specifications will be pushed into the cart section in storage. You can access the cart in the header component, which is nested in app.vue and will be available at the top of every page. From there you can edit your selection of items, the total price will be calculated at the bottom of the popup modal. When satisfied with the selection you can then press the “check out” button, which navigates you to the checkout page. There the whole content of the cart will be looped and presented in detail for you to edit, add your bank information and commit you purchase on. From there on I must involve further backend services, such as Shopify, to handle the exchange if I so choose to make the website into an operational webstore.