A web application designed to monitor and provide alerts about fires.
With an intuitive and easy-to-navigate interface, this project was meticulously designed in Figma and faithfully implemented in code, ensuring a cohesive and effective user experience.
The project consists of four main screens:
- Home
- Report
- Notify
- Actions
These screens are interconnected via routes and have the ability to expand and collapse sections and information, offering a dynamic and organized view.
The Report, Notify, and Actions pages include a Header, a NavBar, and a Footer, all developed as reusable components. This approach ensures consistency and cohesion throughout the application.
Additionally, the content of the pages is enhanced with smooth transitions and fluid animations, including hover effects and active states, providing a superior navigation and interaction experience for the user.
The NavBar, implemented with "react-router-dom", features a sliding animation whenever a link is activated, ensuring a pleasant and intuitive interaction.
Finally, on the Home page and in the Header component, you can see a flame effect on the logo. This effect was created using keyframes to add an attractive and realistic visual representation.
*This was my first project using animations.
- React.js
- Styled Components
- CSS Animation