Hiking-Logbook

Development Site Setup Guide

This guide explains how to set up, run, and develop the Hiking Logbook frontend application locally.

Overview

The frontend is a React.js application built with:

Prerequisites

Before setting up the development site, ensure you have:

Project Structure

frontend/
├── public/                 # Static assets
│   ├── index.html         # Main HTML template
│   ├── favicon.ico        # Site icon
│   └── manifest.json      # PWA manifest
├── src/                   # Source code
│   ├── components/        # Reusable React components
│   ├── pages/            # Page components
│   ├── hooks/            # Custom React hooks
│   ├── utils/            # Utility functions
│   ├── styles/           # CSS and styling
│   ├── App.js            # Main App component
│   └── index.js          # Application entry point
├── package.json           # Dependencies and scripts
├── tailwind.config.js     # Tailwind CSS configuration
└── postcss.config.js      # PostCSS configuration

Setup Instructions

1. Clone and Navigate

# Clone the repository (if not already done)
git clone <your-repo-url>
cd Hiking-Logbook/frontend

# Install dependencies
npm install

2. Environment Configuration

Create a .env.local file in the frontend directory:

# Frontend environment variables
REACT_APP_API_URL=http://localhost:3000
REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your_project_id

Note: Replace the Firebase values with your actual Firebase project credentials.

3. Verify Installation

# Check if everything is working
npm run lint
npm run format:check

Running the Development Site

Start Development Server

npm start

This will:

Available Scripts

# Development
npm start              # Start development server
npm run build          # Build for production
npm run eject          # Eject from Create React App (irreversible)

# Code Quality
npm run lint           # Check for linting issues
npm run lint:fix       # Fix linting issues automatically
npm run format         # Format code with Prettier
npm run format:check   # Check if code is formatted correctly

# Testing
npm test               # Run tests in watch mode
npm run test:coverage  # Run tests with coverage report

Development Workflow

1. Component Development

# Create a new component
mkdir src/components/NewComponent
touch src/components/NewComponent/NewComponent.js
touch src/components/NewComponent/NewComponent.test.js

2. Styling with Tailwind

// Example component with Tailwind classes
function Button({ children, onClick, variant = "primary" }) {
  const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors";
  const variantClasses = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

3. Testing Components

# Run tests for a specific file
npm test -- NewComponent.test.js

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode (default)
npm test

Configuration Files

Tailwind CSS Configuration

The tailwind.config.js file configures:

PostCSS Configuration

The postcss.config.js file sets up:

Development Features

Hot Reloading

Error Overlay

Source Maps

Debugging

Browser Developer Tools

VS Code Integration

Common Issues & Solutions

Port Already in Use

# Kill process on port 3000
npx kill-port 3000

# Or use a different port
PORT=3001 npm start

Dependencies Issues

# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Build Errors

# Check for syntax errors
npm run lint

# Verify environment variables
echo $REACT_APP_API_URL

Responsive Development

Mobile-First Approach

Browser Testing

Integration with Backend

API Calls

Authentication Flow

Next Steps

After setting up the development site:

  1. Read Development API Setup to understand the backend
  2. Read Development Database Setup for database configuration
  3. Follow Running Locally for complete development workflow
  4. Check API Specification for available endpoints

Getting Help

If you encounter issues:

  1. Check the browser console for errors
  2. Verify all environment variables are set
  3. Ensure backend is running (see Development API Setup)
  4. Check the Running Locally troubleshooting section
  5. Contact the development team

This guide covers Sprint 1 frontend setup. For additional features, check the main README.