{"id":24639656,"url":"https://github.com/exploring-solver/fog_battlefield4","last_synced_at":"2026-04-09T11:56:38.328Z","repository":{"id":270900530,"uuid":"911742773","full_name":"exploring-solver/FOG_BattleField4","owner":"exploring-solver","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-20T14:55:29.000Z","size":647,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T15:45:28.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/exploring-solver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-01-03T18:31:46.000Z","updated_at":"2025-01-20T14:55:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"44cff93f-0276-427f-a40e-2ffa65760f54","html_url":"https://github.com/exploring-solver/FOG_BattleField4","commit_stats":null,"previous_names":["exploring-solver/fog_battlefield4"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exploring-solver%2FFOG_BattleField4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exploring-solver%2FFOG_BattleField4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exploring-solver%2FFOG_BattleField4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exploring-solver%2FFOG_BattleField4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exploring-solver","download_url":"https://codeload.github.com/exploring-solver/FOG_BattleField4/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244600677,"owners_count":20479304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-01-25T11:12:21.959Z","updated_at":"2025-12-31T00:05:45.601Z","avatar_url":"https://github.com/exploring-solver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Battlefield 4 Server Info Page Project  \r\n\r\nThis repository contains the implementation of the **Battlefield 4 Server Info Page**, developed as part of **Online Assessment for Software Developer Intern** at FOG. The project involves creating a responsive UI using **React.js** (Frontend) and a **Node.js/Express.js** backend for data fetching. The project is hosted on free hosting services for demonstration purposes.\r\n\r\n---\r\n\r\n## Project Details  \r\n\r\n- **Frontend:**  \r\n  Built with React.js and styled for responsiveness across devices.  \r\n  **Live Link:** [Frontend](https://fog-battlefield-1n2.netlify.app/)  \r\n\r\n- **Backend:**  \r\n  Developed using Node.js/Express.js to serve the required API endpoints for dynamic data fetching.  \r\n  **Backend Link:** [Backend](https://fog-battlefield.onrender.com/)  \r\n\r\n- **Features:**  \r\n  - Interactive UI mimicking the Battlefield 4 Server Info page design.  \r\n  - Hover and click interactions implemented as per Figma UI.  \r\n  - Responsive layout tested across different devices.  \r\n  - Backend integration for serving live data.  \r\n\r\n---\r\n\r\n## High-Level Approach  \r\n\r\n### **Frontend Development:**  \r\n1. Designed a React component-based architecture to build a modular, reusable UI.  \r\n2. Fetched data dynamically from the backend using `axios` and displayed it in the green-highlighted section of the UI.  \r\n3. Implemented hover and click interactions using CSS and React state management for interactivity.  \r\n4. Used Netlify for hosting and ensuring cross-device responsiveness through rigorous testing.\r\n\r\n### **Backend Development:**  \r\n1. Created a Node.js/Express.js server to serve the required API endpoints.  \r\n2. Used `cors` middleware to enable seamless communication with the frontend.  \r\n3. Hosted the backend on Render for scalability and accessibility.  \r\n\r\n---\r\n\r\n## Screenshots  \r\n![image](https://github.com/user-attachments/assets/e1f3adfc-2df0-4bd6-bae5-0578b644f2b8)\r\n![image](https://github.com/user-attachments/assets/7c050f41-8ddf-446a-a396-de83a8d82ddc)\r\n\r\n\r\n---\r\n\r\n## Deployment Links  \r\n- **Frontend Live Link:** [https://fog-battlefield-1n2.netlify.app/](https://fog-battlefield-1n2.netlify.app/)  \r\n- **Backend Live Link:** [https://fog-battlefield.onrender.com/](https://fog-battlefield.onrender.com/)  \r\n\r\nFeel free to explore the repository and test the live deployment links. 🚀\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexploring-solver%2Ffog_battlefield4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexploring-solver%2Ffog_battlefield4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexploring-solver%2Ffog_battlefield4/lists"}