Welcome to K-Web Tech, a sleek and modern frontend web application designed to showcase creative digital solutions. Built with React, Tailwind CSS, Framer Motion, and more, the platform highlights stunning UI/UX, smart animations, blog content, and restricted user access features.
- ⚡ Fast & optimized with Vite
- 🎨 Styled using Tailwind CSS
- 🌒 Dark mode with gradient-rich UI
- 🌀 Page transitions via Framer Motion
- ♻️ Reusable, modular React components
- 🔒 Firebase-based secure route protection
- 🔁 Marquee banners for brands & projects
- 👀 Scroll-reveal & animation interactions
| 📌 Page | 🔍 Description |
|---|---|
| Home | Hero + sections + logo carousel |
| About Us | Team or platform intro layout |
| Projects | Interactive featured cards |
| Blog | Blog listings with filters |
| Blog Details | Post with sidebar, likes |
| Login / Register | Firebase Auth with email & Google |
| Profile | User info & verification |
| Admin Dashboard | Role-based admin routes |
| Private Routes | Accessible only to logged-in users |
| 404/Coming Soon | Creative placeholder design |
- ✅ Email/password login
- 🌐 Google sign-in (OAuth)
- 🎯 Global auth context
- 🧾 Conditional rendering for protected content
- 📩 Email verification support
| 🔧 Tool / Tech | 🧩 Purpose |
|---|---|
| React.js | Frontend UI |
| Tailwind CSS | Styling |
| Framer Motion | Animations |
| React Router DOM | Client routing |
| Firebase | Auth & hosting |
| React Icons | SVG icons |
| SweetAlert2 | Modal alerts |
| React Awesome Reveal | Scroll reveal effects |
| React Fast Marquee | Smooth auto scroll |
Click to view folder tree
src/
│
├── components/ # Navbar, Cards, Loader, etc.
├── pages/ # Page-specific React components
├── routes/ # Route protection & private logic
├── hooks/ # Custom React hooks
├── assets/ # Static assets (images, SVGs)
├── CSS/ # Optional custom stylesheets
├── App.jsx # App shell and layout
├── main.jsx # Root app renderer
└── firebase.config.js# Firebase setup file
git clone https://github.com/kamrul2006/K-WEB-TECH-UI.git
cd k-web-tech
npm install
npm run devThis project uses Firebase Hosting.
npm run build
firebase login
firebase init
firebase deployEnsure you’ve installed Firebase CLI:
npm install -g firebase-toolsKamrul Islam Apurba Frontend Developer
This project is licensed under the MIT License.
Contributions are welcome!
- 🪄 Fork the repo
- 🛠 Create a new branch
- ✅ Submit a pull request
Found a bug or have a suggestion? Open an issue
- 🔥 Vite
- ✨ Framer Motion
- 🎨 Tailwind CSS
- ☁️ Firebase