Kusewa Exch

This project was created as a platform for drawing names for my family's secret santa gift exchange.

Features

• TypeScript - For type safety and other awesome features not native to vanilla JavaScript.
• SASS - CSS extension language for CSS nesting, mixins, variables, modules and inheritance.
• BEM Methodology - Methodology for naming and organizing CSS selectors and HTML elements.
• Vuex - Vue.js library for state management.

Design Resources

• View the style guide here
• View the prototype design here

Note: Images used in the project and designs are not my own.

Environment Variables

To run the project, first copy the example variables into a .env.[mode].local file with command: cp .env.example .env.[mode].local. The modes available are documented here. You will then need to modify the following environment variables in the .env.[mode].local file for the frontend to run:

• VUE_APP_NAME - Name of the application

• VUE_APP_URI - URI for the application

• VUE_APP_API_URI - URI for the REST API(randomuser.me already preselected)

Run Locally(development mode)

Clone the project

  git clone https://github.com/peterkitonga/kusewaexch

Go to the project directory

  cd kusewaexch

Install dependencies

  npm install

Start the server

  npm run serve

Run with Docker

To run with docker simply run the command docker-compose up -d. This will create a container by the name kxch exposing a port 8080. Visit http://127.0.0.1:8080 to view the app running.

Deployment(production mode)

Install dependencies first

  npm install

To deploy this project run

  npm run build

Running Tests

Tests are written in Mocha, Chai under the tests directory and uses istanbul for coverage reports. To run tests, run the following command

  npm run test:unit

To run and view coverage reports for the tests, you will need to run two scripts in sequential order

  npm run test:coverage ; npm run test:view

Linting

Linting is configured with eslint and prettier. You are free to configure it to your liking using the configuration file .eslintrc.js.

To check for and fix linting errors, run

  npm run lint

Further Customization

See configuration reference here for further customization

Authors

Peter Kitonga