Mobile Weather App - Nees

The application developed as part of the mobile developer selection process is a weather forecast solution developed in React-Native. It uses data from a weather forecast API to display accurate and up-to-date information such as temperature, humidity, wind speed, and other relevant information for the user's current location. The aim is to provide an intuitive and user-friendly experience, with a clear and organized display of the weather information.

Demonstration

Below, you can find videos demonstrating the use of the app in different scenarios, including during the day and at night, in both rainy and non-rainy conditions, on both iOS and Android versions. The videos provide a clear demonstration of the app's functionality in various scenarios. Check them out!

Daytime - IOS

video1.mp4

Nighttime - IOS

video2.mp4

Daytime - ANDROID

video4.webm

Nighttime - ANDROID

video3.webm

Download

APK :

Functionalities

Weather forecast: display current temperature, weather conditions, chance of rain, air humidity, wind speed, and other information.
City selection: allow users to search and select the city of their choice to view the weather forecast.
Weather animations: use animations to visually represent real-time weather conditions, including changes based on the time of day (such as transitions from day to night).
Extended weather forecast: provide long-term forecasts for the next few days, with information on maximum and minimum temperatures and chance of rain.

Stack used

Front-end:

React Native: a framework for building mobile apps using React
Expo: a set of tools and services for building and deploying React Native apps
Axios: a popular library for making HTTP requests
Moment: a library for parsing, validating, manipulating, and displaying dates and times
Styled Components: a library for styling React components using CSS
Zustand: a lightweight state management library for React
Lottie React Native: a library for adding animations to React Native apps
React Native SVG: a library for rendering SVG images in React Native
React Native Gesture Handler: a library for handling touch gestures in React Native apps
React Native Async Storage: a library for persisting data in React Native apps
React Native Location: a library for getting the user's location in React Native apps
Husky: a tool for adding git hooks to your project
Commitlint: a tool for enforcing commit message conventions
ESLint: a tool for enforcing JavaScript code style and identifying issues
Jest: a popular JavaScript testing library for React applications.

Back-end: Api hgbrasil

Requirements

Node.js

Yarn (ou NPM)

Expo CLI

How to run the project

To run this project, you need to follow these steps:

Install Node.js on your computer from the official website: https://nodejs.org/

Install the Yarn package manager (you can also use NPM, which comes with Node.js, if you prefer) by running the following command:

  npm install --global yarn

Install the Expo CLI globally using Yarn (or NPM):

   yarn global add expo-cli

Clone this repository to your computer:

   git clone https://github.com/ermessonlima/mobile-weather-app.git

Navigate to the cloned project folder and install the dependencies:

   cd mobile-weather-app
   yarn install

Start the Expo development server:

   npx expo start

Expo will display a QR code. To view the app on your mobile device, install the Expo Go app, which is available on the App Store (iOS) or the Google Play Store (Android). Once you have installed the app, open it and scan the QR code using your phone's camera or the scanning function within the Expo Go app. This will launch the app on your mobile device, allowing you to view and test its features.

Support

For support, please send an email to ermessonlimadossantos@gmail.com or contact us via phone/WhatsApp at: +55 82991209850.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file.

REACT_APP_BASE_URL:https://api.hgbrasil.com/weather?key={my_key}

Please provide your key via email or phone.

Color Documentation

Name	Hexadecimal
WHITE	#FFFFFF
BLACK	#000000
GREY	rgba(255,255,255,0.5)
CONDITION	#29B2DD, #33AADD, #2DC8EA
DAY_RAIN	#08244F, #134CB5, #0B42AB
NIGHT_RAIN	#00033F, #000443, #000000
NIGHT_CLEAN	#44444F, #888888, #444444

Font Documentation

Nome	Valor
REGULAR_SF	SF-Pro-Display-Regular
MEDIUM_ALEGREYASANS	AlegreyaSans-Medium
SEMIBOLD_SF	SF-Pro-Display-Semibold
BOLD_ALEGREYASANS	AlegreyaSans-Bold
BOLD_SF	SF-Pro-Display-Bold

Font Weight Documentation

Nome	Valor
REGULAR_SF	400
MEDIUM	500
SEMIBOLD_SF	600
BOLD_SF	bold

Font Size Documentation

Nome	Valor
P	10
MD	14
LG	18
XL	20
XXL	64

Spacing Documentation

Nome	Valor
P	5
PM	10
M	12
MD	20
LM	30
LG	38
XL	40

Rounded Border Documentation

Nome	Valor
LG	20

Developer

@ermessonlima

Instalação do storybook

Baseada em link

npx sb@latest init --type react_native

Edite o arquivo App.tsx

// import App from './src'
import StorybookUI from './.storybook'

if (__DEV__) {
  import('./ReactotronConfig')
}

// export default App

export default StorybookUI

Editar a linha do package.json:

"storybook": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start"

Para rodar o storybook:

yarn storybook

marmundo/mobile-weather-app