Skip to content
BranchesTags

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
backend
backend
 
 
frontend
frontend
 
 
screenshots
screenshots
 
 
.gitignore
.gitignore
 
 
License
License
 
 
README.md
README.md
 
 
package.json
package.json
 
 

Repository files navigation

TechMorph IoT



TechMorph IoT

Bangladesh's Premier IoT E-Commerce Platform

Next.js TypeScript Tailwind CSS Node.js PostgreSQL License: MIT

Connecting Ideas, Powering Innovation

Live Demo  ·  Backend API  ·  Report Bug

Overview

TechMorph IoT is a production-ready, full-stack IoT e-commerce platform built for the Bangladeshi maker and engineering community. It provides a seamless shopping experience for Arduino, ESP32, Raspberry Pi, sensors, and IoT kits through a cyberpunk-inspired dark interface.

The platform covers the complete e-commerce lifecycle — product browsing with advanced filters, cart and wishlist management, multi-payment checkout (bKash, Nagad, COD), Google OAuth, an AI-powered shopping assistant (TechBot), coupon system, admin dashboard, and a blog section integrated with Medium.

Screenshots

Home Page
Home Page 		Product Page
Product Detail
Cart
Cart & Checkout 		Admin Dashboard
Admin Dashboard
TechBot AI Chatbot
TechBot — AI Shopping Assistant (Groq / Llama 3)

Features

Customer Experience

  • Product Catalogue — 15+ IoT components with category, price, brand and stock filters
  • Smart Search — Real-time product search with instant results
  • Cart Management — localStorage-based cart, persistent across sessions, no backend required
  • Wishlist — Save favourite products
  • Checkout Flow — COD, bKash and Nagad payment simulation with full UX
  • Order Tracking — Order history with status timeline
  • Google OAuth — One-click Google sign-in via NextAuth.js
  • Demo Mode — Full site functionality without a running backend

TechBot — AI Shopping Assistant

  • Floating chat widget powered by Groq API (Llama 3 — Free)
  • Answers questions about products, prices, shipping, coupons and IoT topics
  • Responds in English, Bengali, or Banglish — auto-detects user language
  • Quick-question chips for common queries
  • Unread message notification badge
  • Full conversation context maintained per session

Admin Dashboard

  • Revenue, order, user and product statistics
  • Product and category CRUD management
  • Order management with status updates
  • Coupon creation and management

Additional

  • Dark / Light mode with CSS variable theming
  • Bangla / English language toggle (EN/BN)
  • Animated promotional ticker bar
  • Blog section linked directly to Medium posts
  • Professional cyberpunk SVG product illustrations (no broken images)
  • Fully responsive — mobile-first design

Tech Stack

Frontend

Technology Purpose
Next.js 14 (App Router) Framework, SSR, file-based routing
TypeScript Type safety across the entire frontend
Tailwind CSS Utility-first cyberpunk styling
Framer Motion Page transitions and micro-animations
NextAuth.js v4 Google OAuth integration
Context API Auth, cart, wishlist, theme, language
React Hot Toast Notification system
Groq API (Llama 3) AI chatbot — free tier

Backend

Technology Purpose
Node.js + Express.js REST API server
PostgreSQL Primary relational database
Prisma ORM Schema management, migrations, seeding
JSON Web Tokens Stateless authentication
bcryptjs Secure password hashing
express-rate-limit API rate protection

Infrastructure

Service Purpose
Vercel Frontend hosting and deployment
Render Backend API hosting
Neon Serverless PostgreSQL (free tier)

Project Structure

techmorph-iot/
├── frontend/
│   ├── app/
│   │   ├── (auth)/login/              # Login — demo + Google OAuth
│   │   ├── (auth)/register/           # Registration with validation
│   │   ├── api/auth/[...nextauth]/    # NextAuth Google provider
│   │   ├── api/chat/                  # TechBot AI endpoint (Groq)
│   │   ├── admin/                     # Admin dashboard
│   │   ├── blog/                      # Blog listing → Medium links
│   │   ├── cart/                      # Cart + coupon system
│   │   ├── checkout/                  # Multi-step checkout
│   │   ├── contact/                   # Contact + real social links
│   │   ├── orders/                    # Order tracking
│   │   ├── product/[slug]/            # Product detail
│   │   ├── profile/                   # User profile (demo-mode safe)
│   │   ├── shop/                      # Product catalogue + filters
│   │   ├── wishlist/
│   │   ├── globals.css                # Cyberpunk design tokens
│   │   ├── layout.tsx                 # Root layout with all providers
│   │   └── page.tsx
│   ├── components/
│   │   ├── layout/Navbar.tsx          # Promo ticker + nav + search modal
│   │   ├── layout/Footer.tsx
│   │   ├── providers/SessionProviderWrapper.tsx
│   │   ├── sections/HeroSection.tsx   # Canvas particle network hero
│   │   ├── sections/FeaturedProducts.tsx
│   │   ├── sections/Sections.tsx
│   │   └── ui/
│   │       ├── ChatBot.tsx            # TechBot floating chat widget
│   │       └── ProductCard.tsx
│   ├── context/
│   │   ├── AuthContext.tsx            # JWT auth + demo mode fallback
│   │   ├── CartContext.tsx            # localStorage-based cart
│   │   ├── WishlistContext.tsx
│   │   ├── ThemeContext.tsx           # CSS variable injection
│   │   └── LanguageContext.tsx
│   ├── lib/
│   │   ├── api.ts                     # Axios instance + all API functions
│   │   ├── mockData.ts                # Products, blog posts, testimonials
│   │   ├── translations.ts            # EN + BN string tables
│   │   └── utils.ts                   # Formatters, BD districts list
│   ├── public/products/               # Cyberpunk SVG product images
│   ├── scripts/download-images.js     # Optional: download Wikipedia images
│   └── types/index.ts
│
├── backend/
│   ├── src/
│   │   ├── controllers/               # auth, product, order, admin, cart
│   │   ├── middleware/auth.js         # JWT protect middleware
│   │   ├── routes/                    # All API route handlers
│   │   └── server.js
│   └── prisma/
│       ├── schema.prisma
│       └── seed.js
│
├── screenshots/                       # Project screenshots for README
├── .gitignore
├── LICENSE
└── README.md

