https://github.com/icelam/random-name-picker

Simple HTML5 random name picker for picking lucky draw winner using Web Animations and AudioContext API.
https://github.com/icelam/random-name-picker

audio-context audio-context-api lucky-draw pug random-name-picker scss typescript web-animation web-animations web-animations-api

Last synced: 6 days ago
JSON representation

Simple HTML5 random name picker for picking lucky draw winner using Web Animations and AudioContext API.

• Host: GitHub
• URL: https://github.com/icelam/random-name-picker
• Owner: icelam
• License: mit
• Created: 2021-02-21T07:12:09.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-30T16:16:22.000Z (9 months ago)
• Last Synced: 2025-01-07T21:07:53.607Z (14 days ago)
• Topics: audio-context, audio-context-api, lucky-draw, pug, random-name-picker, scss, typescript, web-animation, web-animations, web-animations-api
• Language: TypeScript
• Homepage: https://pinkylam.me/playground/random-name-picker
• Size: 6.25 MB
• Stars: 126
• Watchers: 4
• Forks: 155
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    



Random Name Picker for Lucky Draw



    Simple HTML5 random name picker for picking lucky draw winner using Web Animations and AudioContext API





    

    

    

    

    

    

    



## Live Demo

Demo is available at [https://pinkylam.me/playground/random-name-picker](https://pinkylam.me/playground/random-name-picker)

### Technology Stack

* Pug

* CSS3 (SCSS)

* Web Animations API

* AudioContext API

## Development

### Prerequisite

* Node 18 above or nvm installed

* Yarn or NPM installed

### Install dependencies

To install dependencies:

```bash

yarn install

```

### Start development server

To start the development server:

```bash

yarn start

```

### Build production

To build the project for production:

```bash

yarn build

```

All the build files can be found in `/dist` folder.

## General Guidance on Deployment

This app works fine under common static web hosting choices. Here's a general outline of the steps you can follow:

1. Set up your CI/CD pipeline to use Node.js and arn images. (If you prefer not to use a CI/CD pipeline, make sure you have both Node.js and Yarn installed on your machine.)

2. Start by installing the project dependencies. Run the command `yarn install` to ensure that all the necessary npm packages are installed and ready for the build process. To optimize costs and improve the efficiency of your CI/CD pipeline, you can consider adding a cache for the `node_modules` directory. Check your specific CI/CD tool's documentation for cache configuration options.

3. Next, you'll need to build the project. Use the command `yarn build` to initiate the build process. This command will compile and bundle the source code, generating the assets required for hosting.

4. Once the build process is complete, you'll need to copy all the generated assets located under the `/dist` directory. The specific command to accomplish this may vary depending on the CI/CD tool and OS you're using. Typically, you'll need to include a step in your pipeline that copies the contents of the `/dist` directory to a storage accessible by your chosen static web hosting service.