Project One: Your First Web Application

Expectations & Attendance During Project Periods

There are typically no classes taught during project periods with the exception of optional review time or bonus workshops.

That said, during project periods, the classroom will be broken down into groups called "squads".

Each group will have a squad leader consisted of your instructor lead or one of your instructor associates.

Please Note: We still take normal attendance for scheduled classroom days that fall on project periods.

So, you are expected to be available via Slack/Zoom for check'ins and stand ups.

Squad leaders will regularly check on your progress to ensure you're on track to reach MVP.

🚨 However it still is your responsibility to proactively communicate when you get behind pace or find yourself struggling to reach MVP.

Project Details

 Mandatory To Pass:

MVP - Minimum Viable Product

Necessary Deliverables (Your application must meet these requirements):

Built with HTML, CSS, JavaScript and jQuery
Hosted on Vercel, Netlify, or GitHub pages.
Use AJAX to make a request to an external data source like OMDBapi and insert some of the data retrieved into the DOM
Frequent Commits to github dating back to the very beginning of the project
A README.md file with these sections:

☐ <Your app's title>: A description of your app. Background info of the app is a nice touch.

☐ Technologies Used: List of the technologies used, e.g., JavaScript, HTML, CSS...

☐ Screenshot(s): Images of your actual app.

☐ Getting Started: In this section include the link to your deployed app and any instructions you deem important.

☐ Future Enhancements: Features you plan to implement later.

Note: Don't underestimate the value of a well crafted README.md.
The README.md introduces your project to prospective employers and forms their first impression of your work!

Example README.md

Example Readme

Here are some "bonus features" but not required:

Have one or more complex user interface modules such as a carousel, drag and drop, a sticky nav, tooltips, etc
Look into localstorage so you can save data to the user's browser

📋 List of API's

Below is a non-exhaustive list of some free API's you can use. There are many API's out there, however, so if you find one not on this list that you'd like to use, feel free! Please note that some may require signing up for an API key (e.g. the Marvel API).

Super Hero API: https://superheroapi.com/
Weather: https://openweathermap.org/api
Giphy: https://developers.giphy.com/
Pokemon: https://pokeapi.co/
Card Deck: https://deckofcardsapi.com/
Google Books: https://developers.google.com/books/
City of Chicago: https://data.cityofchicago.org/
Beer: https://www.brewerydb.com/developers
Rick and Morty: https://rickandmortyapi.com/documentation/#rest
Open Trivia DB: https://opentdb.com/

Note, not all API's are free and many listed may require payment.
We highly suggest to use a free API for your first project.

🚨 Final Note on Selecting an API 🚨

Please be extremely thorough when finding an API you'd like to use for your project. In other words, please ensure you have properly vetted your API, by taking the time to read it's documentation and even "hitting a few endpoints".

Do this BEFORE you decide to seek instructor approval.

This ensures you're taking the time to test the API and see how you can get it to respond with data and what that data looks like.

Make A New Repo

You will be using GitHub, not GitHub Enterprise!

After your project has been approved, make a new github repo for your project.

Extra: want your own domain name?

You can also host your github pages with your own domain name.
Here is a walkthrough from namecheap, one web hosting service

Submitting Your Project and Project Presentations

You will use the Homework Submission link to "submit" the URL to your Project's repo on Github

You will recieve 5 minutes to present your project and show your code to classmates and instructional team.

Here are the main points you'll want to cover when presenting your project

Intro your project by paraphrasing the README on GitHub.
Launch your project clicking the deployed project link in the README.
Showcase your feature set and basic functionality
Briefly show the HTML & CSS.
Show the JavaScript and discuss your favorite code blocks.
Share your biggest challenge.
Share your key learnings/takeaways.

How to get help during project periods

Seek out help online
Post a question in the tech-talk or help channel
Seek out help with your classmates
Asking your instructional team for assistant should be the last resort

Suggested Ways to Get Started

Wireframe Make a drawing of what your app will look like in all of its stages (what does it look like as soon as you log on to the site? What does it look like once data is retrieved?).
Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually.
Commit early, commit often. Don’t be afraid to break something because you can always go back in time to a previous version.
Consult documentation resources (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.

Think about...

Creativity
Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user?
Code Quality
Did you follow code style guidance and best practices covered in class, such as spacing, indentation, modularity, and semantic naming?
Did you comment your code as your instructors have in class?
Problem Solving
Are you able to defend why you implemented your solution in a certain way?
Can you demonstrate that you thought through alternative implementations?

Example Project Functionality

Below is a very simple project idea using OMDB and jQuery, notice how functionality was emphasized over style?
(please note, your project should include more styling than this):

Example Project

Consider framing your project around a problem. For example, if I were to create an app similar to the one above, maybe the problem is my friends and I always have weekly movie nights and we're starting to run out of movies to watch. So, I thought about creating an app where I can search for movies and see their summaries. Or just thought about creating an app to help schedule the movie nights with what movie we'll be watching, etc.