https://github.com/imoamo/figma-design-to-fully-responsive-web-page-development

Converts a Figma design into a fully responsive web page using React, Chart.js, and CSS media queries to ensure detailed replication and optimal performance across different screen sizes.
https://github.com/imoamo/figma-design-to-fully-responsive-web-page-development

chartjs module-css reactjs responsive-web-design

Last synced: 6 days ago
JSON representation

Converts a Figma design into a fully responsive web page using React, Chart.js, and CSS media queries to ensure detailed replication and optimal performance across different screen sizes.

• Host: GitHub
• URL: https://github.com/imoamo/figma-design-to-fully-responsive-web-page-development
• Owner: imoamo
• Created: 2024-08-19T08:41:12.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-19T08:57:37.000Z (3 months ago)
• Last Synced: 2024-08-19T10:18:06.057Z (3 months ago)
• Topics: chartjs, module-css, reactjs, responsive-web-design
• Language: JavaScript
• Homepage: https://dancing-selkie-front1.netlify.app/
• Size: 27.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Figma Design to Fully Responsive Web Page Development

This project converts a Figma design into a fully responsive web page. The design has been carefully replicated to ensure that no detail is overlooked, and the web page is optimized for different screen sizes using CSS media queries. The project utilizes React, Chart.js, and other modern web development technologies.

## Screenshots

### Screenshot 1

![Screenshot 1](https://github.com/user-attachments/assets/3865755f-4907-41d0-96bf-9bd5c615abeb)

### Screenshot 2

![Screenshot 2](https://github.com/user-attachments/assets/0b7a904b-d296-4789-bf74-42dd2e4b9475)

## Live Demo

Check out the live demo of the project [here](https://dancing-selkie-front1.netlify.app/).

## Project Setup

To run this project locally, follow these steps:

1. **Clone the repository:**

   ```bash

   git clone https://github.com/imoamo/Figma-Design-to-Fully-Responsive-Web-Page-Development.git

2. **Navigate to the project directory:**

    ```bash

    cd Figma-Design-to-Fully-Responsive-Web-Page-Development

3. **Install dependencies:**

   ```bash

    npm install

4. **Run the development server:**

   ```bash

    npm run dev

The project will be live at `http://localhost:5173`.

## Technologies Used

- **React**: A JavaScript library for building user interfaces.

- **Chart.js**: A flexible JavaScript charting library used for visualizing data.

- **CSS Media Queries**: To ensure the design is fully responsive across different screen sizes.