This repository contains my progression through Missions 0 to 5, each representing a distinct challenge in full-stack development, system design, and problem-solving.

_Created a page according to the wireframe in our Project Brief. Making it responsive on mobile screens.

For mission 0 I was instructed to build a responsive page using a wireframe reference for Marketing Association NZ

• React

• Fully responsive layout
• Mobile, Tablet, Multiple screen layouts
• Auto adjust Service Library
• Auto adjust search bar
• Absolute Zero Overflow

Desktop:

• 720p, 1080p, 1440p compatible
• Clean layout with soft keyframe animation on load
• Auto adjusting grid and size for Service Library, resulting in a cleaner user experience

Tablet & Smartphone:

• Compatible with all Tablet & Smartphone sizes
• Hamburger menu implemented
• Cleaner stacked search bar
• Auto adjusted grid and size for Service Library, resulting in a cleaner user experience

_A full-stack application that analyzes vehicle images using Azure Custom Vision and provides insurance package suggestions based on predicted vehicle attributes. Built with React (frontend) and Express (backend).

mission-1/ ├── Turners-VIRT/ → Frontend (React + CSS Modules) ├── VIRT-Backend/ → Backend (Express + Azure integration) ├── .gitignore
├── README.md

• Upload vehicle images directly from the frontend
• Sends image data to the backend using arrayBuffer
• Uses Azure Custom Vision to predict vehicle attributes
• Displays the top 4 predicted tags with confidence scores
• Dynamically renders an insurance premium package image (e.g., SUV, Sedan, Truck)
• Site functionality to have a stronger feel of the prototype

• React (Vite)
• CSS Modules
• File Upload + Image Preview

• Node.js
• Express
• Azure Custom Vision API
• dotenv

1. User uploads a vehicle image from the frontend.
2. The image is converted to binary (arrayBuffer) and sent to the backend.
3. The backend forwards it to Azure Custom Vision.
4. Azure returns predicted tags with confidence levels.
5. Frontend displays a related Insurance Premium image and top 4 tags.

_# Insurance Quote Web App

This web application provides users with an interactive interface to calculate car insurance quotes using four backend APIs.

• API 1 – Car Value Calculation
  Calculates the estimated car value from the provided model and year using a custom logic based on character positions.

• API 2 – Risk Rating Analysis
  Accepts a description of a user’s past claim history and assigns a risk rating from 1 to 5.

• API 3 – Quote Calculation
  Computes both yearly and monthly premiums using the car value API 1 and risk rating API 2. Includes validation for numeric and integer inputs.

• API 4 – Discount Rate
  Applies a discount to the quote based on the user's age and driving experience.

_# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

Designed by Kerehama, This interview chatbot is designed to simulate a job interview experience. It guides users through various stages of a mock interview, starting with initial questions, proceeding to follow-up questions, and culminating in constructive feedback on their performance. The chatbot uses Google's Gemini AI to generate natural and relevant interview questions and responses, making the experience dynamic and interactive. It keeps track of the conversation history and the current interview stage to ensure a coherent and structured interview process.

_# Turners Car Insurance Recommendation App

This project is a full-stack application that uses generative AI to guide users through selecting the most appropriate car insurance policy based on their vehicle. Users interact with an AI consultant named Tina, who follows strict rules and asks questions one at a time to determine whether the user qualifies for Mechanical Breakdown Insurance (MBI), Comprehensive Insurance, or Third Party Insurance.

The frontend is built with React (Vite), and the backend is powered by Node.js and Express. Google’s Gemini 1.5 Flash model is used for the AI logic. The application is containerized using Docker and deployed using Kubernetes with Ingress routing.

Tina is governed by a system prompt and enforced rules. She must ask for permission before any personal questions, cannot ask the user which plan they want, and must recommend one based only on the vehicle data. MBI is excluded for trucks or racing cars, Comprehensive is allowed only if the vehicle is under 10 years old, and Third Party is always valid. At the end of the process, Tina instructs the user to click a link to Turners and sign up for the recommended policy.

Gemini_KEY=your_api_key_here
PORT=3001

docker build -t insurance-app .
docker run -p 3001:3001 insurance-app

_# TradeMe-like Auction Platform

0238b0b (Github Readme)

This is a full-stack auction platform application that mimics TradeMe's functionality. The application is built using React for the frontend, Node.js/Express for the backend, and MongoDB for the database, with MinIO for object storage, all containerized using Docker.

• Modern User Interface

  • Clean and responsive design
  • Intuitive navigation with header and footer components
  • TradeMe-inspired layout and styling

• Home Page

  • Featured auctions carousel
  • Quick access to popular categories
  • Latest listings showcase

• Marketplace

  • Advanced search functionality
    • Search by title
    • Search by description
    • Category filtering
    • Condition filtering
    • Location-based filtering
  • Real-time search results
  • Item cards display with essential information

• Product Details

  • Detailed item information
  • Image galleries
  • Auction status and timer
  • Reserve price indicators
  • Location information

• Watchlist System

  • Add/remove items from watchlist
  • Track favorite items
  • Quick access to watched items

• Category Navigation

  • Organized category filtering
  • Easy browse by category

• Compare Feature

  • Side-by-side item comparison
  • Multiple item selection
  • Key features comparison

