This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.
A modern React + Vite web application that allows users to browse, search, and explore movies.
It’s designed with a responsive UI and powered by dynamic API data fetching using Axios.
- 🎥 Browse Movies — Explore a wide range of movies with titles, posters, and descriptions.
- 🔍 Search Functionality — Quickly find movies by title or keyword.
- 🧭 Dynamic Routing — Seamless page navigation using React Router.
- ⚡ Fast Build — Built with Vite for blazing-fast development and optimized production builds.
- 📱 Responsive Design — Works smoothly across desktop and mobile devices.
- 🧩 Reusable Components — Modular React components for easy scalability.
- 🎨 Icons & Styling — Styled with React Icons and CSS for a modern look.
| Category | Technologies |
|---|---|
| Frontend | React 19, Vite 7 |
| Routing | React Router DOM 7 |
| HTTP Client | Axios |
| Icons | React Icons |
| Linting | ESLint |
| Deployment | Render (Static Site Hosting) |
Follow these steps to run the project locally:
# 1️⃣ Clone the repository
git clone https://github.com/GattiHarishKumar/movie-app.git
# 2️⃣ Navigate into the project folder
cd movie-app
# 3️⃣ Install dependencies
npm install
# 4️⃣ Start the development server
npm run devOnce the app is running, open your browser and go to: 👉 http://localhost:5173/ (default Vite port)
To build the optimized production version:
npm run buildThis will create a dist/ folder containing static files ready to deploy.
You can preview the production build locally with:
npm run previewThe app can be easily deployed on Render:
Render Settings
| Setting | Value |
|---|---|
| Build Command | npm install && npm run build |
| Publish Directory | dist |
| Root Directory | (leave blank) |
The deployed site is live at: 🔗 https://moviestreamx.onrender.com/
movie-app/
┣ src/
┃ ┣ components/ # Reusable React components
┃ ┣ pages/ # Route-level components (Home, Movie Details, etc.)
┃ ┣ assets/ # Images and static files
┃ ┣ App.jsx # Root component
┃ ┗ main.jsx # Entry point
┣ public/
┣ package.json
┣ vite.config.js
┗ README.md
This project helped in understanding:
- Efficient component-based architecture in React
- API integration using Axios
- Routing and navigation with React Router
- Deploying a Vite React app on Render
Contributions are always welcome!
If you'd like to contribute:
- Fork this repository.
- Create a new branch (
feature/your-feature-name). - Commit your changes.
- Open a Pull Request.
Harish Kumar Gatti 💼 GitHub Profile