Skip to content

▶ WeatherApp is a friendly web app that helps you check the current weather in a city easily. It's simple to use and gets its weather information from a open public source. You'll see the weather presented in a clear way that everyone can understand. Plus, you can look back at your past searches and sort them by date or city name.🔽BACKEND CODE👇

Notifications You must be signed in to change notification settings

krishnaprasad45/WeatherApp-Client

Repository files navigation

React + TypeScript + Vite

Weather App 🌥

Description

WeatherApp is a friendly web app that helps you check the current weather in a city easily. It's simple to use and gets its weather information from a open public source. You'll see the weather presented in a clear way that everyone can understand. Plus, you can look back at your past searches and sort them by date or city name.

Instructions to Run the App

  1. Frontend and Backend in the different repository (links are provided).
  2. Clone the repository Client - git clone https://github.com/krishnaprasad45/WeatherApp-Client.git
  3. Install dependencies using npm install
  4. Start the development server using npm run dev.
  5. Note: secret values are protected in .env file, it's not accessible for you, create your own .env and run the project.

Client developement tools,libraries and technologies used

  1. React + Vite
  2. Tailwind CSS
  3. TypeScript
  4. axios -Improved, efficienct and reliable in fetching data from APIs
  5. lodash - For efficient debounce functionality, delaying function execution until after a specified time interval has elapsed.
  6. ESLint - (To maintain consistent coding standards and identifies potential errors)
  7. React Toastify - (For showing pop-ups , messages to the user.)
  8. React Date Picker - (For date picking, Here date based filtering)

Optimization Techniques Used

  • React.memo: Remembers the previous appearance of a component and skips updates if the props haven't changed.
  • useCallback: Saves functions, avoiding recreation of functions on each render.
  • useMemo: Saves computational resources by recalculating values only when needed.
  • React.lazy: Enables efficient loading of components when they are needed.
  • Component Separation: Enhances reusability and facilitates easier loading by breaking down components into smaller, manageable pieces.

Thumbnail Image

About

▶ WeatherApp is a friendly web app that helps you check the current weather in a city easily. It's simple to use and gets its weather information from a open public source. You'll see the weather presented in a clear way that everyone can understand. Plus, you can look back at your past searches and sort them by date or city name.🔽BACKEND CODE👇

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published