About

This project is a SPA application deployed via Netlify.

It has been developed using:

• Vue 3 (UI framework)
• Node.js (package manager)
• Vite (building tool)
• TailwindCSS (CSS styling)
• Pinia (state management)
• Vitest (unit testing)

Data from API

This application retrieves data from the API K-samsök from Swedish National Heritage Board via a service class Ksamsok.js. The data from K-samsök is used to fetch items with images, description etc for the items in the memory game.

Stores

• backpackStore.js <-- used to store items in the backpack and keep track of the state of the backpack (if backpack is full etc.)
• gameStore.js <-- used to manage the state of the memory game, set timers and handle game logic.
• StoryStore.js <-- used to keep track of the current index of story via ArrowButton in MainLayout and feeds that state to StoryPage

Live demo

See how it looks: Mullward Räddar Museet.

Screenshots

Dev enviroment

Recommended IDE Setup

VSCode + ESLint.

Customize Vite configuration

See Vite Configuration Reference.

Project setup

Clone the git repository

git clone https://github.com/ergyl/UXProject.git

Install all the necessary dependencies for the project:

npm install

Developing

While developing the project use this command to compile and hot re-load for development:

npm run dev

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Compile and deploy

Run this command to compile and Minify for Production:

npm run build

To deploy for production we used Netlify. You can do this in several different ways, we used dashboard on Netlify.com and deployed the project directly via Github.

Optional
You may also deploy this project from the command line with Netlify CLI. To ensure you have the latest version of Netlify CLI installed, run this command from any directory in your terminal:

npm install netlify-cli -g

In the directory for your project, run the following command to create a new Netlify site:

netlify init

Credits

Developed by ergyl, ciphercraftsman, Ounch1 and with the help of UX-designer students from Yrgo, Gothenburg.