Local Setup

Prerequisites

  • Node.js 18+
  • PostgreSQL (local or Neon free tier)
  • Git

1. Clone

git clone https://github.com/rafiul254/techmorph-iot.git
cd techmorph-iot

2. Backend

cd backend
npm install
cp .env.example .env
# Edit .env with your DATABASE_URL and JWT_SECRET
npx prisma migrate dev --name init
node prisma/seed.js
npm run dev

3. Frontend

cd ../frontend
npm install

Create frontend/.env.local:

NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXTAUTH_SECRET=any_random_string_here
NEXTAUTH_URL=http://localhost:3000
GROQ_API_KEY=gsk_your_key_from_console.groq.com

# Optional — Google OAuth
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
npm run dev
# Visit: http://localhost:3000

Demo Credentials

Admin: admin@techmorph.io / Admin@123
User:  demo@techmorph.io  / User@123

Coupons: WELCOME20 · FLAT100 · IOT2025

API Keys

Groq API — TechBot AI (Free)

  1. Sign up at console.groq.com
  2. Create API Key
  3. Add GROQ_API_KEY=gsk_... to frontend/.env.local

Google OAuth (Optional)

  1. console.cloud.google.com → New Project
  2. APIs & Services → OAuth consent → External → Create
  3. Credentials → OAuth 2.0 Client ID → Web app
  4. Redirect URI: http://localhost:3000/api/auth/callback/google
  5. Add Client ID and Secret to .env.local

Deployment

Frontend → Vercel

  • Import from GitHub on vercel.com
  • Root Directory: frontend
  • Add all .env.local variables in Vercel settings

Backend → Render

  • Root: backend | Build: npm install && npx prisma generate | Start: node src/server.js

Database → Neon

  • Free PostgreSQL at neon.tech → copy DATABASE_URL to Render + local .env

Development Challenges

Product Image Loading (Permanent Fix) All major electronics CDNs return HTTP 403 for server-side requests. The permanent solution was creating professional cyberpunk-styled SVG illustrations for all 15 products — stored locally in public/products/. No external dependencies, instant loading, accurate product representation.

Authentication Persistence After Logout refreshUser was clearing JWT tokens on any error including network timeouts, causing unexpected logouts. Fixed by only clearing on HTTP 401, and restoring user from localStorage immediately before the API response arrives.

Demo Mode Without Backend Built complete offline fallback — demo credentials checked client-side before any API call, cart uses localStorage exclusively, checkout generates local order numbers, and profile updates save to localStorage. The entire site is usable with the backend offline.

Cart P2003 Foreign Key Constraint The backend crashed when demo product IDs ("1", "2") were sent to a database using UUID primary keys. Resolved by moving cart entirely to localStorage and only sending to backend for real authenticated sessions with valid UUIDs.

Dark/Light Theme Toggle Hardcoded Tailwind color classes didn't respond to theme changes. Fixed by injecting CSS custom properties directly via JavaScript on every toggle and replacing hardcoded values with var(--bg-primary), var(--text-primary) throughout all components.

Next.js 14 App Router + NextAuth SessionProvider requires a client component wrapper in App Router. Created SessionProviderWrapper.tsx to bridge the server/client boundary without breaking SSR of the root layout.

AI Chatbot Multilingual Support The Groq Llama 3 model automatically detects the user's language and responds in English, Bengali, or Banglish. The system prompt includes the instruction: "Reply in the same language as the user."

Author

Rafiul Islam | IoT & Robotics Engineering Student - University of Frontier Technology, Bangladesh

GitHub LinkedIn YouTube Medium Portfolio

Licensed under MIT · Built with dedication by Rafiul Islam

If this project helped you, consider giving it a ⭐

About

A full-stack IoT e-commerce platform built for the Bangladeshi maker and engineering community.

techmorph-iot.vercel.app

Topics

chatbote-commerce-websiteengineeringexpressjsfullstack-developmentiotnodejspostgresqlprismatailwindcsstypescript

Resources

Readme
MIT license
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Contributors

Languages