This project was bootstrapped with Create React App.
This project was developed using a modern and efficient technology stack to ensure a robust and scalable frontend:
- React.js: As the core frontend library for building dynamic and interactive user interfaces.
- Tailwind CSS: Employed for styling, allowing for a responsive and clean design without the need for custom CSS.
- React ApexCharts: Integrated for rendering interactive and visually appealing charts in line with the provided design.
Project Structure
The project follows a well-organized structure for maintainability and scalability:
- src/assets/: Contains static assets such as images, icons, and SVGs.
- src/components/: Holds reusable UI components, promoting code reusability and separation of concerns.
- src/data/: Includes the Data JSON Structure that allows for easy integration with the dynamic chart components.
- src/pages/: Contains page-level components. In this Web Application Prototype, "Missions" page was the one developed and set to Active.
- src/styles/: Leverages Tailwind CSS for styling, promoting a consistent design language.
The UI is divided into modular components, each responsible for a specific aspect of the application. Notable components include:
- Sidebar: Responsible for navigation and user interface toggling.
- SidebarItem: Represents individual items in the sidebar menu, ensuring clarity and responsiveness.
- FlightPathChart2D and FlightPathChart3D: Components dedicated to rendering 2D and 3D flight path charts using React ApexCharts.
Tailwind CSS is utilized for responsive design, ensuring a seamless experience across various devices. Media queries and utility classes are employed for adaptability and flexibility in layout adjustments.
The implementation of the 3D chart posed specific challenges that required additional time and consideration.
The task was initially estimated to take approximately 3 hours. However, due to the complexities involved, the development time exceeded the initial estimate. The commitment to delivering a high-quality solution and overcoming challenges took precedence over adhering strictly to the initial timeframe.
- I appreciate your understanding and am open to feedback and further discussions on optimizing and refining the 3D chart implementation.
The codebase includes extensive inline comments to clarify complex logic, major decisions, and features.