muhammadshiraz / dex-frontend-react

The DEX frontend is designed to provide users with a seamless and intuitive experience for interacting with decentralized finance (DeFi) applications. It incorporates professional design principles, responsive layouts, smooth animations, and adheres to best coding practices.

DEX Frontend

This is the frontend application for the DEX (Decentralized Exchange) platform. It allows users to view live price charts of cryptocurrencies and perform token swapping using Ethereum blockchain.

Technologies Used

• React: A JavaScript library for building user interfaces.
• React Router DOM: Library for routing in React applications.
• React Chart.js 2: React wrapper for Chart.js library, used for creating charts.
• Axios: Library for making HTTP requests.
• Chart.js: Library for creating various types of charts.
• Chart.js Adapter Date-fns: Adapter for using date-fns with Chart.js.
• Date-fns: Library for manipulating dates in JavaScript.
• Lightweight Charts: Library for creating interactive financial charts.
• Tailwind CSS: Utility-first CSS framework used for styling.
• Sass: CSS preprocessor for adding features like variables, mixins, and nesting to CSS.
• @fortawesome/fontawesome-svg-core: Library for using Font Awesome icons as SVG sprites.
• @fortawesome/free-solid-svg-icons: Font Awesome library for solid icons.
• @fortawesome/react-fontawesome: React wrapper for Font Awesome icons.
• Framer Motion: Library for creating fluid animations in React.
• Web3: Library for interacting with the Ethereum blockchain and smart contracts.
• @walletconnect/web3-provider: WalletConnect library for connecting to Ethereum wallets via Web3.
• Web Vitals: Library for tracking web performance metrics.
• Prettier: Code formatter used for code consistency and readability.

Getting Started

Follow these instructions to get the project up and running on your local machine.

Prerequisites

• Node.js installed on your machine
• npm or yarn package manager

Installation

1. Clone the repository to your local machine:

git clone https://github.com/muhammadshiraz/dex-frontend-react.git

2. Navigate to the project directory:

cd dex-frontend

3. Install dependencies using npm:

npm install

Usage

1. Start the development server:

npm start

2. Open your browser and navigate to http://localhost:3000 to view the application.

Features

• View live price charts of cryptocurrencies.
• Perform token swapping using Ethereum blockchain.
• Responsive design for desktop, mobile, and tablet screens.

Live Demo

Check out the live demo of the application here.

Contributing

Contributions are welcome! Please feel free to submit bug reports, feature requests, or pull requests.

License

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

---

Feel free to customize and expand upon this README file based on your project's specific needs and requirements.