Apod.PWA
🪐🛰 PWA Aplication Based on NASA APOD API
Install / Use
/learn @maccali/Apod.PWAREADME
ApodSpace
<p align="center"> <i>Site & APP</i> </p> <p align="center"> <a href="https://apod.pictu.one" target="_blank"> <img alt="Veja o Site" src="https://github.com/maccali/Apod/blob/master/.github/site.png" /> </a> <a href="https://play.google.com/store/apps/details?id=one.pictu.apod.twa&hl=pt_BR&gl=US" target="_blank"> <img alt="Veja o App" src="https://github.com/maccali/Apod/blob/master/.github/google-play.png"> </a> </p> <p align="center"> <i>Info</i> </p> <p align="center"> <img alt="PRs welcome!" src="https://img.shields.io/static/v1?label=PRs&message=welcome&color=7159c1&labelColor=000000&style=flat-square" /> <img alt="License" src="https://img.shields.io/static/v1?label=license&message=MIT&color=7159c1&labelColor=000000&style=flat-square"> </p> <p align="center"> <i>Techs</i> </p> <p align="center"> <a href="https://www.npmjs.com" target="_blank"> <img alt="NPM" src="https://img.shields.io/badge/npm-v6.12.1-0.svg?style=flat-square&labelColor=000000"> </a> <a href="https://nodejs.org/en/" target="_blank"> <img alt="Node" src="https://img.shields.io/badge/node-v14.17.6-0.svg?style=flat-square&labelColor=000000"> </a> <a href="https://yarnpkg.com" target="_blank"> <img alt="Yarn" src="https://img.shields.io/badge/Yarn-1.22.4-0.svg?style=flat-square&color=2c8ebb&labelColor=000000"> </a> <a href="https://nextjs.org" target="_blank"> <img alt="NextJS" src="https://img.shields.io/badge/NextJS-11.1.1-0.svg?style=flat-square&color=6191ff&labelColor=000000"> </a> <a href="https://github.com/axios/axios" target="_blank"> <img alt="Axios" src="https://img.shields.io/badge/Axios-0.21.1-0.svg?style=flat-square&color=1f7cb1&labelColor=000000"> </a> <a href="https://getbootstrap.com" target="_blank"> <img alt="Bootstrap Grid" src="https://img.shields.io/badge/Bootstrap Grid-4.4.1-0.svg?style=flat-square&color=563d7c&labelColor=000000"> </a> <a href="https://react-icons.github.io/react-icons/" target="_blank"> <img alt="React Icons" src="https://img.shields.io/badge/React Icons-^3.10.0-0.svg?style=flat-square&color=e91e63&labelColor=000000"> </a> <a href="https://reactjs.org"> <img alt="ReactJS" src="https://img.shields.io/badge/ReactJS-17.0.2-0.svg?style=flat-square&color=00d8ff&labelColor=000000"> </a> </p> <p align="center"> <i>Best Practices</i> </p> <p align="center"> <a href="https://nextjs.org/docs/basic-features/image-optimization" target="_blank"> <img alt="Next Image Optimization" src="https://img.shields.io/badge/Next Image-Optimization-0.svg?style=flat-square&color=022ba7&labelColor=000000" /> </a> <a href="https://accounts.google.com/" target="_blank"> <img alt="Google Analytics" src="https://img.shields.io/badge/Google-Analytics-0.svg?style=flat-square&color=f27904&labelColor=000000" /> </a> <a href="https://support.google.com/webmasters/answer/9008080?hl=pt-BR" target="_blank"> <img alt="Google Site Verification" src="https://img.shields.io/badge/Google-Site Verification-0.svg?style=flat-square&color=f36&labelColor=000000" /> </a> <a href="https://fonts.google.com" target="_blank"> <img alt="Google Fonts" src="https://img.shields.io/badge/Google-Fonts-0.svg?style=flat-square&color=ff5252&labelColor=000000" /> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/" target="_blank"> <img alt="PWA" src="https://img.shields.io/badge/PWA--0.svg?style=flat-square&color=5a0fc8&labelColor=000000"> </a> <a href="https://developers.google.com/web/android/trusted-web-activity" target="_blank"> <img alt="TWA" src="https://img.shields.io/badge/TWA--0.svg?style=flat-square&color=5a0fc8&labelColor=000000"> </a> <a href="https://alligator.io/vuejs/server-side-rendering-with-nuxtjs/" target="_blank"> <img alt="SSR" src="https://img.shields.io/badge/Server Side-Rendering-0.svg?style=flat-square&color=007ac0&labelColor=000000"> </a> <a href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank"> <img alt="SPA" src="https://img.shields.io/badge/Single Page-Application-0.svg?style=flat-square&color=f3c963&labelColor=000000"> </a> <a href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank"> <img alt="SSG" src="https://img.shields.io/badge/Static Site-Generation-0.svg?style=flat-square&color=96251e&labelColor=000000"> </a> <a href="https://en.wikipedia.org/wiki/Search_engine_optimization" target="_blank"> <img alt="SEO" src="https://img.shields.io/badge/SEO-0.svg?style=flat-square&color=0082f0&labelColor=000000"> </a> <a href="https://en.wikipedia.org/wiki/Site_map" target="_blank"> <img alt="Site Map" src="https://img.shields.io/badge/Site-Map-0.svg?style=flat-square&color=c1baa0&labelColor=000000"> </a> </p> <p align="center"> <i>Recommended Tools</i> </p> <p align="center"> <a href="https://code.visualstudio.com/" target="_blank"><img alt="Made with VSCode" src="https://img.shields.io/badge/Made%20with-VSCode-1f425f.svg?style=flat-square"></a> <a href="https://developers.google.com/web/tools/lighthouse" target="_blank"><img alt="Light House" src="https://img.shields.io/badge/Light-House-0.svg?style=flat-square&color=e95632&labelColor=000000"></a> </p>PWP app for Astronomy Picture of Day
Features
- <b>Today`s Picture</b> Home page
- <b>Pagination</b> 6 and 6 days, and select specific page
- <b>Visualize day</b> Visualize image and Videos
- <b>Calendar</b> Select especific day on calendar
- <b>About</b> Page about project
- <b>Image Optimization</b> With Next Image
Stargazers
In Develop
- <b>Favorite Days</b> Select Favorite
Quick Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
