{"id":18284682,"url":"https://github.com/enes9103/react_typescript_movie_app_task","last_synced_at":"2026-04-16T12:40:14.335Z","repository":{"id":37035845,"uuid":"501817726","full_name":"enes9103/React_Typescript_Movie_App_Task","owner":"enes9103","description":"Application that provides viewing and managing the current movies from Api","archived":false,"fork":false,"pushed_at":"2023-02-14T13:06:36.000Z","size":47504,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T05:47:17.461Z","etag":null,"topics":["bootstrap5","cypress-io","firebase-auth","firebase-realtime-database","react-hooks","react-router","reactcontextapi","reactjs","reactrouter"],"latest_commit_sha":null,"homepage":"https://react-typescript-movie-app-task.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enes9103.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-09T21:46:41.000Z","updated_at":"2024-04-30T18:06:04.000Z","dependencies_parsed_at":"2024-11-05T13:24:25.948Z","dependency_job_id":null,"html_url":"https://github.com/enes9103/React_Typescript_Movie_App_Task","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/enes9103/React_Typescript_Movie_App_Task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enes9103%2FReact_Typescript_Movie_App_Task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enes9103%2FReact_Typescript_Movie_App_Task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enes9103%2FReact_Typescript_Movie_App_Task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enes9103%2FReact_Typescript_Movie_App_Task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enes9103","download_url":"https://codeload.github.com/enes9103/React_Typescript_Movie_App_Task/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enes9103%2FReact_Typescript_Movie_App_Task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31886753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T11:36:10.202Z","status":"ssl_error","status_checked_at":"2026-04-16T11:36:09.652Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap5","cypress-io","firebase-auth","firebase-realtime-database","react-hooks","react-router","reactcontextapi","reactjs","reactrouter"],"created_at":"2024-11-05T13:14:23.460Z","updated_at":"2026-04-16T12:40:14.289Z","avatar_url":"https://github.com/enes9103.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## About The Project\nMovie Application is an application where users can search and review the details of the movies they want by registering and logging in, add them to their favorites by commenting on the movies, and also share them with their loved ones.\n\n\n\u003c!-- DESCRİPTİON --\u003e\n## Description\n- The Movie Application consists of 3 pages: \"Home page (search)\", \"listing\" and \"movie detail\".\n- With the Movie Application, users can register to the application with their e-mail addresses. You can also use the option to continue with the Google account with the Google Provider feature.\n- You can see the current movies on the main page of the application and get information about the movie sessions.\n- You can search for the movies you want on the application home page.\n- It can list all Search results with \"MORE RESULTS\" option.\n- You can view the details of the movies listed by clicking on the relevant movie.\n- You can add the movie you like in the movie details to your favorites, suggest it to another person via e-mail address, and comment on the movie.\n- He can continue to review the movies he has listed by going back from the detail page.\n- The application can work responsively on mobile and desktop platforms.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- PROJECT OUTCOME --\u003e\n## Project Outcome\n![Project gif](Animation_App.gif)\n\n\u003c!-- PROJECT SKELETON --\u003e\n## Project Skeleton\n\n```\nMovie App (folder)\n|\n├── cypress\n│    ├── downloads\n│    │     └── downloads.htm\n│    ├── e2e\n│    │     └── movie_app\n|    │            └── movie_app.cy.js\n|    ├── fixtures \n|    │     └── example.json\n|    └── support\n|     \n├── public\n│    └── index.html\n├── src\n│    ├── assets\n│    │     └── logo1.png\n│    ├── components\n│    │     ├── MovieCard.tsx\n│    │     └── Navbar.tsx\n│    ├── context\n│    │     └── AuthContext.tsx\n│    ├── helpers\n│    │     ├── AuthFirebase.tsx\n│    │     └── DataBaseFirebase.tsx\n│    ├── pages\n│    │     ├── Login.tsx\n│    │     ├── Main.tsx\n│    │     ├── MovieDetails.tsx\n│    │     ├── MovieList.tsx\n│    │     └── Register.tsx\n│    ├── router\n│    │     └── AppRouter.tsx\n│    ├── App.test.tsx\n│    ├── App.tsx\n│    ├── App.css\n│    ├── index.tsx\n│    ├── index.css\n│    ├── react-app-env.d.ts\n│    └── setupTest.ts\n├── package.json\n├── package-lock-json\n├── tsconfig.json\n├── README.md\n└──.env\n```\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\nThis is an example of how you may give instructions on setting up your project locally.\nTo get a local copy up and running follow these simple example steps.\n\n### Prerequisites\n\nThis is an example of how to list things you need to use the software and how to install them.\n* npm\n  ```sh\n  npm install npm@latest -g\n  ```\n\n### Installation\n\n_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._\n\n1. Get a free API Key at [https://www.themoviedb.org/documentation/api](https://www.themoviedb.org/documentation/api)\n2. Create a new Firebase project and app. Get api key and required domain information to use in authentication processes.\nThen create a new Realtime Database of the application. [https://firebase.google.com/](https://firebase.google.com/)\n3. Clone the repo\n   ```sh\n   git clone https://github.com/enes9103/movie_app_task_react_ts\n   ```\n4. Install NPM packages\n   ```sh\n   npm install\n   ```\n5. Create .env file in home directory.\n    ```sh\n    REACT_APP_TMDB_KEY=ENTER YOUR themoviedb.org APIKEY\n    REACT_APP_apiKey:ENTER YOUR FİREBASE APIKEY\n    REACT_APP_authDomain:ENTER YOUR FİREBASE AUTHDOMAIN\n    REACT_APP_projectId:ENTER YOUR FİREBASE PROJECTID\n    REACT_APP_storageBucket:ENTER YOUR FİREBASE STORAGEBUCKET\n    REACT_APP_messagingSenderId:ENTER YOUR FİREBASE MESSAGİNGSENDERID\n    REACT_APP_appId:ENTER YOUR FİREBASE APPID\n   ```\n    ### Important Reminder!!!\n    It is designed to be used by preparing an .env file for the project.\n    However, the .env structure has been left as a comment for convenience in the control situation.\n\n    Themoviedb.org and Firebase api keys and necessary information required for the project are temporarily\n    in the project file.\n\n6. The project is ready, you can start using it now.\n    You can run:\n\n    `npm start`\n\n    Runs the app in the development mode.\\\n    Open [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n7. A test user has been created to log in. You can use `username : johndoe@test.com`, `password : johndoe`. Or you can create a new user Registration or log in with your google account.\n\n    ### Don't  forget!!!\n    You must log in to search for movies, view details and comment. You can also log in with your Google account.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- TESTİNG --\u003e\n## Testing Procedures\n- 1 : Cypress open source test automation tool was used in the project testing processes.\n\n- 2 : After the ``` npx cypress open ``` instruction is run on the terminal, `E2E Testing` should be selected and the test screen should be started by selecting the Crome browser.\n\n- 3 : The test should be started by selecting the `movie_app.cy.js` file in the `E2E specs` column in the Chrome window that opens.\n\n- 4 : The test procedures prepared for the film application are carried out sequentially. You can follow the testing process.\n    \n    ### Don't  forget!!!\n    During the test process, the code register test code block was left as a comment so that the register operations would not send a re-registration request for the same mail.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- PROJECT TESTİNG OUTCOME --\u003e\n## Project Testing Outcome\n![Project gif](Animation_Test.gif)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- DEVELOPMENT PROCESS --\u003e\n## Project Development Process\n\n- 1 : `https://firebase.google.com/` was used for the `Authentication` and `data base operations` of the project.\n\n- 2 : Registered to api `https://www.themoviedb.org/documentation/api` and get API key to get data from `https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}`, for searching movies `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}\u0026query=` and for movie details `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}`.\n\n- 3 : Bootstrap was used as a css library for styling purposes in the project.\n\n- 4 : The application has been designed in a responsive structure that can run smoothly on mobile and desktop platforms.\n\n- 5: Typescript was used in the application created using the React.js library.\n\n- 6: The application has been shared on Github. During the project preparation, the development stages were committed and pushed to the repo.\n\n- 7: Cypress testing framework was used for application testing.\n\n- 8: After the project was completed, gif and detailed README.md file were added.\n\n- 9: The npm package manager was used during application development. Webpack was used for pre-deploy packaging.\n\n- 10: The project was finally deployed using the Netlify service.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- NOTES --\u003e\n## Notes\n\n- You can add additional functionalities to your app.\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenes9103%2Freact_typescript_movie_app_task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenes9103%2Freact_typescript_movie_app_task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenes9103%2Freact_typescript_movie_app_task/lists"}