Frontend task - Search movie app (Gaston Colaneri)

[gastoncolaneri]

Frontend task - Search movie app

🚀 Project overview

This is a Frontend application where the user can filter movies just typing in the input text.
When the application is loaded, the user can see some of the most popular movies. Once the user start typing, the application filter them. Additionally, a dark/light theme switch was implemented to improve the user experience.

This proyect was created using React. For styling, Styled-Component was chosen. Additionally, Vite was used because it simplifies setup and development by offering minimal configuration by default. It also integrates TanStack React Query for data retrieval and caching, Zustand for managing the application's global state, and React Router for page navigation.

---

🎨 Screens preview

Home search screen

Movie details screen

Dark mode enabled

Mobile style

Not found result message

API token error message

---

📦 Dependencies

Main dependencies

• react-router: In-app navigation management, facilitating page management
• @tanstack/react-query: Data fetching, caching, and synchronization
• zustand: Lightweight state management library
• axios: Simplified and powerful HTTP client
• react-icons: Popular icon library for React components
• styled-components: CSS-in-JS styling for component-based design

Development dependencies

• vite: A rapid build tool that improves development speed
• typescript: Adds typing, improving code reliability and maintainability
• @vitejs/plugin-react: Optimize React applications within the Vite ecosystem
• eslint & eslint-plugin-react-hooks & eslint-plugin-react-refresh: Ensure code quality by applying good practices and detecting potential errors
• @eslint/js & typescript-eslint: Improves ESLint support for TypeScript projects
• @types/react & @types/react-dom: Provides TypeScript type definitions for React

---

🛠 How to Execute the Project locally

1️⃣ Clone the repository

The first step is cloning the repository. Then you should move to the search-movie-app. You will find it inside the path "mews-frontend-task/jobs/Frontend"

git clone https://github.com/gastoncolaneri/mews-frontend-task.git

cd mews-frontend-task/jobs/Frontend/search-movie-app

2️⃣ Install dependencies

Before running the project, make sure you have Node.js installed. Then, install the dependencies by running the command:

npm install

3️⃣Setup environment variables

Create a .env file at the root of the project and add your API token for TMDb:

VITE_API_TOKEN=your_api_token_here

Note: The token is injected into the app using Vite's environment variables. Make sure your variable is prefixed with VITE_.

4️⃣ Run in Development Mode

To start a development server, run the following command:

npm run dev

This will start the application on http://localhost:5173 (or a different port if configured).

To test this project without having to clone the repository, you can use this link.

---

🧪 Testing

To run the tests:

npm run test

To run in watch mode:

npm run test:watch

💡 Improvements

• Implement more functionalities, like filters by genre, release date or votes
• Retrieve default movie list, such as "Top rated" or "Upcoming"
• Add more information in the movie details
• Implement the capability to add to favorites
• Add more test scenarios
• Add E2E testing

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
-	-	JSON Web Token	ba52210	jobs/Frontend/search-movie-app/.env	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}