Home/Projects/ Project - Find Movies App/
Home/Projects/Project - Find Movies App/
Note: Scroll the design to see its all parts.

Find Movies App

css
js
react
api
Show the "you might like" section, implement finding movies by search term, and show details in a dialog window. Code it all using free OMDb API.
Designed by
Milena Ulman
Difficulty
It's free and always will. You can use this design for your portfolio/website without any limitations. Additionally, you can share the completed project wherever you want.

Read me first

The goal of this project is to build a Find Movies App similar to the design above.
Technologies & tools will be proposed down below but feel free to use different ones if you're more familiar with them. Have fun along the way.
Project requirements
  • If not using CodeSandbox, boilerplate the application with CRA.
  • Get your free API key from OMDb API, (or any similar movies API you can find). Study the documentation before starting implementation.
  • The website looks similar to the design (Desktop and Mobile) and is available for users through a link.
  • On the initial page load, the "YOU MIGHT LIKE" section should be filled with either random movies or predefined ones. (prepare a list of movies upfront and trigger API request to fetch them before rendering the page)
  • Users can find movies using the search bar, request to the API should trigger after entering a minimum of 2 characters and be debounced to prevent too many requests at once. (no enter click, listen to keypress and fetch data after e.g. 300 milliseconds delay, try to avoid fetch on the first character typed in)
  • When users use the search bar, the "YOU MIGHT LIKE" section should be replaced by search results (movies that were found in the API), if the search bar is cleared, bring back the "YOU MIGHT LIKE" section again.
  • When users click on the movie, a full-page dialog window should show up, hiding the current page content and presenting a particular movie (get details from the API) in a card component. Users should be able to close the dialog by clicking the "X" icon and/or on the background around the card.
  • Handle loading and errors in the code appropriately. (handle error first, then loading, then data)
Additional requirements
  • To avoid working on a real API and burning its daily limits, implement a mock server first (try to recreate original schema/data format), code the app, and when it'll be ready switch to the real movies API (e.g. OMDb) for final testing if all works nicely together.
  • Improve loading and error handling by using e.g. additional components, texts, assets as presented on the last views of the design.
  • Implement more fields from the API, explore, discover what's available and make it as robust as it's possible. Use all the data! 🔥
  • Don't show too many movies at once, limit to e.g. 10 of them, use lazy loading for fetching more.
  • Add API tests to your code, using e.g. jest.
  • Add e2e tests to your code, using e.g. cypress.

How to start

In most cases, CodeSandbox will be the best place for starting out rapidly.
You could also use an IDE, VSCode for example, and create e.g. a GitHub repository with custom deployment. More about it in the "Build & Deploy" section.
First steps
  • Be Agile! Plan your work upfront either with Scrum or Kanban by creating e.g. Trello board for this project.
  • Open the design by clicking the button under the above image.
  • Get familiar with design, it contains all the assets (except icons sometimes - use e.g. fontawesome), CSS properties you'll need to use.
  • After deciding on either CodeSandbox or GitHub repo, set your project with initial files, directory structure (your own preference).
  • Nothing will stop you now. Don't forget to share a link once you completed the project!

Technologies & Tools

Stuck, can't progress?

Take a break, think about all the pieces you need to build for this project.
I'll be happy to assist you, try out my Mentorship or/and connect to a study group on Slack where I and mentees will be able to answer your questions.

Build & Deploy

If you decided on CodeSandbox, there should be a "Share" button that you can use as a link for your completed project.
Otherwise, for simple, static projects (HTML, CSS, JavaScript) you can try GitHub Pages. For more complex deployments (React, etc.), Netlify or Vercel should be good. If the project has a little bit of Backend, try Heroku for it.

Review & Feedback

Before you share the completed project, feel free to post it on Slack for review, someone might pick it up and give honest feedback, maybe even propose code improvements. After all, we want to improve as Developers.

Share your solution

It would be amazing if you can tweet @BigsonDev with the link to the completed project and/or GitHub repo. All the mentees would love to see what you've built (and me too).

Building Your Own Project

If this project doesn't fit your needs and you don't feel like a Designer but want to prototype something fun quickly, a designmodo tool might help with that.
Startup Framework by Designmodo
The above is an affiliate link, if you buy something I'll get a small commission at no extra charge to you.

Why designmodo?

  • You can quickly scaffold a project using prebuilt components.
  • They have 3 apps, one for email design, one for animated websites, and one for startup projects.
  • This can work both ways, you could come up with a beautiful design and present it to the client before coding, and learn coding as each project you create can be downloaded with all corresponding HTML, CSS, JS files.
  • I tested it and even with a free plan you can experiment a bit, learn both coding & design faster by looking at generated content/code.

Wall of Fame

Be the first one to land on the Wall of Fame.
To get in the Wall of Fame, I'll need a couple of things.
  • Link to the completed project (CodeSandbox link or completed project link with GitHub repo link).
  • Your nickname. (brand name, something spicy 🔥)
  • Portfolio/Website/GitHub link you would like to share with the world.
If I missed your solution, please, contact me via the Reach Out form.
I can't promise every solution will land on the Wall of Fame, it needs to be neat and crispy.
spread the word
Do you think this project is cool? Share it with someone!