Weather Final Project
A dashboard application showcasing a temperature line chart using QuickChart API, developed with React.js and Tailwind CSS for a Humber College project.
Overview
The Dashboard Project is an innovative application developed during Semester 2 at Humber College, focusing on the integration of technology and design principles learned throughout the coursework. Leveraging the QuickChart API, the application dynamically displays a temperature line chart that features unique point images. This project serves as a practical demonstration of skills in React.js, UI/UX design, and effective API integration.
Through the implementation of responsive design and user-friendly features, this dashboard application aims to make data visualization accessible and engaging. It encapsulates the collaborative efforts of the team members, showcasing their collective expertise and creativity in web development.
Features
-
Temperature Over Time Chart: Displays a visually appealing line chart illustrating temperature data sourced from the QuickChart API, complete with custom images at specific data points.
-
Responsive Design: Ensures a seamless user experience across various screen sizes, making the dashboard accessible on desktops, tablets, and mobile devices.
-
User Authentication: Features basic sign-up and log-in buttons designed for demo purposes, offering insight into potential future functionalities.
-
Technologies Used:
- React.js: The core JavaScript library that forms the foundation of the user interface, enabling dynamic updates and interactivity.
- Tailwind CSS: A powerful utility-first CSS framework that simplifies the process of creating responsive and aesthetically pleasing designs.
- Recharts: An open-source library facilitating the generation of various chart types, including the core temperature line chart with its customizable attributes.
This project combines artistry and technology, making it an exciting example of what can be accomplished with the right tools and team collaboration.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Recharts
Recharts is a powerful and easy-to-use React library for building customizable and interactive charts. Built on D3.js, it offers a wide range of pre-built chart types, such as line, bar, pie, and scatter charts, all of which can be composed with a declarative syntax.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.