Fun Star Wars Code Challenge

A friend of mine sent me a message last night showing me a code challenge for a job application/interview for a position that he's trying for at his current company. It involved Star Wars and using a JavaScript framework, so needing the practice, I thought, "I can do this and it'll be fun". So I did. You can find the challenge requirements and my solution code on my GitHub page (the requirements are in the Readme if you want to give the challenge a go yourself). The result of my efforts is visible here: ​https://thedevbc.github.io/starwarscodechallenge/. Let me know if you think I fully met the requirements.

---

I chose to use Angular partly because that's what I know right now, and I didn't want to take a lot of time learning the basics of something else. I also wanted more practice with Angular and learn some more of it's features/capabilities and things that I usually don't mess with, one being Angular Material. For work, I build components in Angular, but we have our own custom theme, so I'd never played around with Angular Material much. This seemed like the perfect opportunity.

What I Learned

Here's some thoughts about my experience of this exercise:

1. Angular CLI makes getting an app up and running pretty quick and easy.
2. NPM (Node Package Manager) makes adding other people's code to your project (and managing that code) a breeze. Type a one line command into terminal, and oila! you have what you need. In this case, I just followed the Angular Material guide to add Material Design components and theme to my project. Once an app is created, and you add some packages, npm will make sure you have dependencies by simply running 'npm install' in the app's main folder. So if you download the source code to Angular app, run 'npm install' in the respective folder, and it will make sure its dependencies are there for you to work with when developing. (Note: learn the difference between 'npm install' and 'npm update', and how package.json works. If you're not careful running npm commands can mess things up.)
3. The first issue I had was getting things centered on the page. The horizontal centering wasn't too big of a deal, but I had to use some Google Fu to get some guidance for the vertical centering. I decided to use Flex layout. My favorite guide on flex is https://css-tricks.com/snippets/css/a-guide-to-flexbox/. That's a good rundown of what you need to know when laying things out with flexbox. If you want something even 'better' than flexbox, learn CSS Grid layout. Both are great for responsive design, the difference is flexbox works in one-dimension (horizontal/vertical) at a time, while Grid allows you to work with both dimensions (to do this with flexbox involves nesting elements).
4. Angular Production build - I hadn't deployed an Angular app before, so this was a new process for me. Angular CLI is helpful, and angular.io has the guides you need.
5. Publishing to GitHub Pages - the deployment guide at angular.io includes a section on deploying to GitHub pages, which again, Angular CLI to the rescue!
6. Visual Studio Code is awesome! I love working in VS Code (or just Code to many).
   
   1. It has a built in terminal feature that makes using NPM and Angular CLI quick and easily accessible.
      
   2. It integrates with Git, so putting the code on GitHub was a breeze (again, Angular CLI helped too, when I created the app I noticed a message about initializing git). I just added a new repository to my account using the GitHub website and GitHub provided a couple of commands to run in my terminal to upload my code to the repository (after you create a repo, there's a section called "...or push an existing repository from the command line" that has the info).
   3. There are a ton of helpful extensions for Code. (Maybe I'll list those another time, or just search for 'best vs code extensions'.
7. I like Angular's compartmentalization. I like how my html, css, and javascript/typescript are in separate files instead of all together in one js file. Eventually it all ends up in a js file, but for development I like this separation of concerns. Maybe I'm doing React wrong, but my experience with a React component is that it's all together, which was hard to get used to after working with Angular.
8. Angular Material - I need more time working with it. This project required very little use of it. I need to figure out how to better use the components and add colors. One addition I might work on is adding a field and and Add button to add movies to the list. Whatever your opinions are of Material Design, it's a clean, modern look, which seems to be preferable at the moment. Using a library like this is good for a consistent look throughout your app.

Have Fun!

It was a quick little fun project. It took me about 2 hours to complete (not including writing this post about it). If you have questions or feedback, let me know. I'm happy to help. This is a great way to get some practice with the JavaScript framework of your choice. In fact, you could do something with a Harry Potter theme if that's your thing! (Or Marvel movies!)

Happy coding and stay curious!