🚀 Tech Tips & Tricks Hub

A modern, full-stack platform for tech enthusiasts to share knowledge, connect, and grow together

🌐 Live Demo • 📖 Documentation • 🐛 Report Bug

✨ Features

🎯 Core Features

• 🔐 Secure Authentication - JWT-based authentication with role-based access control
• 💎 Premium Content - Subscription-based premium content access with payment integration
• 📝 Rich Content Creation - Advanced post editor with media support and syntax highlighting
• 💬 Real-time Chat - Direct messaging and group chats with typing indicators
• 🗳️ Interactive Voting - Upvote/downvote system with real-time updates
• 💳 Payment Integration - Secure payments via Aamarpay and Stripe
• 📊 Analytics Dashboard - Comprehensive user and content analytics

🎨 User Experience

• 📱 Responsive Design - Mobile-first approach with seamless cross-device experience
• 🌙 Dark Mode - Beautiful light/dark theme toggle
• 🔍 Advanced Search - Powerful search and filtering capabilities
• ⚡ Real-time Updates - Live notifications and content updates
• 🎭 Modern UI - Clean, intuitive interface built with NextUI components

👥 Social Features

• 💬 Chat System - Direct messages and group conversations
• 👤 User Profiles - Customizable profiles with activity tracking
• 🏆 Reputation System - Karma-based user reputation
• 📢 Community Groups - Create and join tech communities
• 🔔 Smart Notifications - Real-time alerts for interactions

🛠️ Tech Stack

Frontend

⚛️  React 18 + Next.js 14.2.4
🔷  TypeScript for type safety
🎨  Tailwind CSS + NextUI components
🔄  TanStack Query for state management
📡  Axios for API communication
🎭  Framer Motion for animations

Backend

🟢  Node.js + Express.js
🔷  TypeScript
🍃  MongoDB with Mongoose ODM
🔐  JWT Authentication
💳  Payment Gateway Integration
📧  Email Service Integration

Development Tools

📦  npm/yarn package management
🔧  ESLint + Prettier for code quality
🧪  Jest for testing
🐳  Docker for containerization
🚀  Vercel for deployment

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• MongoDB database
• Git

Installation

1. Clone the repository

   git clone https://github.com/wahid1099/tech-tips-frontend.git
   cd tech-tips-frontend

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Setup

   cp .env.example .env.local

   Configure your environment variables:

   NEXT_PUBLIC_API_URL=http://localhost:5000/api
   NEXT_PUBLIC_SOCKET_URL=http://localhost:5000
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
   NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Run the development server

   npm run dev
   # or
   yarn dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

src/
├── 📁 app/                    # Next.js 14 App Router
│   ├── 📁 (WithCommonLayout)/ # Layout groups
│   │   ├── 📁 chat/          # Chat pages
│   │   ├── 📁 profile/       # User profile pages
│   │   └── 📄 page.tsx       # Home page
│   └── 📄 layout.tsx         # Root layout
├── 📁 components/            # Reusable UI components
│   ├── 📁 chat/             # Chat-related components
│   ├── 📁 posts/            # Post-related components
│   ├── 📁 UI/               # General UI components
│   └── 📁 Form/             # Form components
├── 📁 context/              # React Context providers
├── 📁 hooks/                # Custom React hooks
├── 📁 services/             # API service functions
├── 📁 types/                # TypeScript type definitions
└── 📁 utils/                # Utility functions

🎯 Key Components

Chat System

• Real-time messaging with Socket.IO integration
• Group chat management with admin controls
• Typing indicators and read receipts
• File sharing capabilities

Content Management

• Rich text editor with markdown support
• Media upload with image optimization
• Tag system for content categorization
• Version control for post edits

User Management

• Role-based permissions (User, Premium, Admin)
• Profile customization with avatar upload
• Activity tracking and analytics
• Social features (follow/unfollow)

🔧 Configuration

Environment Variables

# API Configuration
NEXT_PUBLIC_API_URL=your_backend_url
NEXT_PUBLIC_SOCKET_URL=your_socket_url

# Payment Gateways
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
NEXT_PUBLIC_AAMARPAY_STORE_ID=your_aamarpay_id

# App Configuration
NEXT_PUBLIC_APP_URL=your_app_url
NEXT_PUBLIC_APP_NAME="Tech Tips Hub"

Customization

• Themes: Modify tailwind.config.js for custom styling
• Components: Extend NextUI theme in src/config/theme.ts
• API: Configure endpoints in src/config/api.ts

📱 Features Showcase

💬 Chat System

// Real-time messaging with typing indicators
const { sendMessage, typingUsers } = useChat();

// Group management
const { createGroup, addMembers } = useGroupChat();

🔐 Authentication

// Secure JWT-based auth
const { user, login, logout } = useAuth();

// Role-based access control
const { hasPermission } = usePermissions();

💳 Payment Integration

// Subscription management
const { subscribe, cancelSubscription } = useSubscription();

// Payment processing
const { processPayment } = usePayment();

🚀 Deployment

Vercel (Recommended)

npm run build
vercel --prod

Docker

docker build -t tech-tips-hub .
docker run -p 3000:3000 tech-tips-hub

Manual Deployment

npm run build
npm start

🧪 Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

📊 Performance

• Lighthouse Score: 95+ across all metrics
• Core Web Vitals: Optimized for excellent user experience
• Bundle Size: Optimized with code splitting and lazy loading
• SEO: Server-side rendering with Next.js

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

• Wahid - Full Stack Developer & Project Lead

🙏 Acknowledgments

• Next.js for the amazing React framework
• NextUI for beautiful UI components
• Tailwind CSS for utility-first styling
• Vercel for seamless deployment

📞 Support

• 📧 Email: support@techtipshub.com
• 💬 Discord: Join our community
• 🐛 Issues: GitHub Issues

---

Made with ❤️ by the Tech Tips Hub Team

⭐ Star this repo • 🐦 Follow us • 📧 Newsletter