To view the app, you can cd into the vocab-app
directory and run npm install
and then npm run dev
. You can then view the app in the generated localhost link.
The starting/home page of the tool would look like the following:
![home_page1](https://private-user-images.githubusercontent.com/34932871/289843277-5f20941e-f06f-44b6-b9aa-92433a593a08.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NTc1NzEsIm5iZiI6MTcyMzg1NzI3MSwicGF0aCI6Ii8zNDkzMjg3MS8yODk4NDMyNzctNWYyMDk0MWUtZjA2Zi00NGI2LWI5YWEtOTI0MzNhNTkzYTA4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDAxMTQzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQzN2I1YTQwNGJlMjJmNDdjZmI1NDFjYzUzYzA0YTU3NDY5ZDAzMjA0YmJhMDY3MGJlYmUxZGNlNmNjY2VhNmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.hTuwdmQhLurFcn0-BDRdf1U0a_T_SlgAQd_oWypYNig)
![home_page2](https://private-user-images.githubusercontent.com/34932871/289844834-59eb0ba7-5ce9-490d-8798-b1182e4b7740.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NTc1NzEsIm5iZiI6MTcyMzg1NzI3MSwicGF0aCI6Ii8zNDkzMjg3MS8yODk4NDQ4MzQtNTllYjBiYTctNWNlOS00OTBkLTg3OTgtYjExODJlNGI3NzQwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDAxMTQzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVkNmU5OTA0OGY1MDJkMmFkMDdhZjgxMDlmMDFjYmEyNjRkYzE1NGIzYmJjMmQzNTEwNDFjNjY0ZWEyZGRkMjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.vg1uaP3ajS_XdCskPOXGSysl2CUKk13COccBbeqhY7I)
![home_page3](https://private-user-images.githubusercontent.com/34932871/289845967-8785bbb6-674f-4e58-a895-38c44fb61584.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NTc1NzEsIm5iZiI6MTcyMzg1NzI3MSwicGF0aCI6Ii8zNDkzMjg3MS8yODk4NDU5NjctODc4NWJiYjYtNjc0Zi00ZTU4LWE4OTUtMzhjNDRmYjYxNTg0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDAxMTQzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk0ODY5ZGQ0YjRlMjNmM2RmM2U4OTJhZDc5MDg5YWE5OGIyNTczMTk3MGY2OWY5YmZiYmJlYTc0NTQxNjJhNGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Rj62MAR67TjjTuBNY4vhacdfbE_meVdHFg197tdzY6Y)
When you click at a vocabulary instance, you can view their respective vocabulary page that would start with the chart you can see in the home page, but with the location of this specific word enlarged. An instance is shown below:
To view the demo of the tool, please visit the following link: https://youtu.be/ATrKLP5piW4