https://github.com/younus-always/winter-shield
The Winter Shield Project aims to provide solutions for protecting individuals, communities, and infrastructure from the challenges associated with extreme winter conditions. It focuses on developing innovative strategies, tools, and resources to mitigate the impact of cold weather and enhance resilience during the winter months.
https://github.com/younus-always/winter-shield
aos-animation daisyui expressjs mongodb nodejs reacthottoast reactjs reactslick tailwindcss
Last synced: 4 months ago
JSON representation
The Winter Shield Project aims to provide solutions for protecting individuals, communities, and infrastructure from the challenges associated with extreme winter conditions. It focuses on developing innovative strategies, tools, and resources to mitigate the impact of cold weather and enhance resilience during the winter months.
- Host: GitHub
- URL: https://github.com/younus-always/winter-shield
- Owner: younus-always
- Created: 2024-12-09T08:31:52.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-02-05T10:04:42.000Z (4 months ago)
- Last Synced: 2025-02-05T10:27:10.877Z (4 months ago)
- Topics: aos-animation, daisyui, expressjs, mongodb, nodejs, reacthottoast, reactjs, reactslick, tailwindcss
- Language: JavaScript
- Homepage: https://winter-shield.netlify.app
- Size: 245 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ❄️ Winter Shield Project
## Introduction
The **Winter Shield Project** aims to provide solutions for protecting individuals, communities, and infrastructure from the challenges associated with extreme winter conditions. It focuses on developing innovative strategies, tools, and resources to mitigate the impact of cold weather and enhance resilience during the winter months.
## 🌐 Live Demo
🔗 **[Winter Shield Project](https://winter-shield.netlify.app/)**
## 📌 Installation
To set up the project locally, follow these steps:
1. **Clone the repository**:
```sh
git clone https://github.com/yourusername/winter-shield.git
cd winter-shield
```
2. **Install dependencies**:
```sh
npm install
```
3. **Create a `.env` file** in the root directory and add the following environment variables:
```ini
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_firebase_auth_domain
VITE_projectId=your_firebase_project_id
VITE_storageBucket=your_firebase_storage_bucket
VITE_messagingSenderId=your_firebase_messaging_sender_id
VITE_appId=your_firebase_app_id
```
4. **Start the development server**:
```sh
npm run dev
```
5. **Open your browser and navigate to**:
````sh
http://localhost:5173
````
## 🔑 Firebase Configuration
To configure Firebase for the project:
1. **Go to the Firebase Console**:
[Firebase Console](https://console.firebase.google.com/)
2. **Create a new project** or select an existing one.
3. **Get Firebase Configuration**:
- Navigate to **Project Settings**.
- Under **General**, find your **Firebase SDK Config**.
- Copy the API keys and paste them into your `.env` file.
4. **Enable Authentication** (Optional):
- In Firebase Console, go to **Authentication** → **Sign-in method**.
- Enable the necessary authentication providers.
5. **Set up Firestore Database** (if required):
- Go to **Firestore Database** and create a database.
- Set rules based on your project needs.
## 🔥 Features
✅ Interactive UI with smooth animations
✅ Firebase integration for real-time data storage
✅ Offline support with `localforage`
✅ Advanced sorting and filtering functionalities
✅ Responsive design powered by Tailwind CSS & DaisyUI
✅ Routing support via `react-router-dom`
✅ Toast notifications for user interactions
✅ Carousel & animations using `slick-carousel`, `animate.css`, and `AOS`
## 📦 Dependencies
### Main Dependencies
- [`react`](https://react.dev/) – Frontend framework
- [`react-dom`](https://react.dev/) – DOM rendering for React
- [`react-router-dom`](https://reactrouter.com/) – Routing
- [`firebase`](https://firebase.google.com/) – Backend services
- [`react-icons`](https://react-icons.github.io/react-icons/) – Icon library
- [`react-hot-toast`](https://react-hot-toast.com/) – Notifications
- [`animate.css`](https://animate.style/) – CSS animations
- [`aos`](https://michalsnik.github.io/aos/) – Scroll animations
- [`tailwindcss`](https://tailwindcss.com/) – Utility-first CSS framework
- [`daisyui`](https://daisyui.com/) – UI component library
### Development Dependencies
- [`vite`](https://vitejs.dev/) – Development build tool
- [`eslint`](https://eslint.org/) – JavaScript linter
- [`@vitejs/plugin-react`](https://www.npmjs.com/package/@vitejs/plugin-react) – React plugin for Vite
- [`postcss`](https://postcss.org/) – CSS transformation tool
## 🔧 Development
### 🚀 Running the Project
1️⃣ **Development Mode**:
```sh
npm run dev
```
2️⃣ **Build for Production**:
```sh
npm run build
```
### 🗂️ Project Structure
- `src/` – Main source code
- `public/` – Static assets
- `components/` – Reusable UI components
- `pages/` – Page views
- `hooks/` – Custom hooks
- `styles/` – CSS & Tailwind styles
## 🛠 Troubleshooting
**❓ Installation Issues:** Ensure `Node.js` and `npm` are installed properly.
**❓ Firebase Errors:** Verify API keys and database configurations.
**❓ Tailwind CSS Not Working:** Ensure `postcss` and `autoprefixer` are installed.
## 👥 Contributors
💡 **Md. Younus Islam** – [GitHub Profile](https://github.com/younus-always)
🎉 Contributions are welcome! Feel free to fork the repo, open issues, and submit pull requests.
## 🌟 Ending Note
🚀 **Thank you for exploring the Winter Shield Project!** ❄️
We hope this project empowers individuals and communities to prepare for and thrive in extreme winter conditions.
Your contributions, feedback, and support are greatly appreciated! 💙
Stay warm, stay safe, and keep innovating! 🔥✨
**Happy coding!** 🚀😊
### Key Additions:
✅ **Included `.env` file setup**
✅ **Step-by-step Firebase configuration guide**
✅ **Clear installation and troubleshooting steps**