React Movie is a comprehensive, hands-on learning project designed to help developers master React by building a fully functional movie browsing application. This covers essential React concepts, including components, hooks, routing, and modern development practices.
- 🔧 React Fundamentals - Components, Props, and State Management
- 🎣 React Hooks - useState, useEffect, and custom hooks
- 🛣️ React Router - Client-side navigation and routing
- ⚡ Modern Tooling - Vite for lightning-fast development
- 📱 Best Practices - Code organization and ESLint configuration
| Technology | Version | Purpose |
|---|---|---|
| React | 19.1.1 | UI Library |
| React Router DOM | 7.9.4 | Routing |
| Vite | 7.1.7 | Build Tool |
| ESLint | 9.36.0 | Code Quality |
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/Tanathorn-Rin/React-Movie.git
-
Navigate to the project directory
cd React-Movie/frontend -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build production-ready application |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint to check code quality |
React-Movie/
└── frontend/
├── public/ # Static assets
├── src/ # Source files
│ ├── components/ # React components
│ ├── pages/ # Page components
│ └── App.jsx # Main App component
├── index.html # HTML template
├── package.json # Dependencies and scripts
└── vite.config.js # Vite configuration
- 🎨 Modern UI - Clean and responsive design
- 🔍 Movie Search - Find your favorite movies
- 📱 Responsive - Works on all devices
- ⚡ Fast Performance - Powered by Vite
- 🔄 Single Page Application - Smooth navigation with React Router
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available for educational purposes.
Tanathorn-Rin
- GitHub: @Tanathorn-Rin
Give a ⭐️ if this project helped you learn React!
Made with ❤️ for React learners