Webshop - RalfiSlask

Screenshots

Tech Stack

• HTML5
• Vue
• Typescript
• Sass
• Tailwind

Build Tools

• Vite

Relevant Dependencies

• lodash
• pinia
• vue-router

Formatting

This projects uses code standards by applying the eslint and prettier tools:

• Eslint: identifies bugs and patterns to make the code more consistent.
• Prettier: code formatter for making the code more readable and consistent.

How To Run

Step 1: Clone and download repo. Step 2: Install node_modules using npm i. Step 3: Use the Mediainstitutet API in the env file, there is an example.env file in root. Step 4: Run script for vite (npm run dev) to launch the application.

Status

This project is marked as "In Progress"

App Description

This is an excercise given to me at Mediainstitutet for showing off what i have learned off Vue.

Features

• Routes: Home, Products, Checkout and Admin pages are available.
• Filter: Can filter products by categories and using the search function.
• Cart: Products can be added to a cart Sidebar where the user either can remove or increase/decrease the number of them.
• Checkout Form: Checkout form where user can fill in information and also pick payment method.
• Storing: Products are stored in local storage.
• View orders: Can see all the orders made for the fictive user.

What I have learned

• Had not used pinia before only state managment systems like vuex and redux.
• New ways of deploying to github pages.
• More familiarity with some parts of Vue that needed to be repeated.

Authors

• RalfiSlask