Augustana Hub – Frontend

The frontend for Augustana Hub, a student discovery platform for Augustana Campus.
This React application allows users to register student profiles and browse other students using filters such as course, start year, and demographics.

This frontend connects to a Spring Boot + PostgreSQL REST API and features a modern, responsive design with University of Alberta brand colors and clean UI architecture.

---

🚀 Features (V1)

Pages

• Landing Page with full-screen hero carousel, "How It Works" guide, stats, and call-to-action
• Student Registration form with validation and success state
• Explore Students page with advanced filtering sidebar
• Student Detail page with comprehensive profile information

Functionality

• Student registration with required and optional fields
• Browse students in a modern card-based grid layout
• Filter students by:
  • First Name
  • Last Name
  • Course
  • Start Year
  • Country
  • Ethnicity
  • Gender
• Real-time filtering with URL query parameters
• Responsive design (mobile-first, desktop-optimized)
• Clean separation between UI and API logic

Design Features

• University of Alberta brand colors (Green: #275d38, Gold: #fecb00)
• Reusable UI components (Button, Input, Select, ImageCarousel)
• SVG icons throughout the interface
• Full-screen hero carousel with 12 campus images
• Gradient backgrounds and smooth transitions
• Sticky navigation header with Aughub logo
• Loading and error states
• Roboto font family (U of A brand font)

Note: Authentication is intentionally excluded in V1.

---

🧱 Tech Stack

• React 19 - UI library
• Vite - Build tool and dev server
• JavaScript (ES6+) - No TypeScript (backend is Spring Boot)
• Axios - HTTP client for API calls
• React Router - Client-side routing
• CSS - Custom design system with CSS variables
• Roboto Font - University of Alberta brand typography

---

📦 Project Structure

src/
 ├─ components/       # Reusable UI components
 │   ├─ Button.jsx          # Button component with variants
 │   ├─ Input.jsx           # Input field component
 │   ├─ Select.jsx          # Select dropdown component
 │   ├─ Navbar.jsx          # Navigation header with logo
 │   ├─ StudentCard.jsx     # Student card display
 │   ├─ FilterPanel.jsx     # Filter sidebar component
 │   └─ ImageCarousel.jsx   # Image carousel component
 ├─ pages/            # Route-level pages
 │   ├─ Home.jsx            # Landing page with hero, stats, CTA
 │   ├─ Register.jsx        # Student registration form
 │   ├─ Explore.jsx          # Student browsing with filters
 │   └─ StudentDetail.jsx   # Individual student profile
 ├─ services/         # API service layer
 │   └─ studentService.js   # Centralized API calls
 ├─ App.jsx           # Main app with routing
 ├─ App.css           # App-level styles
 ├─ index.css         # Global styles and design system
 └─ main.jsx          # Application entry point

public/
 └─ images/
    ├─ logo/               # Aughub logo
    │   └─ AugHub Logo.png
    └─ hero-carousel/      # Hero carousel images
       ├─ aug1.webp
       ├─ aug2.jpg
       └─ ... (12 images total)

---

🌐 Backend Integration

This frontend consumes the Augustana Hub Backend API:

• POST /api/students - Create a new student
• GET /api/students - Get all students (with optional query parameters)
• GET /api/students/{id} - Get student by ID

Filtering is implemented via query parameters, for example:

GET /api/students?course=Computer Science&startYear=2022&country=Canada

Expected API Response Format

The frontend expects the following data structure:

{
  id: number,              // Required (returned by backend)
  firstName: string,        // Required
  lastName: string,         // Required
  studentEmail: string,     // Required (or email)
  startYear: number,       // Required
  course: string,          // Required
  country: string,          // Optional
  ethnicity: string,        // Optional
  gender: string           // Optional
}

Note: The frontend sends studentEmail but your backend might use email. Adjust the field name in your backend DTO/Entity to match, or update the frontend service.

---

⚙️ Environment Variables

Create a .env file in the root directory:

VITE_API_BASE_URL=http://localhost:8080/api

Important:

• Vite requires the VITE_ prefix for environment variables
• Restart the dev server after creating/modifying .env
• The .env file is in .gitignore (already configured)

For Production/Other Environments

# Development
VITE_API_BASE_URL=http://localhost:8080/api

# Production (example)
# VITE_API_BASE_URL=https://api.yourapp.com/api

# Staging (example)
# VITE_API_BASE_URL=https://staging-api.yourapp.com/api

---

▶️ Running the Project Locally

1. Install dependencies

npm install

2. Create .env file

Create a .env file in the root directory with:

VITE_API_BASE_URL=http://localhost:8080/api

3. Start the dev server

npm run dev

The app will run at:

http://localhost:5173

---

🔒 Connecting to Spring Boot Backend

Step 1: Configure CORS in Spring Boot

The frontend runs on http://localhost:5173 (Vite default), so your Spring Boot backend must allow CORS requests from this origin.

Option A: Global CORS Configuration (Recommended)

Create a CorsConfig.java file in your Spring Boot project:

package com.augustana.hub.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Arrays;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        
        config.setAllowCredentials(true);
        
        config.setAllowedOrigins(Arrays.asList(
            "http://localhost:5173",  // Vite dev server
            "http://localhost:3000",  // Alternative React dev server
            "http://127.0.0.1:5173"    // Alternative localhost format
        ));
        
        config.setAllowedHeaders(Arrays.asList("*"));
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"));
        config.setExposedHeaders(Arrays.asList("Authorization", "Content-Type"));
        
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

Option B: Controller-Level CORS

Add @CrossOrigin annotation to your controller:

@RestController
@RequestMapping("/api/students")
@CrossOrigin(origins = "http://localhost:5173")
public class StudentController {
    // Your endpoints
}

Step 2: Test the Connection

1. Start Spring Boot Backend

   # In your Spring Boot project directory
   ./mvnw spring-boot:run
   # or
   mvn spring-boot:run

2. Start React Frontend

   # In the frontend directory
   npm run dev

3. Test in Browser

   • Open http://localhost:5173
   • Navigate to "Register" and try creating a student
   • Navigate to "Explore" to see all students
   • Click on a student card to view details

4. Check Browser Console

   • Open Developer Tools (F12)
   • Check Network tab for API calls
   • Check Console tab for any errors

---

🖼️ Hero Carousel Setup

The hero section features a full-screen image carousel. Images are located in public/images/hero-carousel/.

Current Images

The carousel uses 12 images:

• aug1.webp through aug12.jpg
• Located in /public/images/hero-carousel/

Customizing the Carousel

Edit src/pages/Home.jsx to modify the carousel:

<ImageCarousel
  images={[
    {
      src: '/images/hero-carousel/aug1.webp',
      alt: 'Augustana Campus - View 1'
    },
    // ... more images
  ]}
  autoSlideInterval={5000} // 5 seconds (set to 0 to disable)
  showArrows={false}        // Navigation arrows (hidden in hero)
/>

Carousel Features

• Auto-slide: Automatically advances every 5 seconds
• Dot indicators: Click dots to jump to specific image
• Smooth transitions: Fade effect between images
• Full-screen: Fills entire viewport height
• Responsive: Adapts to mobile and desktop screens

---

🐛 Troubleshooting

CORS Error

Error: Access to XMLHttpRequest at 'http://localhost:8080/api/students' from origin 'http://localhost:5173' has been blocked by CORS policy

Solution:

• Ensure CORS is configured in Spring Boot (see Backend Integration section)
• Verify the allowed origin matches exactly: http://localhost:5173
• Check that OPTIONS requests are allowed
• Restart both frontend and backend

404 Not Found

Error: GET http://localhost:8080/api/students 404

Solution:

• Verify backend is running on port 8080
• Check that your controller has @RequestMapping("/api/students")
• Test the endpoint directly with curl or Postman
• Verify the base URL in .env file

Network Error / Connection Refused

Error: Network Error or ERR_CONNECTION_REFUSED

Solution:

• Ensure Spring Boot backend is running
• Check if backend is on a different port (update .env if needed)
• Verify firewall isn't blocking the connection
• Check backend logs for errors

Environment Variable Not Loading

Error: API calls going to wrong URL

Solution:

• Ensure .env file is in the project root (not in src/)
• Restart the Vite dev server after creating/modifying .env
• Verify variable name starts with VITE_
• Check .env file syntax (no spaces around =)

Empty Profile or Wrong Data Display

Solution:

• Check browser console for API response structure
• Ensure backend returns fields matching frontend expectations
• The frontend handles array responses automatically
• Verify field names match (e.g., studentEmail vs email)

---

🎨 Design System

University of Alberta Colors

• Primary Green: #275d38 - Used for buttons, links, accents
• Gold: #fecb00 - Used for highlights, step numbers, active indicators
• Green Shades: Lighter/darker variants for gradients and hover states

Typography

• Font Family: Roboto (University of Alberta brand font)
• Font Weights: 300, 400, 500, 600, 700

Components

All components use the U of A color scheme and are fully responsive.

---

🧭 Roadmap (V2)

• Authentication (JWT-based)
• Profile ownership and editing
• Admin moderation
• Advanced search & sorting
• Profile images
• Analytics and insights

---

📄 License

MIT — free to use and modify.

---

👤 Author

Chisom (Jason) Chiobi
Full-stack developer
Augustana Campus, University of Alberta