NexusWeb Service Platform

A high-performance React Hydrogen service company website built with modern web technologies and optimized for Shopify Oxygen hosting.

🚀 Features

• React Hydrogen Framework: Server-side rendering with React Server Components
• Shopify CMS Integration: Content management through Shopify metaobjects
• Modern UI/UX: Tailwind CSS with responsive design and animations
• Performance Optimized: Built for speed and SEO
• Modular Architecture: Reusable components and clean code structure

🛠️ Tech Stack

• Framework: React Hydrogen
• Styling: Tailwind CSS + Headless UI
• Icons: Heroicons
• CMS: Shopify (Metaobjects)
• Hosting: Shopify Oxygen
• Build Tool: Vite

📁 Project Structure

src/
├── components/           # Reusable UI components
│   ├── ServiceCard.client.jsx
│   ├── PortfolioGrid.client.jsx
│   ├── ContactForm.client.jsx
│   ├── Navbar.client.jsx
│   ├── Footer.server.jsx
│   └── Layout.server.jsx
├── sections/            # Page sections
│   ├── Hero.server.jsx
│   ├── ServicesSection.server.jsx
│   ├── PortfolioSection.server.jsx
│   └── ContactSection.server.jsx
├── routes/              # Page routes
│   └── index.server.jsx
├── lib/                 # Utilities and configurations
│   └── queries.js
└── styles/              # Global styles
    └── global.css

🚀 Getting Started

1. Clone the repository

   git clone <repository-url>
   cd hydrogen

2. Install dependencies

   npm install

3. Configure Shopify connection Update shopify.config.js with your store details:

   export default {
     storeDomain: 'your-store.myshopify.com',
     storefrontToken: 'your-storefront-token',
     storefrontApiVersion: '2023-07',
   };

4. Start development server

   npm run dev

5. Build for production

   npm run build

6. Deploy to Shopify Oxygen

   npm run deploy

🎨 Customization

Adding New Services

1. Update the service data in src/sections/ServicesSection.server.jsx
2. Or configure Shopify metaobjects and update the GraphQL queries

Modifying Styles

• Edit tailwind.config.js for theme customization
• Update src/styles/global.css for global styles
• Component-specific styles are in individual components

Adding New Sections

1. Create a new component in src/sections/
2. Import and add to src/routes/index.server.jsx

📊 Performance

This project is optimized for:

• Server-Side Rendering (SSR)
• Image optimization
• Code splitting
• Caching strategies
• SEO optimization

🔧 Configuration Files

• package.json - Dependencies and scripts
• shopify.config.js - Shopify connection settings
• tailwind.config.js - Tailwind CSS configuration
• vite.config.js - Build tool configuration

📝 Environment Variables

Create a .env file with:

PUBLIC_STOREFRONT_API_TOKEN=your_token_here
PUBLIC_SHOPIFY_ANALYTICS_TOKEN=your_analytics_token_here

🚀 Deployment

This project is designed to be deployed on Shopify Oxygen for optimal performance and integration with Shopify services.

📞 Support

For support and questions, please contact the development team or refer to the Shopify Hydrogen documentation.

---

Built with ❤️ using React Hydrogen