Build an idea generator from scratch, part 1: Project setup with Github and dotenv [Video]

So as I was finishing up teaching my web development class last year, I really wanted to give my students something to help them continue growing and learning. I decided to build an idea generator with HTML, CSS, and JavaScript using the raindrop.io API, and now, I’m finally getting around to posting the process recordings. Woohoo! I’ll be posting a new recording each week.

In this first part of the tutorial, we'll set up a Github repository, get our template code set up, and install dotenv, a library which will help us make an authenticated call to the API securely. You'll also see your first introduction to Git Flow. I use Tower to make things a little easier, but you can use any method of interacting with git you like. This would be a great intermediate JavaScript challenge for someone looking to practice ES6 syntax!

This video covers:

• How to set up a new repository in Github using a template
• How to clone a remote Github repository to your computer
• How to use Git Flow to create a feature branch
• How to make an authenticated call to an API using JavaScript
• How to use dotenv to store access tokens and other sensitive information in your app without committing it to your codebase

... and so much more!

The final product

In this series, we’ll be working toward this idea generator as our final product.

Code links

Follow along by cloning or forking the main branch here: https://github.com/ProfessorKolodziej/idea-generator

You can also start on your own project by using my Student Site Boilerplate template: https://github.com/ProfessorKolodziej/student-site-boilerplate/

Catch the new video over here. Happy coding!

I'm always happy to connect!

🐰 @ashleykolodziej on Twitter
🐰 Subscribe to Professor K Explains on YouTube