AI-Website

A Grok-powered AI website developed using React.js.

Status

Prototype — front-end focused React app with Landing, Pricing, and Chat pages.

Quick Start

1. Copy environment template: cp .env.local.example .env.local and add your keys.
2. Install dependencies: npm install
3. Run dev server: npm run dev
4. Build production bundle: npm run build
5. Lint: npm run lint
6. Run tests: npm run test

To run a single test file (example):

npm run test -- src/components/Chat.test

Environment variables

See .env.local.example. Add your Grok API key to .env.local:

REACT_APP_GROK_API_KEY=your_key_here
REACT_APP_GROK_API_URL=https://api.grok.com/v1

Keep secrets out of Git. For production, store keys in a secure server-side secret store or add a backend proxy to avoid exposing keys in client bundles.

Architecture (high level)

• SPA built with React + React Router
• Pages: / (Landing), /pricing (Pricing), /chat (Chat)
• Core folders:
  • src/components/ – React components (Landing, Pricing, Chat, MessageInput, ChatMessage, Navigation)
  • src/services/ – External integrations (grok.service.js)
  • src/hooks/ – Reusable hooks (useChat.js)
  • public/ – Static HTML and assets

Testing & Linting

• Tests run with Vitest (npm run test).
• Lint with ESLint (npm run lint).
• Place tests next to components (e.g., src/components/Chat.test.jsx).

Copilot / Automation

See .github/copilot-instructions.md for guidance aimed at Copilot sessions and future contributors.

Contributing

Small PRs please. Describe the change, include tests for logic, and run npm run lint and npm run test before opening a PR.

License

This repository includes a LICENSE file; follow its terms.

Screenshots / Demo

Add screenshots or a demo link here when available.