Skip to main content

Getting Started - Web Application

Overview​

OX Agry's web application is built using Remix, a modern React-based framework that provides both client and server-side capabilities.

Prerequisites​

  • Node.js (version 18.0.0 or higher)
  • npm or yarn
  • Git
  • Code editor (VS Code recommended)

Tech Stack​

  • Framework: Remix
  • Language: TypeScript
  • Styling: Tailwind CSS
  • API: GraphQL with Apollo Client
  • Testing: Vitest + Testing Library

Initial Setup​

1. Clone Repository​

git clone https://github.com/ox-agry/webapp
cd webapp

2. Install Dependencies​

npm install

3. Environment Configuration​

# Copy environment file
cp .env.example .env

# Configure environment variables
GRAPHQL_API_URL=http://localhost:8000/graphql
SESSION_SECRET=your-secret-key

4. Start Development Server​

npm run dev

Project Structure​

app/
├── components/      # Reusable React components
├── routes/         # Application routes
├── styles/         # Global styles and Tailwind config
├── lib/            # Utilities and configuration
├── models/         # TypeScript types and interfaces
└── services/       # API and business logic services

Available Scripts​

{
  "scripts": {
    "dev": "remix dev",
    "build": "remix build",
    "start": "remix-serve build",
    "test": "vitest",
    "lint": "eslint --ext .ts,.tsx .",
    "type-check": "tsc --noEmit"
  }
}

Code Quality Tools​

ESLint Configuration​

// .eslintrc.js
module.exports = {
  extends: [
    '@remix-run/eslint-config',
    '@remix-run/eslint-config/node',
    '@remix-run/eslint-config/jest-testing-library',
  ],
  rules: {
    // Custom rules
  }
};

TypeScript Configuration​

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "CommonJS",
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

Next Steps​