CyberFlix

CyberFlix is an innovative cinema project inspired by Moveek, aimed at delivering an exceptional movie-watching experience. This frontend-only project utilizes cutting-edge technologies and design tools to provide a seamless and visually appealing platform.

Features

• Responsive UI for various devices.
• Seamless movie discovery and browsing.
• Advanced state management with Redux.
• Asynchronous operations handled using Redux Thunk.
• Declarative routing with React Router v6.
• Stylish and efficient UI components from Ant Design.
• HTTP requests managed through Axios.

How to Enjoy CyberFlix

Welcome to CyberFlix, where your cinematic journey begins! Follow these simple steps to immerse yourself in a world of movies:

1. Explore Our Movie Collection:

🎥 Visit our website at here.

2. Discover Exciting Movies:

🔍 Browse through our vast collection of movies. Click on a movie poster to explore more details.

3. Sign Up for a Cinematic Experience:

🍿 To unlock special features and personalized recommendations, sign up for a CyberFlix account. Click on "Sign Up" and follow the registration process.

4. Create Your Watchlist:

💼 Once logged in, start curating your own watchlist. Click on the heart icon on your favorite movies to add them to your collection.

5. Enjoy Movie Nights:

🎬 Ready for movie night? Click on "Watch Now" for the selected movie, grab your snacks, and enjoy the show!

Need Assistance?

If you have any questions or need assistance, our support team is ready to help. Contact us via email at [email protected] or reach out on social media.

We hope you have a fantastic time exploring and watching movies with CyberFlix!

Technologies Used:

• React: A powerful JavaScript library for building user interfaces.
• Redux: State management library for managing the application state.
• Redux Thunk: Middleware for handling asynchronous operations with Redux.
• React Router v6: Declarative routing for React applications.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Ant Design: A React UI library with a set of high-quality components.
• Axios: A promise-based HTTP client for making requests to APIs.
• Vite: Next-generation frontend tooling for faster development.

Development Tools:

• VSCode: Visual Studio Code is the recommended integrated development environment (IDE) for this project.
• Postman: A collaboration platform for API development, used for testing API endpoints.
• Swagger: A tool for designing, building, and documenting APIs.
• Figma: A collaborative interface design tool.
• Canva: An online graphic design tool for creating logos and other visual content.
• Adobe Photoshop: Adobe Photoshop for advanced image editing and design.
• Adobe Illustrator: Vector graphics editor for creating illustrations and designs.

Usage:

1. Clone the repository: git clone https://github.com/longphanquangminh/longphan-bcs08-cyberflix-movie.git
2. Navigate to the project directory: cd longphan-bcs08-cyberflix-movie
3. Install dependencies: npm i
4. Run the development server: npm run start

Configuration

1. Create a .env file in the root directory.

2. Add the following environment variables:

   VITE_TOKEN_CYBERSOFT=your_cybersoft_course_token_(not_expired)
   VITE_BASE_URL=movie_be_base_url_(contact_us_if_needed)

Useful Links

🌟 Youtube preview: https://www.youtube.com/watch?v=--vqdHSymro

---

This project is developed and contributed by Long Phan (Idol Dev)