https://github.com/exploring-solver/fog_battlefield4

https://github.com/exploring-solver/fog_battlefield4

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/exploring-solver/fog_battlefield4
• Owner: exploring-solver
• Created: 2025-01-03T18:31:46.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-20T14:55:29.000Z (about 1 year ago)
• Last Synced: 2025-01-20T15:45:28.686Z (about 1 year ago)
• Language: JavaScript
• Size: 632 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Battlefield 4 Server Info Page Project  

This 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.

---

## Project Details  

- **Frontend:**  

  Built with React.js and styled for responsiveness across devices.  

  **Live Link:** [Frontend](https://fog-battlefield-1n2.netlify.app/)  

- **Backend:**  

  Developed using Node.js/Express.js to serve the required API endpoints for dynamic data fetching.  

  **Backend Link:** [Backend](https://fog-battlefield.onrender.com/)  

- **Features:**  

  - Interactive UI mimicking the Battlefield 4 Server Info page design.  

  - Hover and click interactions implemented as per Figma UI.  

  - Responsive layout tested across different devices.  

  - Backend integration for serving live data.  

---

## High-Level Approach  

### **Frontend Development:**  

1. Designed a React component-based architecture to build a modular, reusable UI.  

2. Fetched data dynamically from the backend using `axios` and displayed it in the green-highlighted section of the UI.  

3. Implemented hover and click interactions using CSS and React state management for interactivity.  

4. Used Netlify for hosting and ensuring cross-device responsiveness through rigorous testing.

### **Backend Development:**  

1. Created a Node.js/Express.js server to serve the required API endpoints.  

2. Used `cors` middleware to enable seamless communication with the frontend.  

3. Hosted the backend on Render for scalability and accessibility.  

---

## Screenshots  

![image](https://github.com/user-attachments/assets/e1f3adfc-2df0-4bd6-bae5-0578b644f2b8)

![image](https://github.com/user-attachments/assets/7c050f41-8ddf-446a-a396-de83a8d82ddc)

---

## Deployment Links  

- **Frontend Live Link:** [https://fog-battlefield-1n2.netlify.app/](https://fog-battlefield-1n2.netlify.app/)  

- **Backend Live Link:** [https://fog-battlefield.onrender.com/](https://fog-battlefield.onrender.com/)  

Feel free to explore the repository and test the live deployment links. 🚀