awe-leadlandia

LeadLandia

A magical or exciting place where leads are generated. —ChatGPT, 2023

Project Setup

LeadLandia will serve up to three pages:

1. Character Creator - page includes a form for lead-gen information to be input, and a 3D view showing the Prospect Pal generated from their responses. Designed for use on a tablet, tested on an iPad mini 6.
2. LeadLandia Viewer - page is entirely a 3D view showing a selection of Prospect Pals stored in a database. Updates automatically when a new Pal is created. To be shown on a large TV screen.
3. TBD Trading Card Deck - page shows a Prospect Pal from the database based on the URL it’s accessed from, in a trading card format. May also contain functionality to view other cards in the deck.

Package Dependencies

• LeadLandia uses Vite for bundling and Vercel for hosting.
• Three.js is used for importing and rendering 3D models (Prospect Pals)
• lil.gui is used to interactively adjust parameters in the 3D scene during development.
• GSAP will potentially be used for animation but is not yet installed.
• Anime.js will be used for animation.

How to run LeadLandia locally

We’ll go through each step in detail so you can easily follow along. You’ll need to run a couple of commands using the command prompt or terminal, but don’t worry, we’ll guide you through the process. Additionally, we’ll cover how to use GitHub Desktop to clone the repository.

Prerequisites

Before we start, make sure you have the following software installed on your computer:

1. Node.js: Download and install the latest LTS (Long Term Support) version of Node.js from https://nodejs.org/en/download/.
2. Git: Download and install Git from https://git-scm.com/downloads (only required if you don’t want to use GitHub Desktop).
3. GitHub Desktop (optional): Download and install GitHub Desktop from https://desktop.github.com/.

Step-by-Step Guide

Step 1: Clone the Repository

Option 1: Using the Command Prompt or Terminal

1. First, open the command prompt on Windows or the terminal on macOS/Linux.

2. Navigate to the folder where you’d like to store the project. For example, you can use the following command to navigate to your “Documents” folder: cd Documents

3. Now, clone the repository using the following command: git clone git@github.com:ustwo/awe-leadlandia.git

4. Navigate to the newly created project folder using the cd command.

Option 2: Using GitHub Desktop

1. Open GitHub Desktop and sign in with your GitHub account.
2. Click on the File menu, then select Clone repository.
3. In the “Clone a Repository” window, go to the “URL” tab.
4. Enter the repository URL in the “Repository URL” field, and choose the local path where you’d like to save the project.
5. Click on the Clone button to clone the repository.

After cloning the repository, GitHub Desktop will open the project folder in your file explorer.

Step 2: Install Dependencies

1. Open the command prompt on Windows or the terminal on macOS/Linux.

2. Navigate to the project folder using the cd command. Replace path/to/project with the actual path to your project folder. cd path/to/project (keep in mind that there are a few projects withtin the same repo, so make sure you are in the folder of the part you want to test)

3. Now that you’ve navigated to the project, run the following command to install its dependencies:

npm install

This command will install all the necessary packages for the project. It might take a few minutes.

Step 3: Start the Development Server

To start the development server, run the following command:

npm run dev

After running this command, you should see a message with the URL to access your project locally, usually something like http://localhost:3000.

Step 4: Open the Project in Your Web Browser

Open your preferred web browser (e.g., Google Chrome, Mozilla Firefox, or Safari). Type or click in the URL provided in the previous step.