# HLS Tech - Hachi Tech Solutions **Full-Stack Portfolio Website with Super Admin Dashboard**     ## 🏢 About **HLS Tech (Hachi Tech Solutions)** is a professional full-stack portfolio website featuring: - **Public Side**: Portfolio showcase, services, blog, testimonials, and contact forms - **Super Admin Side**: Complete content management system with secure authentication **Founded by**: Luumuno Chibombya **Mission**: Provide innovative, reliable, and professional technology solutions **Vision**: Become a leading Zambian tech brand known for creativity, trust, and professionalism ## 🚀 Services - 💻 **Hardware Repair & Maintenance** - 🧠 **Software & Web Application Development** - 🎨 **Graphic Design & Branding** - 🧩 **UX/UI Design & User Experience Optimization** ## 📋 Features ### Public Website - ✅ Modern, responsive design with Tailwind CSS - ✅ Smooth animations with Framer Motion - ✅ SEO optimized with React Helmet - ✅ Dynamic service showcase - ✅ Project portfolio with filtering - ✅ Blog with categories and tags - ✅ Client testimonials carousel - ✅ Contact form with email notifications - ✅ Newsletter subscription - ✅ Social media integration ### Admin Dashboard - 🔐 Secure JWT authentication - 📊 Analytics dashboard with statistics - 📁 Full CRUD for Projects - 📝 Blog post management with draft/publish - 🛠️ Service management - ⭐ Testimonial approval system - 📧 Contact message management - 👥 Newsletter subscriber tracking ## 🛠️ Tech Stack ### Frontend - **React 18.2** - UI library - **Vite** - Build tool - **React Router DOM** - Routing - **Tailwind CSS** - Styling - **Framer Motion** - Animations - **Axios** - HTTP client - **React Helmet Async** - SEO - **React Hot Toast** - Notifications - **Lucide React** - Icons - **date-fns** - Date formatting ### Backend - **Node.js** - Runtime - **Express.js** - Web framework - **MongoDB** - Database - **Mongoose** - ODM - **JWT** - Authentication - **bcryptjs** - Password hashing - **Nodemailer** - Email service - **Helmet** - Security - **CORS** - Cross-origin resource sharing - **Express Rate Limit** - API protection - **Express Validator** - Input validation ## 📦 Installation ### Prerequisites - Node.js (v16 or higher) - MongoDB (local or Atlas) - Git ### 1. Clone the Repository ```bash git clone https://github.com/yourusername/hls-tech.git cd hls-tech ``` ### 2. Backend Setup ```bash cd backend npm install # Create .env file cp .env.example .env # Edit .env with your configuration # Set MongoDB URI, JWT secret, email credentials, etc. # Seed the database with initial data npm run seed # Start the backend server npm run dev ``` The backend will run on `http://localhost:5000` ### 3. Frontend Setup ```bash cd ../frontend npm install # Start the frontend development server npm run dev ``` The frontend will run on `http://localhost:3000` ## 🔧 Environment Variables ### Backend (.env) ```env PORT=5000 NODE_ENV=development MONGODB_URI=mongodb://localhost:27017/hls-tech JWT_SECRET=your_super_secret_jwt_key EMAIL_HOST=smtp.gmail.com EMAIL_PORT=587 [email protected] EMAIL_PASS=your-app-password [email protected] FRONTEND_URL=http://localhost:3000 ADMIN_USERNAME=admin ADMIN_PASSWORD=ChangeThisPassword123! ``` ### Frontend (.env) ```env VITE_API_URL=http://localhost:5000/api ``` ## 👤 Default Admin Credentials After running the seed script: - **Username**: `admin` - **Password**: `Admin@123` (or the value you set in .env) **⚠️ IMPORTANT**: Change these credentials immediately after first login! ## 📁 Project Structure ``` hls-tech/ ├── backend/ │ ├── models/ # Mongoose schemas │ ├── routes/ # API routes │ ├── middleware/ # Auth & validation │ ├── utils/ # Email service, helpers │ ├── scripts/ # Database seeding │ ├── server.js # Entry point │ └── package.json │ ├── frontend/ │ ├── src/ │ │ ├── components/ # Reusable components │ │ ├── pages/ # Page components │ │ ├── layouts/ # Layout components │ │ ├── context/ # React context (Auth) │ │ ├── utils/ # API utilities │ │ ├── App.jsx # Main app component │ │ └── main.jsx # Entry point │ ├── public/ │ ├── index.html │ └── package.json │ └── README.md ``` ## 🚀 Deployment ### Backend Deployment (Render/Railway/AWS) 1. **Create a MongoDB Atlas cluster** (if not using local) 2. **Set environment variables** on your hosting platform 3. **Deploy the backend**: ```bash cd backend npm install npm start ``` ### Frontend Deployment (Vercel/Netlify) 1. **Build the frontend**: ```bash cd frontend npm run build ``` 2. **Deploy the `dist` folder** to Vercel or Netlify 3. **Set environment variables**: - `VITE_API_URL` = Your backend API URL ### Recommended Hosting - **Frontend**: Vercel or Netlify - **Backend**: Render, Railway, or AWS EC2 - **Database**: MongoDB Atlas - **Domain**: hlstech.co.zm or hachitechsolutions.com ## 📧 Email Configuration For Gmail: 1. Enable 2-factor authentication 2. Generate an App Password 3. Use the App Password in `EMAIL_PASS` For other providers, adjust `EMAIL_HOST` and `EMAIL_PORT` accordingly. ## 🔒 Security Features - JWT-based authentication - Password hashing with bcrypt - Rate limiting on API endpoints - Helmet.js for HTTP headers security - CORS protection - Input validation and sanitization - Protected admin routes ## 🎨 Customization ### Brand Colors Edit `frontend/tailwind.config.js`: ```javascript colors: { primary: '#007BFF', // Main brand color secondary: '#0056b3', // Secondary color dark: '#000000', light: '#FFFFFF', } ``` ### Logo Replace the logo in: - `frontend/public/hls-logo.svg` - Update navbar component ## 📱 API Endpoints ### Public Routes - `GET /api/projects` - Get all projects - `GET /api/blogs` - Get published blogs - `GET /api/services` - Get all services - `GET /api/testimonials` - Get approved testimonials - `POST /api/contact` - Submit contact form - `POST /api/contact/newsletter` - Subscribe to newsletter ### Protected Routes (Admin) - `POST /api/admin/login` - Admin login - `GET /api/admin/me` - Get admin profile - `GET /api/analytics/dashboard` - Dashboard stats - Full CRUD on all resources ## 🧪 Testing ```bash # Backend cd backend npm test # Frontend cd frontend npm test ``` ## 📝 License This project is licensed under the MIT License. ## 👨‍💻 Developer **Luumuno Chibombya** Founder & CEO - HLS Tech (Hachi Tech Solutions) ## 🤝 Contributing Contributions, issues, and feature requests are welcome! ## 📞 Support For support, email [email protected] or contact through the website. --- **Built with ❤️ by HLS Tech - Innovating Technology, Empowering Solutions** # hachi-tech-homepage