SBA 320H - React Web Application Project

Now, it is time for you to put everything you've learned to the test and apply it to a practical web application.

The content, context, and objective of your application is entirely up to you. Be creative, and think of something that will both allow you to demonstrate the skills you've acquired thus far and solve a need (practical or fictional).

Once you have an idea for your project, keeping the below requirements and resources in mind, speak to your instructor to have your project approved before you begin. This will ensure you're on the right track from the start, and not running into unforseen issues or wasting time on something that will not satisfy the assignment's objectives.

📑 Requirements

Your application must meet these requirements to pass (this it your Minimum Viable Product):

Built with HTML, CSS, JavaScript, REACT, and Redux Toolkit.
Hosted on Heroku or Netlify.
Frequent commits to GitHub.
A README.md file in your GitHub repository with:
- Explanations of the technologies used.
- Explanations of the approach taken.
- A link to your live site.
- Usage instructions, if relevant.
- Unsolved problems.
- etc.
Use AJAX to make a request to an external data source like OMDBapi, and insert some of the data retrieved into the DOM.

➕ Bonus Features

The following are 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.

📋 Finding an API

Below is a non-exhaustive list of some free APIs you can use. There are many APIs out there, 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).

Lastly, the following sites collect a bunch of APIs together, so you can take a look through their libraries and try to find an API that interests you!

Note, however, that not all APIs are free, and many listed may require payment. We highly suggest to use a free API for your first project dealing with one.

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 its 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, see how you can get it to respond with data, and see what that data looks like.

💻 Make a New GitHub Repo

After your project has been approved, make a new GitHub repo for your project. You will be deploying this project onto GitHub pages, so you must name your repo yourgithubusername.github.io (for example, if my github username was octocat I would do: octocat.github.io).

From there, follow the instructions outlined by GitHub themselves on GitHub Pages.

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.
If you choose to do this, it is best to save it for last so that you know you have time to finish the project's requirements.

💾 Project Submission

Submit the link to your GitHub repository to Canvas when you are finished.

You will present your project and show your code to classmates and instructors.

Being able to explain and articulate your process, objectives, blockers, and successes is an important part of being a developer, but don't be intimidated by the "presentation" aspect. These are your peers, and they're in the same position as you are.

🤝 Need Help with your Project?

Seek out help online within documentation, stackoverflow, or other resources.
Seek out help from your classmates (but make sure to do your own work).
Seek out help from your instructors.

✔ Suggested Ways to Get Started

If you need help getting started with the project, try completing these steps:

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 and brainstorm each component individually:
- Data
- Presentation
- Views
- Style
- DOM Manipulation
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, RTK, etc.) 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 guidelines 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 shopping application built using React that can serve as an example or inspiration for your own project. Try to make an application that is simple enough that you can complete it in the time allotted, but complex enough to show off React's core strengths.

Explore this project on its own page.

Consider framing your project around a problem. For example, maybe the problem is that 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 maybe I could create an app to help schedule the movie nights with what movie we'll be watching, etc.