Dashboard Project

Overview

This project is a dashboard application developed during Semester 2 at Humber College. The application integrates the QuickChart API to display a temperature line chart with custom point images. It was created as part of our coursework to apply our skills in React.js, UI/UX design, and API integration.

Check out live version deployed at Vercel CLICK HERE

Figma Design (Remix URL): CLICK HERE

Features

• Temperature Over Time Chart: Displays a line chart with temperature data using the QuickChart API, including custom images for specific data points.
• Responsive Design: The dashboard is designed to be fully responsive and works across various screen sizes.
• User Authentication: Basic sign-up and log-in buttons (non-functional for demo purposes).

Technologies Used

• React.js: The primary JavaScript library used to build the user interface.
• Tailwind CSS: Utilized for styling and responsive design.
• Recharts: Used to generate the temperature line chart with desired configurations.

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/ilkerlovesprogramming/weather-final-project.git
   cd weather-final-project

2. Install the dependencies:

   npm install

3. Start the development server:

   npm start

4. View it in the browser.

Usage

Once the application is running, you can interact with the dashboard by viewing the temperature chart and navigating through the various sections. The chart is dynamically generated using the QuickChart API.

Contributors

These roles indicate the contributions made to the project.

• AJ Sia: Team Coordinator, @jisxc
• Kaila Paradis: Developer, @kailaparadis
• Ilker Ozturk: UI/UX Design, @xentzenith

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

We would like to thank our instructor (Harshdeep Singh) and Humber College for providing us with the opportunity to work on this project and improve our skills in web development.

APIs and Technologies Used

• React.js: A JavaScript library for building user interfaces, particularly single-page applications where data changes over time.
• Tailwind CSS: A utility-first CSS framework for creating custom designs without leaving your HTML.
• Recharts: A free and open-source library used to generate charts, such as line charts, bar charts, and pie charts, dynamically. In this project, it's used to create a temperature line chart with custom point images.