• RESTful API

  • Secure endpoints for all operations
  • JSON response format
  • Error handling and validation
  • Advanced endpoints for item comparison
  • Random item selection by field
  • User profile management
  • Health check endpoints

• Database Integration

  • MongoDB integration with health checks
  • Efficient data querying
  • Data persistence
  • Collection management for items and users
  • Automated data seeding for development
  • User and item collections management

• Search Functionality

  • Advanced query processing
  • Multiple search criteria support
  • Efficient search algorithms
  • Field-specific random item selection
  • Category-based filtering

• Docker Integration

  • Containerized application components
  • Easy deployment and scaling
  • Health check implementation
  • Service dependency management
  • Services include:
    • Frontend (Port 8080)
    • Backend (Port 4000)
    • MongoDB (Port 27017)
    • Mongo Express (Port 8081)
    • MinIO (Ports 9000, 9001)
    • Auto Database Seeder
    • MinIO Bucket Initializer

• File Storage

  • MinIO integration for object storage
  • Automated image upload system
  • Public bucket configuration
  • Efficient image serving
  • Web console access (Port 9001)
  • Automated bucket initialization

• Environment Configuration

  • Separate environment files for each service
  • Secure configuration management
  • Environment-specific settings
  • Required environment validation

• Frontend:

  • React
  • Vite
  • CSS Modules
  • Nginx (for production serving)

• Backend:

  • Node.js
  • Express
  • MongoDB Node Driver
  • CORS support
  • Morgan for logging

• Database:

  • MongoDB
  • Mongo Express (for database management)

• Storage:

  • MinIO Object Storage
  • MinIO Client (mc)

• DevOps:

  • Docker
  • Docker Compose
  • Environment configuration
  • Health monitoring

• Docker Desktop (with Docker Engine and Docker Compose)
• Node.js v18+ (for local development)
• Git

1. Clone the repository:

   git clone https://github.com/SethSamuelCode/MissionReadyLvl5-mission5-P2
   cd MissionReadyLvl5-mission5-P2

2. Set up environment files:

   # Backend environment configuration
   cp ./backend/.env.example ./backend/.env
   
   # MongoDB environment configuration
   cp ./mongoDB/.env.example ./mongoDB/.env
   
   # MinIO environment configuration
   cp ./minio/.env.example ./minio/.env

3. Configure environment variables:

   • Update ./backend/.env with your backend configuration
   • Update ./mongoDB/.env with your MongoDB credentials
   • Update ./minio/.env with your MinIO settings

4. Build and start the application:

   # Build all containers and start the stack
   docker compose up --build
   
   # Or run in detached mode
   docker compose up --build -d

5. First-time setup will:

   • Build all Docker images
   • Initialize MongoDB with sample data
   • Create MinIO buckets and upload sample images
   • Start all services with health checks

# Stop the application
docker compose down

# View logs
docker compose logs -f

# View specific service logs
docker compose logs -f backend
docker compose logs -f frontend

# Rebuild specific service
docker compose up --build backend

# Remove all containers and volumes
docker compose down -v

• Frontend Application: http://localhost:8080
• Backend API: http://localhost:4000
• Database Admin Interface: http://localhost:8081
• MinIO Console: http://localhost:9001
• MinIO API: http://localhost:9000

1. If services fail to start:

   # Stop all services and remove volumes
   docker compose down -v
   
   # Rebuild and start
   docker compose up --build

2. If database seeding fails:

   # Restart the seeder service
   docker compose restart seed_db

3. If MinIO buckets aren't created:

   # Restart the createbuckets service
   docker compose restart createbuckets

├── frontend/                        # React frontend application
│   ├── src/                        # Source code directory
│   │   ├── components/             # Reusable UI components
│   │   ├── pages/                  # Page components
│   │   └── assets/                 # Static assets
│   └── Dockerfile                  # Frontend container configuration
├── backend/                        # Node.js backend application
│   ├── controllers/                # Request handlers
│   ├── models/                     # Database models
│   ├── routes/                     # API routes
│   └── Dockerfile                  # Backend container configuration
├── mongoDB/                        # Database configuration and seeding
│   ├── SampleAuctionData.json     # Sample auction items data
│   └── mockUserData.json          # Sample user data
├── minio/                          # MinIO object storage configuration
│   ├── entrypoint.sh              # MinIO initialization script
│   ├── setBucketOpen.sh           # Bucket policy configuration
│   └── Dockerfile                  # MinIO container configuration
├── autoDbSeeder/                   # Automated database seeding
│   ├── autoSeed.js                # Seeding script
│   └── Dockerfile                  # Seeder container configuration
├── images/                         # Sample images for seeding
└── docker-compose.yaml             # Container orchestration

• CORS configuration for API security
• Environment variable management
• Request size limitations
• Origin validation
• Health check implementation
• Service dependency management
• Required environment validation

• The application uses a modular architecture for easy maintenance and scaling
• Components are designed to be reusable and maintainable
• Built with best practices for both frontend and backend development
• Includes data seeding capabilities for development and testing
• Automated initialization of storage buckets and database
• Health monitoring for critical services

• Cess
  • Compare page
• Kerry
  • Home page
  • Marketplace page
• Seth
  • Item page
  • DevOps
• Valentine <<<<<<< HEAD
  • Watchlist page =======
  • Watchlist page

0238b0b (Github Readme)