IWHBYD

Built by: Bryant Gilgan

Click the following link to be redirected to the live version of the code!

IWHBYD

IWHBYD is Full Stack React Web Application that utilizes Node.js, Express.js, React, MongoDB, Mongoose, Tailwind CSS, and JavaScript that allows users to "Finish the Fight". Stand shoulder to should along side Master Chief and the other brave spartans of UNSC from the Halo Universe. Users will be able to pick specific characteristics for themselves or to create a new character and generate an image of their Spartan. Prove that soldiers and humanity aren't two different things, that soldiers aren't machines. Do you need a weapon...?

🔗 Associated Links:

Click the following link to be redirected to the Wireframe and Design Inspiration for this project! Whimsical

Click the following link to be redirected to the Trello Board to see the user stories implemented in this app! Trello

Click the following link to be redirected to the ERD Diagram to see the behind the scenes of data entities targeted! Whimsical

🥽 LOG IN/SIGN UP PAGE

Upon arriving at the HUD, the user may either log in if they're already enlisted, or get to your recruiter and sign up.

🪖 HOME PAGE

Upon loading into the home page, the user is thrust onto one of the many Halo rings and will be able to see everyone that is in the fight so far.

🦾 CREATE SPARTAN PAGE

Upon clicking the recruit button, the user will be able to fill out a new form that will influence the prompt for the spartan that they want to create.

🥷 SPARTAN GENERATED

Upon clicking the render button, the user will be able to see what image has been generated and finally realize the spartan that they can become.

⚙️ Technologies Used:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

🤖 The Code to Call the OpenAI

// Part of the controller function to call and retrive the data from OpenAI API
const data = JSON.stringify({
      prompt: prompt,
    });

    // Configure the Axios request
    const config = {
      method: "post",
      maxBodyLength: Infinity,
      url: "https://api.openai.com/v1/images/generations",
      headers: {
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
        "Content-Type": "application/json",
        // Add any additional headers if needed
      },
      data: data,
    };

This code block sets up an HTTP POST request using Axios to communicate with the OpenAI image generation API. It first converts a prompt into a JSON string and then configures the request with various parameters: it specifies the POST method, allows for an unlimited body length, and sets the endpoint URL for the API. The request headers include an authorization token (API key) for authentication and a content type indicating JSON format. Finally, the JSON string containing the prompt is included as the request body, ready to be sent to the API to generate an image based on the provided prompt.

Plans for the future:

I love the Halo lore, and it was my hope to share this with people that are familiar or might be new to it. This project was by far the toughest one that I have worked on, and I learned so much from it. React is an awesome framework and I look forward to building more projects in a MERN stack development. I will continue evolving this application to have more features and be able to develop more detailed phots. I also will provide more information in the application of the Halo Universe that influenced this project.

• ADD PHOTO UPLOAD TO INFLUENCE PHOTO GENERATION
• ADD INFORMATION ON HALO CHARACTERS
• ADD INFORMATION ON HALO WEAPONS
• ADD INFORMATION ON HALO CAMPAIGN MISSIONS
• ADD INFORMATION ON HALO EASTER EGGS AND SKULLS
• ADD INFORMATION ON HALO NOVELS THAT HAVE INFLUENCE THE CANON OF HALO
• ADD A DETAILS PAGE FOR USERS TO READ MORE AND COMMENT ON PHOTOS THAT HAVE BEEN GENERATED
• ADD PHOTO UPLOAD FOR STORING IMAGES TO DATABASE
• ADD SMALL CANVAS GAME FOR USER TO PLAY
• ADD MORE AUDIO I.E. GAME DIALOGUE, SOUND EFFECTS, MUSIC FROM GAMES