A simple application to view weather status in current, and custom locations.
- Node:
v12.22.0or later.
/root
├── components # Domain-specific components
│ └── [ComponentName]
│ ├── [ComponentName].stories.tsx # stories with all variants for the component
│ ├── [ComponentName].styles.tsx # all component-specific styles
│ ├── index.tsx # main component implementation
│ └── [ComponentName].types.tsx # types for the component
│
├── core # The core application (domain) layer
│ ├── api # all apis for entities
│ ├── actions # this is the core of the application business logic
│ └── store # data store to share data across the application
│
├── design-system # General theme for the whole application
│ ├── types # General types for main theme
│ ├── defaultTheme # Default theme file, should contain any component customizations
│ └── index # Main theme initialization and export
│
├── pages # NextJS directory for pages
│
└── public # Any static files to be used in the app
Run yarn before starting.
- Generate API key from https://openweathermap.org/
- Add the key to
/.env.localfile (env key:APP_ID)
APP_ID=xxxxx
In the project root directory, you can run:
Installs packages
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Starts storybook for applications. Open http://localhost:3000 to view it in the browser.
- I had some challenges finding a good geo API, so I ended up with an API that returns lots of cities data for some countries, which may slow down the UI performance.
- For some mysterious reasons, the main page unmounts on initial load, so it mounts twice, which leads to calling the API 2 times.