run npm install command in project directory
run npm start command
Above command should launch browser with some random port number
run npm test command
Tests are written in jest. Above command should run all test without any browser.
run npm run build command
Above command should build all webcomponents in dist folder
This solution majorly focus on architecture and less focused on user experience
This solution is build with purely web components which are first class citizens in modern browsers. At time of running these webcomponents are running without any framework. Multiple webcomponents are used together to generate this solution.
This is a single page application with routing enabled so user can easily navigate through browser back and forward button while searching for results and moving to previous search.
Below image shows architectural overview of this solution.
<app-root></app-root>is the main container of all web components. It contains router which holds links for / or /search or /search/query- / or /search will render
<landing-page></landing-page>component<landing-page></landing-page>component renders only<search-bar></search-bar>component
- When users search on search bar and hit enter or click on search button it will redirect user to /search/query route
- /search/query route will render
<search-results-page></search-results-page> which is a combination of search-bar and search-results component as shown in above image.
- stenciljs as web components compiler
- Typescript + JSX
- SCSS
- Jest