Skip to content

Anjali-Git-Hub/Movies-WebApp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Movies app using React

This project was bootstrapped with Vite | Next Generation Frontend Tooling.

Built using:

  • Front-end library: React
  • React-router-dom library

About Movies App

✔This is a movies app where I've utilized React Router DOM for routing purposes.

✔This application includes a form component provided by React Router DOM.

✔To fetch movie data from the OMDB API, I've implemented a loader function, which returns data fetched from the API. To handle the data returned by the loader function, I've utilized the useLoaderData hook.

✔While fetching movies, I've employed the Axios library, although I typically use the Fetch API for such tasks.

✔Additionally, I've used the Link component from React Router DOM to create links within the application. For error handling, I've implemented the useRouterError hook and utilized a try-catch block.

✔To search for movies, I've incorporated search parameters to facilitate GET requests, allowing users to find specific movies.

✔and to manage loading states i used useNavigation hook that give me an object from that i can check the loading states .

✔I used CSS modules to avoid name collisions when adding CSS styling.

The Live Link showcases how I've handled errors and demonstrates various features implemented within the application.


In the /Movies app, you can run:

npm install

If you haven't installed dependencies yet, you can do so by navigating to your project directory in the command line and running.

npm run dev

Runs the app in the development mode.\

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run test

For running unit tests or integration tests, you would use the test runner configured in your project. It could be Jest, Mocha, or any other testing framework.