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)

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.

• 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

See how it looks: Mullward Räddar Museet.

VSCode + ESLint.

See Vite Configuration Reference.

Clone the git repository

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

Install all the necessary dependencies for the project:

npm install

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

npm run dev

npm run test:unit

npm run lint

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

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