Python/Svelte Project

This is a combined project for both my DWDD 3770 final and my OOP CS 1410 Final. I used Sveltekit to design my frontend UI and Python to create a custom CRUD API to store my characters. Im using KindeAuth for authenticating users and OPENAI API for my chatbot functionality.
Frontend Vercel Link
BackendVercel Link

Python Requirements Key

5 Classes

• Character Class – This is the base class for the rest of the character_role classes to inherit.

• Character Role Class – This is the class that defines the users character role.

• Style Class – This is the class that defines the characters style.

• Armor Class – This is the class that defines the armor the character wears.

• Weapon Class – This is the class that defines the characters weapon.

2 OOP topics from Module 1-6

• Inheritance – My character_role Classes inherit from my Character Class

• Reading a File

3 OOP topics from Module 7-12

• Type Hints

• Try Except

• Automated Tests

SVELTEKIT

Ignore Generate PDF Button, latest python code for the server isn't building with Vercel. This is only for my Python Final. Only works when the project is run locally.

Required Examples From Class Projects

These are examples of the concepts taught in class that I have implemented in my project

---

Introduction/Section 1 Assignments

• Component Example

  • AuthButton Component

• Dynamic Attribute

  ClassIcon Component, line 89

  <img class="w-full px-4" src={imageURL} alt={altText}>
  

• Styling

  • Typing Indicator

• Nested Component

  • CharacterCard Component

• HTML Tag Example

  ChatBot Example

  <div class="flex my-4">
      <Avatar class="h-12 shrink-0" src="/images/chat-bot.png" alt="Tutor" width="" />
      <div in:fly={{y:50, duration:1000}} class="assistant-chat mx-4">{@html chat.content}</div>
  </div>
  

  Reactivity

• State

  Create Class Page Example

  $: selectedGender = $characterStore.style?.gender as number;
  

• Deep State

  CreateStyle Page

    $: imageUrl = displayImage(selectedGender, $characterStore.style?.style, $characterStore.style?.color);

Props

• Declaring Props

  • Gender Component

• Passing Props

  • ClassIcon Component

  • Default Values

     let classSelect = ''
      
    function showClassSelect() {
        console.log("clicked")
        showOverlay = false
        classSelect = `You've selected ${classArray[id]}`;
    }
    

Logic

• If block

  • Home Page, line 49-72

• Else block

  • Home Page, line 74-86

• Each Block

  • Armor Example, line 83-105

  • Keyed Each Block

    Characters Example

        {#each characters as character (character)}
                        <div animate:flip={{duration:600}}>
                            <CharacterCard {character} on:delete={removeCharacter}/>
                        </div>
                    {/each}
    

  • Await Block

    async function getWoWClasses() {
    const classesResponse = await fetch('/api/wow/classes');
    return await classesResponse.json();
    }
    

---

Section 2: Events and Bindings Examples

(In addition to the events listed below for final requirements)

MouseEnter/MouseLeave Event

CreateWeapons Page

  <div class="m-2 h-20 w-20" role="button" tabindex="0" on:mouseenter={() => displayArmorStats(armor.id)}
    on:mouseleave={hideArmorStats}>
    <img class="h-20 w-20 object-contain" src={`/images/armor/armor-${armor.id}.jpg` alt="armor">
  </div>

ProgressBar Component

<ProgressBar height="h-2" bind:value={$progress} max={100} meter="bg-buttonText" track="bg-white"/>

Section 3: Lifecycle function and Writable Stores

2 Examples of Lifecycle functions

• Lifecycle Example 1
• Lifecycle Example 2

4 Examples of Writable Store

• User Store
• Character Info Store
• Learn More Store
• Progress Bar Store

Section 4: Motions, Transitions and Animations

Motion Example

• Progress Bar

Transition Example

• Transition

Animation Example

• Shuffle Button

Section 5: Connecting Kinde to OAuth providers

• OAuth

Section 5: Updated UI with Dynamic Route

• Dynamic Route

Additional Requirements Key From Final Description

3 Components

• AuthButton Component
• BackButton Component
• ContinueButton Component
• CharacterCard Component
• ChatBotComponent
• ClassIcon Component
• Gender Component
• HairSelection Component
• SubmitCharacterBtn Component
• NameCharacter Component
• ProgressBar Component
• SelectedArmor Component

5 Functional Routes

• Home Page
• Class Selection
• Style Selection
• Armor Selection
• Weapon Selection
• ChatBot
• Characters

More Events

• AuthButton Component
• BackButton Component
• ContinueButton Component
• Upon searching my code I have 31 examples total being used , I didn't want to list them all here and create a large section in my readme, but I can definitely show you them if these or my examples from section 2 don't suffice.

5 Examples (of many) of Data Bound to UI Elements

• ClassIcon Component
• Gender Component
• HairSelection Component
• ArmorStats Display

At least 1 Example of a Writable Store

• User Store
• Character Info Store
• Learn More Store
• Progress Bar Store

Connect to one OUTSIDE API

• WOW API
• OPENAI

Loading Function

• PageLoad

---

Running the Program

After cloning this repository, to run it locally you will need to run the following commands in the terminal.

Python (Backend)

• in a fresh terminal instance/window
• cd into repository directory
• cd into backend
• python -m venv .venv

  Windows

  \.venv\Scripts\activate
  

  Mac

  source .venv/bin/activate
  

• pip install -r requirements.txt
• Verify packages pip list
• when in backend directory, in your terminal run: fastapi dev main.py

Sveltekit (Frontend)

• open a new terminal window (you need two processes running for frontend and backend)
• cd into frontend folder in repository directory
• once in frontend folder run these following commands:

  npm install
  npm run dev
  

  Requirements to Run This Project

• node.js (version 18+)
• npm
• python 3.12
• pip