Weather App demo build with Next.js 10 Tailwind.css and the AccuWeather Api. We also included Storybook and some other cool stuff. Live Demo here. We build this demo using our base server module the next module the tailwind module and the storybook module.
Right now we use the AccuWeather API on a Free Account. get a free account @ https://developer.accuweather.com/ free licence (limit 50 querys per day)
- yarn/npm install
- yarn/npm run dev
- npm run start //start next.js server in production mode
- npm run dev //start next.js server in dev mode
- npm run debug //start next.js server in dev mode with debugging enabled @ 9929
- npm build //build a static version of the app
- format format js, jsx, css files project wide with prettier
- npm run storybook //start storybook component library server
- npm run screenshot //screen shot the app with storybook (Stroybook server must be online)
- npm run build-storybook //build a static version of the stroybook component library
.
├── babel.config.json
├── config
│ └── server-conf.js //config for next.js && express
├── .env.development //.env file for dev server
├── .env.production //.env file for prodution server
├── .eslintignore
├── .eslintrc
├── .gitignore
├── jsconfig.json //path maps for next.js
├── LICENCE.md
├── log
│ └── access.log //server access.log for 404, 505 ect.
├── next.config.js //next.js configuration
├── package.json
├── package-lock.json
├── postcss.config.js
├── .prettierignore
├── .prettierrc
├── .prettierrc.json
├── README.md
├── __screenshots__ //screenshots (npm run screenshot)
├── server.js
├── src
│ ├── bin //server modules
│ │ ├── cors.js
│ │ ├── env.js
│ │ ├── express.js
│ │ ├── helmet.js
│ │ ├── main.js
│ │ ├── morgan.js
│ │ ├── next.js
│ │ └── plugin.js
│ ├── components //app componentes
│ │ ├── AppIcon.jsx
│ │ ├── AppOverlay.jsx
│ │ ├── Background.jsx
│ │ ├── Citylist.jsx
│ │ ├── CitySearch.jsx
│ │ ├── ConfirmButtons.jsx
│ │ ├── DynamicIcon.jsx
│ │ ├── Footer.jsx
│ │ ├── MenuAppOverlay.jsx
│ │ ├── Nav.jsx
│ │ ├── RadioGrp.jsx
│ │ ├── RequestCount.jsx
│ │ ├── ResultBox.jsx
│ │ ├── SearchField.jsx
│ │ ├── SelectionList.jsx
│ │ ├── serviceWorker.js
│ │ └── Viewlist.jsx
│ ├── context //app context for react
│ │ └── AppState.js
│ ├── data //api mockup data (used in debug mode)
│ │ ├── city.js
│ │ ├── current.js
│ │ ├── fiveday.js
│ │ └── tomorrow.js
│ ├── lib //global methods for rendering the weather data
│ │ ├── render.js
│ │ ├── requests.js
│ │ └── utils.js
│ ├── pages //app pages
│ │ ├── _app.js
│ │ ├── credits.js
│ │ ├── _document.js
│ │ ├── home.js
│ │ ├── index.js
│ │ ├── limit.js
│ │ ├── search.js
│ │ ├── settings.js
│ │ ├── tailwind.js
│ │ └── weather
│ │ └── index.js
│ └── stories //storybook files
│ ├── AppIcon.stories.js
│ ├── AppOverlay.stories.js
│ ├── Background.stories.js
│ ├── cerdits.stories.js
│ ├── Citylist.stories.js
│ ├── CitySearch.stories.js
│ ├── ConfirmButtons.stories.js
│ ├── data-mockup.js
│ ├── DynamicIcon.stories.js
│ ├── Footer.stories.js
│ ├── home.stories.js
│ ├── limit.stories.js
│ ├── MenuAppOverlay.stories.js
│ ├── Nav.stories.js
│ ├── RadioGrp.stories.js
│ ├── RequestCount.stories.js
│ ├── ResultBox.stories.js
│ ├── SearchField.stories.js
│ ├── search.stories.js
│ ├── SelectionList.stories.js
│ ├── settings.stories.js
│ ├── tailwind.stories.js
│ ├── Viewlist.stories.js
│ └── waether.stories.js
├── .storybook //storybook config
├── tailwind //tailwind units
│ ├── colors.js
│ ├── core.js
│ ├── fontsize.js
│ ├── height.js
│ ├── screens.js
│ ├── shadow.js
│ ├── spacing.js
│ └── width.js
├── tailwind.config.js //tailwind config
├── .vscode //debugging and general vscode settings
│ ├── launch.json
│ └── settings.json
16 directories, 100 files