https://github.com/mrirakib04/web-practice-8
Blog website practice - BlogEng BD
https://github.com/mrirakib04/web-practice-8
firebase framer-motion html javascript react tailwind
Last synced: 3 months ago
JSON representation
Blog website practice - BlogEng BD
- Host: GitHub
- URL: https://github.com/mrirakib04/web-practice-8
- Owner: mrirakib04
- Created: 2025-02-25T14:29:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-28T21:53:23.000Z (over 1 year ago)
- Last Synced: 2025-10-10T05:12:13.845Z (9 months ago)
- Topics: firebase, framer-motion, html, javascript, react, tailwind
- Language: JavaScript
- Homepage: https://mrirakib-web-practice-8.netlify.app/
- Size: 2.92 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BlogEng BD - Blog Platform
**BlogEng BD** is a modern blogging platform designed to allow users to create, read, and interact with blog posts in a seamless, responsive environment. The platform integrates various features like dynamic content loading, smooth animations, real-time notifications, and more. With the power of React and Vite, BlogEng BD provides a fast and engaging experience for both bloggers and readers.
## Project Overview
This repository contains the full React.js implementation for the **BlogEng BD** blog platform. Users can read blog posts, write comments, and share their thoughts on various topics. The platform is designed for ease of use, performance, and a rich user experience.
### Key Features:
1. **Responsive Blog Layout**: The website has a fully responsive design that adapts to different screen sizes and devices, offering an optimal viewing experience.
2. **Dynamic Content**: Blog posts are dynamically loaded and presented, with smooth transitions and animations using **AOS** (Animate On Scroll).
3. **User Interaction**: Users can interact with blog posts through comments, likes, and sharing, creating a community-driven environment.
4. **Real-time Notifications**: Powered by **React Toastify**, users receive real-time notifications for actions such as posting comments or liking a post.
5. **Animations**: Smooth CSS animations provided by **animate.css** add a lively touch to the user interface, making browsing more engaging.
6. **Typewriter Effect**: **React Simple Typewriter** enhances the homepage with a stylish typewriter effect for showcasing featured blog posts.
7. **Customizable Layout**: The use of **TailwindCSS** allows for a flexible and customizable layout, enabling easy adjustments to the design and style of the platform.
8. **Image Gallery**: **React Photo View** provides an interactive image gallery where users can view images in full-screen mode.
9. **Scroll Effects**: **React Fast Marquee** is used for displaying dynamic, scrolling content such as headlines or featured blog titles.
10. **Alert System**: **SweetAlert2** is utilized to display alert popups for success or error messages in a user-friendly format.
11. **Data Fetching & Management**: **Axios** is used for making API requests to fetch blog data and manage user interactions with the platform.
## Dev Dependencies
```json
"dependencies": {
"@tailwindcss/vite": "^4.0.9",
"animate.css": "^4.1.1",
"aos": "^2.3.4",
"axios": "^1.8.1",
"dotenv": "^16.4.7",
"firebase": "^11.4.0",
"framer-motion": "^12.4.7",
"prop-types": "^15.8.1",
"react": "^19.0.0",
"react-data-table-component": "^7.7.0",
"react-dom": "^19.0.0",
"react-faq-component": "^1.3.4",
"react-fast-marquee": "^1.6.5",
"react-icons": "^5.5.0",
"react-loader-spinner": "^6.1.6",
"react-loading-skeleton": "^3.5.0",
"react-photo-view": "^1.2.7",
"react-router": "^7.2.0",
"react-select": "^5.10.0",
"react-simple-typewriter": "^5.0.1",
"react-toastify": "^11.0.5",
"react-tooltip": "^5.28.0",
"sweetalert2": "^11.17.2",
"tailwindcss": "^4.0.9"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"vite": "^6.2.0"
}
```
---
# ⚙️ **Installation Process**
Follow the instructions below to run **BlogEng BD** on your local machine.
---
## **1️⃣ Clone the Repository**
```bash
git clone https://github.com/mrirakib04/server-2
```
Or download the ZIP file.
---
## **2️⃣ Navigate Into the Project**
```bash
cd blogeng-bd # or the downloaded folder name
```
---
## **3️⃣ Install Dependencies**
```bash
npm install
```
---
## **4️⃣ Create Environment Variables**
Create a `.env` file in the project root:
```
VITE_apiKey=YOUR_FIREBASE_API_KEY
VITE_authDomain=YOUR_FIREBASE_AUTH_DOMAIN
VITE_projectId=YOUR_PROJECT_ID
VITE_storageBucket=YOUR_BUCKET
VITE_messagingSenderId=XXXX
VITE_appId=XXXX
```
> Make sure your Firebase project is properly configured with Authentication enabled.
---
## **5️⃣ Start the Local Development Server**
```bash
npm run dev
```
---
## **6️⃣ Open in Browser**
Once Vite starts, open:
```
http://localhost:5173
```
You’ll now be able to access the BlogEng BD platform locally.
## Links:
- **Web:** [https://mrirakib-web-practice-8.netlify.app/](https://mrirakib-web-practice-8.netlify.app/)
- **Server:** [https://github.com/mrirakib04/server-2/](https://github.com/mrirakib04/server-2/)
## Conclusion
Thank you for checking out my repository. If you have any feedback or suggestions, feel free to reach out!
---
Developed by **Md Rakibul Islam Rakib**
- Design **Own Idea**