Skip to content

Frontend Installation & Setup

Prerequisites

  • Node.js: 18+ (recommend 20 LTS)
  • npm: 9+
  • Git: Latest version
  • Expo CLI: For mobile development
  • Xcode (macOS): For iOS development
  • Android Studio: For Android development

Installation

1. Clone Repository

cd certana
cd frontend

2. Install Dependencies

npm install

3. Environment Setup

Create .env file:

REACT_APP_API_URL=http://localhost:8000/v1
REACT_APP_ENV=development
REACT_APP_LOG_LEVEL=debug
REACT_APP_SENTRY_DSN=  # Optional: Error tracking

4. Start Development Server

# Web development
npm start

# Or use Expo Go
expo start

# Then select:
# w - web
# a - android
# i - iOS

Project Structure

frontend/
├── src/
│   ├── screens/          # Screen components
│   ├── components/       # Reusable components
│   ├── navigation/       # Navigation setup
│   ├── contexts/         # React contexts
│   ├── api/              # API services
│   ├── types/            # TypeScript types
│   ├── utils/            # Utility functions
│   ├── constants/        # App constants
│   ├── assets/           # Images, icons
│   ├── App.tsx           # Root component
│   └── index.ts          # Entry point
├── android/              # Android native code
├── ios/                  # iOS native code
├── app.json              # Expo configuration
├── tsconfig.json         # TypeScript config
├── package.json          # Dependencies
└── .env                  # Environment variables

Running on Different Platforms

Web

npm start
# Opens http://localhost:8081

iOS

# First time setup
npm install
expo prebuild --clean

# Run on simulator
npm run ios

# Or
expo run:ios

Android

# First time setup
npm install
expo prebuild --clean

# Run on emulator
npm run android

# Or
expo run:android

Building for Production

Web Build

npm run build:web
# Output: dist/

# Serve locally
npx serve dist/

iOS Build

# Create production build
eas build --platform ios

# Or use Xcode directly
xcode-select --install
npm run ios:release

Android Build

# Create production APK
eas build --platform android

# Or build locally
npm run android:release

Dependencies Overview

Package Version Purpose
react-native 0.81.5 Core framework
expo ~54.0.20 Build & runtime
@react-navigation ^7.x Navigation
react-native-paper ^5.14.5 Material UI
axios ^1.12.2 HTTP client
typescript ~5.9.3 Type safety

Development Commands

# Install dependencies
npm install

# Start dev server
npm start

# Run tests
npm test

# Format code
npm run format

# Lint code
npm run lint

# Build for web
npm run build:web

# Build for iOS
npm run build:ios

# Build for Android
npm run build:android

# Clean and rebuild
npm run clean
npm install
npm start

Debugging

React DevTools

# Install React DevTools
npm install -D @react-devtools/core

# Use in browser
chrome://extensions -> React DevTools

Console Logging

console.log('Message', value);
console.debug('Debug info');
console.error('Error:', error);
console.warn('Warning');
console.table(array);

Debugger

// Add breakpoint
debugger;

// Open devtools
chrome://inspect

Testing

# Install testing libraries
npm install --save-dev @testing-library/react-native jest

# Run tests
npm test

# With coverage
npm test -- --coverage

# Watch mode
npm test -- --watch

Environment Variables

Development (.env)

REACT_APP_API_URL=http://localhost:8000/v1
REACT_APP_ENV=development
REACT_APP_LOG_LEVEL=debug

Production (.env.production)

REACT_APP_API_URL=https://api.yourdomain.com/v1
REACT_APP_ENV=production
REACT_APP_LOG_LEVEL=error
REACT_APP_SENTRY_DSN=https://...

Troubleshooting

Port Already in Use

# Kill process using port
lsof -i :8081
kill -9 <PID>

Clear Cache

# Clear Metro bundler cache
npm start -- --reset-cache

# Or
rm -rf node_modules
npm install
npm start

Dependency Issues

# Update to latest versions
npm update

# Check for vulnerabilities
npm audit
npm audit fix

Native Module Issues

# Rebuild native modules
expo prebuild --clean

# For iOS
cd ios && pod install && cd ..

# For Android
cd android && ./gradlew clean && cd ..

IDE Setup

VSCode Extensions

  • Expo Tools
  • React Native Tools
  • TypeScript Vue Plugin
  • ES7+ React/Redux/React-Native
  • Prettier Code Formatter

VSCode Settings

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Next Steps