6 |
10 | )
11 | }
12 |
13 | export default WorldMap;
14 |
--------------------------------------------------------------------------------
/redux/slices/types/currentWeatheerTypes.ts:
--------------------------------------------------------------------------------
1 | export interface CurrentWeather {
2 | name: string;
3 | main: {
4 | temp: number;
5 | humidity: number;
6 | };
7 | weather: {
8 | description: string;
9 | icon: string;
10 | }[];
11 | }
12 |
13 | export interface CurrentWeatherState {
14 | data: CurrentWeather | null;
15 | status: 'idle' | 'loading' | 'succeeded' | 'failed';
16 | error: string | null;
17 | }
--------------------------------------------------------------------------------
/redux/slices/types/cityWeatherTypes.ts:
--------------------------------------------------------------------------------
1 | export interface CityWeather {
2 | name: string;
3 | weather: {
4 | description: string;
5 | icon: string;
6 | }[];
7 | main: {
8 | temp: number;
9 | humidity: number;
10 | };
11 | }
12 |
13 | export interface CityWeatherState {
14 | cities: CityWeather[];
15 | defaultCities: string[];
16 | status: 'idle' | 'loading' | 'succeeded' | 'failed';
17 | error: string | null;
18 | }
--------------------------------------------------------------------------------
/redux/slices/types/forecastTypes.ts:
--------------------------------------------------------------------------------
1 | export interface ForecastItem {
2 | dt_txt: string;
3 | main: {
4 | temp: number;
5 | humidity: number;
6 | };
7 | weather: {
8 | description: string;
9 | icon: string;
10 | }[];
11 | }
12 |
13 | export interface ForecastResponse {
14 | list: ForecastItem[];
15 | }
16 |
17 | export interface ForecastState {
18 | data: ForecastResponse | null;
19 | status: 'idle' | 'loading' | 'succeeded' | 'failed';
20 | error: string | null;
21 | }
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## Description
2 |
3 | Please provide a brief description of the changes you made.
4 |
5 | ## Related Issue
6 |
7 | If this pull request is related to an issue, please link it here.
8 |
9 | ## Checklist
10 |
11 | - [ ] My code follows the style guidelines of this project.
12 | - [ ] I have performed a self-review of my code.
13 | - [ ] I have commented my code, particularly in hard-to-understand areas.
14 | - [ ] I have made corresponding changes to the documentation.
15 | - [ ] My changes generate no new warnings.
16 |
--------------------------------------------------------------------------------
/src/components/LottieIcon.tsx:
--------------------------------------------------------------------------------
1 | interface LottieIconProps {
2 | icon: string;
3 | }
4 |
5 | const LottieIcon: React.FC
7 | 
8 |
9 |
8 | No current weather data available
; 11 | 12 | return ( 13 |
14 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/redux/slices/WeatherSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
2 |
3 | export const fetchWeather = createAsyncThunk(
4 | 'weather/fetchWeather',
5 | async (city: string) => {
6 | const response = await fetch(
7 | `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
8 | );
9 | return response.json();
10 | }
11 | );
12 |
13 | const weatherSlice = createSlice({
14 | name: 'currentWeather',
15 | initialState: { data: null, status: 'idle' },
16 | reducers: {},
17 | extraReducers: (builder) => {
18 | builder
19 | .addCase(fetchWeather.pending, (state) => {
20 | state.status = 'loading';
21 | })
22 | .addCase(fetchWeather.fulfilled, (state, action) => {
23 | state.data = action.payload;
24 | state.status = 'succeeded';
25 | })
26 | .addCase(fetchWeather.rejected, (state) => {
27 | state.status = 'failed';
28 | });
29 | },
30 | });
31 |
32 | export default weatherSlice.reducer;
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Azadeh Sharifi Soltani
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/ForecastCards.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector } from '../../redux/hooks';
2 | import { ForecastItem } from '../../redux/slices/types/forecastTypes';
3 | import LottieIcon from '@/components/LottieIcon';
4 | import { getLottieIcon } from '../../src/utils/iconMapper';
5 | export default function ForecastCards() {
6 | const forecast = useAppSelector((state) => state.forecast.data);
7 |
8 | if (!forecast || forecast.length === 0) {
9 | return {weather.name}
15 |
16 |
22 |
18 |
21 | {weather.weather[0].description}
19 |{weather.main.temp}°C
20 |No forecast data available.
; 10 | } 11 | 12 | return ( 13 |
14 | {forecast.slice(0, 8).map((item: ForecastItem, index: number) => (
15 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/CityList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useAppSelector } from '../../redux/hooks';
3 | import { getLottieIcon } from '../../src/utils/iconMapper';
4 | import LottieIcon from '@/components/LottieIcon';
5 |
6 | export default function CityList() {
7 | const cities = useAppSelector((state) => state.cityWeather.cities);
8 | const status = useAppSelector((state) => state.cityWeather.status);
9 |
10 | if (status === 'loading') {
11 | return
19 |
26 | ))}
27 | 20 | {new Date(item.dt_txt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} 21 |
22 |{item.weather[0].description}
24 |{item.main.temp}°C
25 |Loading cities...
; 12 | } 13 | 14 | if (!cities || cities.length === 0) { 15 | returnNo cities available.
; 16 | } 17 | 18 | return ( 19 |
20 | {cities.map((city) => (
21 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useEffect } from 'react';
4 | import { useAppDispatch, useAppSelector } from '../../redux/hooks';
5 | import { fetchDefaultCitiesWeather } from '../../redux/slices/cityWeatherSlice';
6 |
7 | import Sidebar from '@/components/Sidebar';
8 | import CityList from '@/components/CityList';
9 | import WeatherSearch from '@/components/WeatherSearch';
10 | import TehranWeather from '@/components/TehranWeather';
11 | import ForecastCards from '@/components/ForecastCards';
12 | import CurrentWeatherCard from '@/components/CurrentWeatherCard';
13 | import Footer from '@/components/Footer';
14 | import WorldMap from '@/components/WorldMap';
15 |
16 | export default function Home() {
17 | const dispatch = useAppDispatch();
18 | const weather = useAppSelector((state)=> state.currentWeather.data);
19 | useEffect(() => {
20 | dispatch(fetchDefaultCitiesWeather());
21 | }, [dispatch]);
22 |
23 | return (
24 | <>
25 |
22 |
31 | ))}
32 | {city.name}
23 | 24 |
25 |
27 |
28 | {city.weather[0].description}
29 |{Math.round(city.main.temp)}°C
30 |
26 |
42 |
43 |
44 |
45 | );
46 | }
--------------------------------------------------------------------------------
/redux/slices/currentWeatherSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
2 | import axiosInstance from '../../src/utils/axiosInstance';
3 |
4 | interface CurrentWeather {
5 | name: string;
6 | main: {
7 | temp: number;
8 | humidity: number;
9 | };
10 | weather: {
11 | description: string;
12 | icon: string;
13 | }[];
14 | }
15 |
16 | interface CurrentWeatherState {
17 | data: CurrentWeather | null;
18 | status: 'idle' | 'loading' | 'succeeded' | 'failed';
19 | error: string | null;
20 | }
21 |
22 | const initialState: CurrentWeatherState = {
23 | data: null,
24 | status: 'idle',
25 | error: null,
26 | };
27 |
28 | export const fetchCurrentWeather = createAsyncThunk
27 |
29 |
30 |
41 |
31 |
36 |
37 |
40 |
27 |
42 |
43 | {currentWeatherError && (
44 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # 🚀 Contributing to Our Project
2 |
3 | We are thrilled that you are interested in contributing to our project. Your support and involvement are what make our community strong and our project better. Whether you're fixing a bug, adding a feature, or simply improving documentation, every contribution is valuable. 💪
4 |
5 | ## 📝 How to Contribute
6 |
7 | ### 1. Fork the Repository
8 |
9 | Click the _Fork_ button at the top right of this page to create a copy of the repository under your GitHub account.
10 |
11 | ### 2. Clone Your Fork
12 |
13 | bash
14 | git clone https://github.com/frau-azadeh/dashboard-weather.git
15 | cd REPOSITORY_NAME
16 |
17 | ### 3. Create a Branch
18 |
19 | Create a new branch for your changes:
20 |
21 | git checkout -b your-feature-name
22 |
23 | ### 4. Make Your Changes
24 |
25 | Edit the code, fix bugs, or improve the documentation. Remember to write clean and well-documented code.
26 |
27 | ### 5. Commit Your Changes
28 |
29 | git add .
30 | git commit -m "Brief description of your changes"
31 |
32 | ### 6. Push to Your Fork
33 |
34 | git push origin your-feature-name
35 |
36 | ### 7. Create a Pull Request
37 |
38 | Go to the original repository, click on _Pull Requests, and select \*\*New Pull Request_. Choose your branch and submit the PR for review.
39 |
40 | ## ✅ Contribution Guidelines
41 |
42 | - Ensure your code follows the existing style and conventions.
43 | - Write clear, concise commit messages.
44 | - Provide a detailed description of your changes in the pull request.
45 | - Test your changes before submitting.
46 |
47 | ## 🌟 Additional Ways to Contribute
48 |
49 | - Report issues 🐛
50 | - Suggest new features ✨
51 | - Improve documentation 📖
52 | - Share the project with others 💬
53 |
54 | ## 🤝 Code of Conduct
55 |
56 | Please note that we follow a [Code of Conduct](CODE_OF_CONDUCT.md) to ensure a welcoming and inclusive environment.
57 |
58 | ## 💬 Need Help?
59 |
60 | If you need any help or have questions, feel free to open an issue or reach out to us. We’re happy to help! 🚀
61 |
62 | Thank you for helping us make this project better! ❤️
63 |
--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import { WiDayWindy , WiDayLightning ,WiThermometer, WiBarometer} from "react-icons/wi";
2 | import { FaChartSimple } from "react-icons/fa6";
3 | import { GiWorld } from "react-icons/gi";
4 | export default function Sidebar() {
5 | return (
6 | <>
7 | 45 | Failed to fetch current weather data: {currentWeatherError} 46 |
47 | )} 48 | {forecastError && ( 49 |50 | Failed to fetch forecast data: {forecastError} 51 |
52 | )} 53 |
8 |
31 |
32 |
33 |
34 | );
35 | }
--------------------------------------------------------------------------------
/redux/slices/cityWeatherSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
2 | import axiosInstance from '../../src/utils/axiosInstance';
3 | import { CityWeather, CityWeatherState } from '../slices/types/cityWeatherTypes';
4 |
5 | const initialState: CityWeatherState = {
6 | cities: [],
7 | defaultCities: ['London', 'New York', 'Tokyo', 'Berlin'],
8 | status: 'idle',
9 | error: null,
10 | };
11 |
12 | export const fetchCityWeather = createAsyncThunkLoading...
;
29 | if (status === 'failed') return Failed to fetch data
;
30 |
31 | const now = new Date().getTime();
32 |
33 | const filteredForecast = forecast?.filter((data) => {
34 | const forecastTime = new Date(data.dt * 1000).getTime();
35 | const hour = new Date(data.dt * 1000).getHours();
36 | return (
37 | forecastTime > now &&
38 | forecastTime <= now + 24 * 60 * 60 * 1000 &&
39 | (hour === 6 || hour === 12 || hour === 18 || hour === 0)
40 | );
41 | });
42 |
43 | const chartData = {
44 | labels: filteredForecast?.map((data) =>
45 | new Date(data.dt * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
46 | ),
47 | datasets: [
48 | {
49 | label: 'Temperature (°C)',
50 | data: filteredForecast?.map((data) => data.temp),
51 | borderColor: 'rgb(75, 192, 192)',
52 | backgroundColor: 'rgba(75, 192, 192, 0.2)',
53 | borderWidth: 2,
54 | },
55 | ],
56 | };
57 |
58 | const chartOptions = {
59 | responsive: true,
60 | plugins: {
61 | legend: {
62 | display: false,
63 | },
64 | },
65 | };
66 |
67 | return (
68 |
69 |
106 | );
107 | };
108 |
109 | export default TehranWeather;
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | designweb.azadeh@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/public/images/world.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
114 |
--------------------------------------------------------------------------------
70 |
85 |
86 |
71 |
75 | Current Weather in Tehran
72 |{currentWeather?.temp}°C
73 |{currentWeather?.description}
74 |77 | {currentWeather?.dt 78 | ? new Date(currentWeather.dt * 1000).toLocaleTimeString([], { 79 | hour: '2-digit', 80 | minute: '2-digit', 81 | }) 82 | : 'Loading ...'} 83 |
84 |
87 | {filteredForecast?.map((data, idx) => (
88 |
100 |
101 |
89 |
98 | ))}
99 | 90 | {new Date(data.dt * 1000).toLocaleTimeString([], { 91 | hour: '2-digit', 92 | minute: '2-digit', 93 | })} 94 |
95 |{data.temp}°C
97 |
102 |
105 |