Weather Sense

This repository contains a full-stack project developed using the MERN stack (MongoDB, Express.js, React, and Node.js) that fetches local weather data from weather API and displays it on the dashboard.

WeatherSense.Demo.mp4

Frontend

The frontend of this

project is meticulously crafted using React, a powerful JavaScript library. It serves as the backbone of the application, handling routing and rendering of multiple sub-components, including the visually appealing dashboard page, welcoming page, and the intuitive login/register pages. These pages are thoughtfully designed utilizing a blend of HTML, CSS, and JavaScript, ensuring an engaging and seamless user experience.

To fetch data from the Weather API and interact with the MongoDB database, the project leverages the Axios library. Axios provides a convenient and efficient way to make GET/POST requests, facilitating the retrieval and manipulation of data in a secure manner. By integrating Axios, the frontend seamlessly communicates with the backend, enabling smooth data exchange between the application and external APIs.

Backend

The backend of this project is built using Express.js and Node.js, serving as a robust bridge between the React frontend and the database. It enables seamless communication and facilitates the retrieval of weather data by leveraging Express's powerful GET/POST functionality.

For efficient data storage and management, the project utilizes a MongoDB database hosted on MongoDB Atlas. The database consists of two collections: "Active Users" for currently logged-in users and "Registered Users" for storing details of registered users like name, email, password, and city.

Authors

• @Kunaal Gupta

Installation and Setup

git clone https://github.com/kunaal-gupta/WeatherSense.git

npm install

Running App

Server-side Application

  cd server

  npm install

  npm run dev

Client-side Application

  cd server

  npm install

  npm start

Dependencies

• Font Awesome Icons : Library for Font Awesome solid style icons.

  npm i --save @fortawesome/fontawesome-svg-core

• React Router Dom: Package which enables client side routing in React applications.

  npm i react-router-dom

• React Icons: Library for popular icons in your React projects

  npm install react-icons --save

• Apexcharts.JS: Library for interactive charts in React using ApexCharts

  npm install apexcharts --save

Tech Stack

Frontend: React

Backend: Node, Express

Database: MongoDB

Feedback

If you have any feedback, please reach out to us at kunaalgupta@hotmail.com

Installation

Install WeatherSense with npm after cloning the project

npm Install

Documentation

React Framework

Express JS

MongoDB

Axios

Features

• Fetches weather data from an API every minute and displays it in the frontend
• Allows users to register and login to access personalized weather information
• Stores user data, including name, email, password, and city, in a MongoDB database
• Provides a responsive user interface with routing and sub-component rendering using React

Contributing

Contributions are always welcome!

If you encounter any bugs or would like to suggest improvements, please open an issue or submit a pull request.

About Me

I'm a results-driven full-stack software developer passionate about building innovative solutions using the latest tech stack in an Agile environment. With a focus on optimal functionality, quality, and reliability, I excel at developing robust software systems.

My expertise lies in Python with frameworks like Django and libraries like Pandas, NumPy, OpenCV, Matplotlib, SciKit, and Tkinter . I'm also proficient in C++, JavaScript, Ajax, HTML5/CSS, React & Node.JS and have hands-on experience with blockchain technologies, specifically Solidity and Ethereum .

In addition, I have a great understanding of database management systems such as MongoDB, MySQL, and SQLite . To streamline my work, I employ various tools including PyCharm, Visual Studio Code, JIRA, GitHub, Truffle, Metamask, Ganache, Remix IDE, and the Microsoft Suite.