https://github.com/meltwater/grimoire-interview
This repo is only used for conducting interviews
https://github.com/meltwater/grimoire-interview
coe-no-owner department-100 purpose-interviews team-no-owner
Last synced: 5 months ago
JSON representation
This repo is only used for conducting interviews
- Host: GitHub
- URL: https://github.com/meltwater/grimoire-interview
- Owner: meltwater
- Created: 2023-09-05T14:01:59.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-07T16:38:45.000Z (5 months ago)
- Last Synced: 2025-05-07T17:43:09.102Z (5 months ago)
- Topics: coe-no-owner, department-100, purpose-interviews, team-no-owner
- Language: TypeScript
- Homepage:
- Size: 451 KB
- Stars: 0
- Watchers: 6
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather App Code Evaluation
Welcome to the Weather App evaluation! This repository contains a weather application structured as a mono repo. Your challenge involves understanding the codebase, discussing architecture and solving a hands on coding challenge.
## Quick Setup 🚀
For a fast and straightforward setup:
1. Navigate to the workspace root directory.
2. Run `npm install` to install all the necessary dependencies for each package.
3. Execute `npm run start:app` to get everything up and running. This command streamlines the process by sequentially starting the backend, building the Stencil library, building the Vue library, and then launching the Vue 3 application.
## Detailed Setup Instructions
1. **Backend Setup**:
- Start by getting the GraphQL app running locally. This step is crucial as your frontend app will fetch its data from here.
2. **Stencil Library**:
- Navigate to the `stencil-library` directory.
- Install the necessary dependencies using `npm install`.
- Remember to execute `npm run build` every time there's an update to the library. This ensures that the latest components are available for use.
3. **Vue Library**:
- This library plays a pivotal role in integrating Stencil components into our Vue 3 application.
- Navigate to the `vue-library` directory.
- Install the necessary dependencies.
4. **Vue 3 App (wis-app)**:
- Navigate to the `wis-app` directory.
- Execute `npm install` to initialize the app dependencies.
- Launch the app locally with `npm run dev`.
## Evaluation Process
Here's what's expected of you:
### Hands-on Coding Challenge
To assess your skills in integration, problem-solving, and design, we've prepared a specific challenge related to our application.
#### Challenge
Once you've set everything up, you'll be presented with an app comprising two distinct sections:
1. **By Location**:
- This UI segment, located on the right side, enables users to choose a location from a dropdown and subsequently view the weather data pertinent to that location.
**Task 1**:
- Your first task is to refine the styles in the "By Location" segment. Aim for a visually compelling, intuitive layout that promises an outstanding user experience.
2. **WatchList**:
- This section initially displays an empty interface.
**Task 2**:
- Integrate the given GraphQL mutation to allow users to append multiple locations to their watchlist.
```graphql
mutation Mutation($locations: [String!]!) {
addToWatchList(locations: $locations)
}
```
- Once locations have been added, devise a method to showcase the weather for each location using the Weather Card component. You can opt for either a carousel or an infinite scroll view.
#### Design Reference
You will be provided with a link to a Figma design. This design will serve as a reference for the expected end result. Ensure your solution is aligned with the design aesthetics and user experience illustrated in the Figma file.
#### Deliverables
1. A revamped "By Location" segment boasting enhanced styles and user experience.
2. A fully functional "WatchList" segment where users can effortlessly add locations and browse weather details in an engaging and user-friendly design.
**Time Limit**: 90 minutes.
---
Please remember that alongside functional solutions, we're eager to grasp your thought processes, methodologies, and approach. We greatly value coding best practices, innovation, and problem-solving prowess.