From Idea to Launch: How I Built a Teacher's Dream Website using OpenAI's API and vanilla JS in one week!

As someone who wanted to create a website with a real-world purpose, I set out to make a website that could compose emails, draft report card comments, and generate lesson ideas for teachers. (But actually, as an ex-teacher and beginner dev, my ultimate goal was to create a larger project for my portfolio that I could use as a talking point during interviews.)

Aims:

My initial aim was to create a functional and relatively good-looking site by Friday. I also hoped that it would... massively take off and that hundreds of teachers worldwide would want to use it. However, I quickly learned that getting emotionally attached to 'likes' on social media could be counterproductive. I also found out that I could get blocked on Facebook for commenting on my own post!! 😂

What I learned technically:

Technically, I learned a lot throughout the process of creating my website. For example, I learned how to create a project in GitHub projects, use a Jira board, and use GitHub Desktop more confidently. I also learned how to use the smoothscroll function using JS, add forms on Netlify, and set up Google Analytics. Using Bootstrap enabled me to have a site that was mobile-responsive and pretty decent-looking from the start.

Using the OpenAI API:

I had used the OpenAI API in one of my previous projects (based on Tristan Wolff's tutorial for using a jQuery terminal to obtain input from a user, communicate the input to the API and process the response). However, this time I worked to have the user input be supplied through a form on the webpage, and to have the output appear on the page once the response was obtained from the API. I learned a little about prompt engineering to enable me to generate responses specifically for teachers. I also tried using the different models on offer from OpenAI, and although ada, curie and babbage models gave much faster responses than 'davinci', their responses were absolute rubbish! 😂

Overall

Despite the challenges I faced, I ultimately fulfilled all of my aims. However, I felt disappointed by the low amount of feedback I received from family/friends and teaching Facebook groups. Looking at the bigger picture, I hit all of my aims, and received good feedback from senior developers and peers. This experience has taught me to stay more focused on my goals and try not to be emotionally affected by social media 'likes'.

Overall, creating a functional website using OpenAI's API in a week is totally achievable, especially if you stay focused on your goals, plan carefully, and use the right tools (and start with some easy tutorials!). While the process may have its challenges, the technical and personal skills you learn along the way are invaluable. I can't wait to continue learning and growing my website (as I learn more backend tools) and potentially even fulfilling my dream to reach and help a wider audience of teachers worldwide!