Demo: https://dbnvcmvrpauhtyrk.firebaseapp.com/
- Angular7, Angular Material 7 (ripples), NGXS (state management), ngx-infinite-scroll
- List recommend and top apps from Apple App Store api
- Ghost items for ux enhancement before data loaded
- Responsive
- PWA
- Tested
- .spec.ts are test files.
src/
app/
api/
api.response.ts - Data transfer object of api
api.module - Provide api related features
api.service - Api connector service
injection-tokens.ts - Provide token to inject api server
app-icon/
app-icon.component - Show a icon image with styles
app-icon.module - Provide icon component as module
app-list/
app-list/ - Styled app list with 'ghost' ux
app-list-hori/ - Styled horizontal app list with 'ghost' ux
app-list-hori-item/ - Styled horizontal list item and it's 'ghost'
app-list-item/ - Styled list item and it's ghost
app-icon.pipe - Get a right app icon
app-list.module - Provide list features
app-name.pipe - Get a right app name
search-bar/ - Search bar component in app
state/ - State model, action and selectors with NGXS
app.component - The app
app.module.ts - The root module
assets/
icons/ - PWA icons
environments/ - Enviroments variables for different targets
index.html - App entry point
karma.conf.js - Karma config
manifest.json - PWA manifest
- Run
yarn
to install packages. - Replace your Google Maps API key in script tag in src/index.html
- Backend server can configure in src/environments.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Coverage info can generate to (./coverage) after run ng test
.