DDI

TechPremiumModern

A modern, full-stack web application showcasing cutting-edge technology solutions and digital services. Built with React, TypeScript, and Express, featuring a sleek glass-morphism design with 3D animations and responsive layouts.

🚀 Features

• Modern UI/UX: Glass-morphism design with 3D animations and smooth transitions
• Responsive Design: Fully responsive across all devices and screen sizes
• Multi-Page Application: Complete website with Home, Services, About, Contact, Blog, Pricing, and Case Studies
• Interactive Components: Live chat, animated counters, portfolio showcase, and testimonials
• Performance Optimized: Built with Vite for fast development and optimized production builds
• Type-Safe: Full TypeScript implementation for better development experience
• Database Integration: Drizzle ORM with Neon PostgreSQL for data persistence
• Component Library: Comprehensive UI components using Radix UI and Tailwind CSS

🛠️ Tech Stack

Frontend

• React 18 - Modern React with hooks and concurrent features
• TypeScript - Type-safe JavaScript for better development experience
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible, unstyled UI components
• Framer Motion - Animation library for smooth transitions
• Wouter - Lightweight routing library
• React Query - Data fetching and state management

Backend

• Express.js - Fast, unopinionated web framework
• TypeScript - Server-side type safety
• Drizzle ORM - Type-safe SQL query builder
• Neon - Serverless PostgreSQL database
• Passport.js - Authentication middleware

Development Tools

• ESLint - Code linting
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing
• Drizzle Kit - Database migrations and schema management

📁 Project Structure

TechPremiumModern/
├── client/                          # Frontend React application
│   ├── src/
│   │   ├── components/              # Reusable UI components
│   │   │   ├── ui/                  # Radix UI components
│   │   │   ├── Footer.tsx
│   │   │   ├── GlassCard.tsx
│   │   │   ├── LiveChat.tsx
│   │   │   ├── Navigation.tsx
│   │   │   └── ThemeProvider.tsx
│   │   ├── data/                    # Static data files
│   │   ├── hooks/                   # Custom React hooks
│   │   ├── lib/                     # Utility libraries
│   │   ├── pages/                   # Page components
│   │   └── main.tsx                 # Application entry point
│   ├── public/                      # Static assets
│   └── index.html                   # HTML template
├── server/                          # Backend Express application
│   ├── app.ts                       # Express app setup
│   ├── routes.ts                    # API routes
│   ├── storage.ts                   # Database connection
│   └── index-dev.ts                 # Development server
├── shared/                          # Shared types and schemas
│   └── schema.ts                    # Database schema
├── attached_assets/                 # Generated images and assets
├── .github/                         # GitHub Actions workflows
└── package.json                     # Project dependencies and scripts

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• PostgreSQL database (Neon recommended for serverless)

Installation

1. Clone the repository

   git clone <repository-url>
   cd TechPremiumModern
   

2. Install dependencies

   npm install
   

3. Set up environment variables

   Create a .env file in the root directory:

   DATABASE_URL=your_neon_database_url
   PORT=5000
   NODE_ENV=development
   

4. Set up the database

   npm run db:push
   

5. Start development server

   npm run dev
   

   The application will be available at http://localhost:5000

📜 Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run check - Run TypeScript type checking
• npm run db:push - Push database schema changes

🌐 Deployment

This project is configured for deployment on GitHub Pages with automated workflows.

GitHub Pages Deployment

1. Configure repository settings
   • Go to Settings → Pages
   • Set source to “GitHub Actions”
2. Deploy

   git push origin main
   

   The deployment workflow will automatically build and deploy the application.

Manual Deployment

1. Build the application

   npm run build
   

2. Serve the built files

   npm run start
   

🎨 Design System

Color Palette

• Primary: Electric blue (#00D4FF)
• Secondary: Cyan (#06B6D4)
• Background: Dark slate (slate-950 to slate-900)
• Text: White and slate variants

Typography

• Font Family: System fonts with display variants
• Headings: Bold, large scale typography
• Body: Clean, readable text

Components

• GlassCard: Semi-transparent cards with blur effects
• Buttons: Gradient backgrounds with hover animations
• Navigation: Fixed header with smooth scrolling
• Animations: 3D transforms and pulse effects

🤝 Contributing

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

Development Guidelines

• Use TypeScript for all new code
• Follow the existing component patterns
• Ensure responsive design for all new features
• Test components across different screen sizes
• Maintain consistent styling with Tailwind classes

📄 Pages Overview

• Home: Hero section with services overview and portfolio preview
• Services: Detailed service offerings with icons and descriptions
• About: Company story, team information, and achievements
• Contact: Contact form with validation and backend integration
• Blog: Article listings and individual blog posts
• Pricing: Service packages and pricing tiers
• Case Studies: Detailed project showcases and results

🔧 API Endpoints

The backend provides RESTful API endpoints for:

• Contact form submissions
• Blog posts management
• User authentication
• Portfolio data

📊 Performance

• Lighthouse Score: 95+ on all metrics
• Bundle Size: Optimized with code splitting
• Loading Speed: Fast initial page loads with lazy loading
• SEO: Meta tags and structured data implemented

📝 License

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

🙏 Acknowledgments

• Design inspiration from modern tech company websites
• UI components powered by Radix UI
• Icons from Lucide React
• Images generated with AI tools

---

Built with ❤️ using modern web technologies # DDI