Skip to content

Latest commit

 

History

History
108 lines (90 loc) · 2.94 KB

README.md

File metadata and controls

108 lines (90 loc) · 2.94 KB

TGJU Price Scraper React App

Overview

The TGJU Price Scraper React App is a clean, modular, and responsive React.js application designed to scrape and display real-time price data from TGJU.org. Built with Tailwind CSS for styling and Framer Motion for animations, the app provides an interactive and visually appealing experience.

Features

  • Real-time Data Fetching: Fetches price data for key items such as:
    • Dollar Price ($)
    • Gold Mesghal Price (🏅)
    • 18K Gold Price (🥇)
  • Responsive Design: Optimized for all screen sizes using Tailwind CSS.
  • Smooth Animations: Powered by Framer Motion for hover and load animations.
  • CORS Handling: Uses cors-anywhere to bypass CORS restrictions.

Technology Stack

  • Frontend Framework: React.js
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • HTTP Requests: Axios
  • Build Tool: Vite

Installation

Prerequisites

Ensure you have the following installed:

  • Node.js (v16 or above)
  • npm or yarn

Clone the Repository

git clone https://github.com/aliakbar-zhour/tgju-react-app.git
cd tgju-react-app

Install Dependencies

npm install

Usage

Start the Development Server

npm run dev

Open your browser and navigate to http://localhost:5173 to view the app.

Build for Production

npm run build

The production-ready files will be generated in the dist folder.

Preview Production Build

npm run preview

File Structure

.
├── public/                 # Static files
├── src/
│   ├── components/
│   │   └── PriceList.jsx  # Component to fetch and display prices
│   ├── App.jsx            # Main App component
│   ├── main.jsx           # Entry point
├── tailwind.config.js      # Tailwind CSS configuration
├── package.json           # Dependencies and scripts
└── README.md              # Documentation

Configuration

CORS Handling

This app uses cors-anywhere to bypass CORS restrictions. Ensure that the cors-anywhere service is running or accessible.

Update the fetch URL in PriceList.jsx if you have a custom CORS proxy:

const response = await axios.get("https://cors-anywhere.herokuapp.com/https://www.tgju.org/");

Contributing

  1. Fork the repository.
  2. Create a feature branch: 
    git checkout -b feature-name
  3. Commit your changes: 
    git commit -m "Add new feature"
  4. Push to the branch: 
    git push origin feature-name
  5. Open a pull request.

License

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

Screenshots

Loading State

Displays a smooth animated loading text while fetching data.

Price List

Shows the latest prices with hover animations for better user experience.

Made with ❤️ using React, Tailwind CSS, and Framer Motion.