The CryptoRank Price Tracker is a web application designed to provide users with real-time information and insights about various cryptocurrencies. With the rapid growth and popularity of cryptocurrencies, it's essential for traders, investors, and enthusiasts to have a reliable platform that allows them to monitor the performance of different crypto assets.
The CryptoRank Price Tracker project aims to empower users with accurate and timely information about cryptocurrencies, enabling them to make informed decisions when trading or investing. Whether users are beginners exploring the world of cryptocurrencies or experienced traders analyzing market trends, this application provides a valuable resource for tracking and understanding the dynamic crypto market.
Head to the LIVE DEMO SECTION for Live links and presentations
CSS
REDUX
API
-
Crypto List and Ranking: The application displays a list of cryptocurrencies ranked by various parameters such as market capitalization, price, trading volume, and more. Users can quickly view the top-performing cryptocurrencies and identify trends.
-
Detailed Crypto Information: Users can click on a specific cryptocurrency to view detailed information about it. This includes the current price, supply details, market capitalization, 24-hour trading volume, price change percentage, and more.
-
Search and Filtering: The platform allows users to search for specific cryptocurrencies by name or symbol. Additionally, users can filter the list based on specific criteria such as price, rank, or market capitalization.
-
Dark and Light Themes: The application supports both dark and light themes, providing users with a comfortable viewing experience based on their preferences.
-
Responsive Design: The interface is designed to be responsive and accessible on various devices, including desktops, tablets, and smartphones.
-
Routing and Navigation: Users can navigate between different sections of the application using routes. For instance, clicking on a cryptocurrency redirects the user to a detailed view of that asset.
-
Real-Time Data: The application retrieves real-time data from a reliable data source, ensuring that users receive up-to-date information about cryptocurrency prices and other relevant metrics.
-
Redux State Management: The project utilizes the Redux library for efficient state management, allowing seamless data flow between different components.
-
React Router: React Router is employed to manage navigation within the application, ensuring a smooth and intuitive user experience.
View the live demo of this project by clicking the text below.
- See Live Demo via Netlify
- See Live Domo via gh-pages
- See Live Demo via Vercel
- First Presentation Video
To get a local copy up and running, follow these steps.
Clone the repository
git clone https://github.com/geekelo/crypto-price-rank.git
And you are ready to begin your project
This project contains An HTML FILE (free to edit) - file that contains html codes to give structure to the main webpage A CSS FILE (free to edit) - file that contains css codes to style the webpage A GIT IGNORE FILE (free to edit) - to hide personal or private files HTML/CSS LINTER FILES (should not edit) - Do not make changes A JAVASCRIPT FILE (free to edit) - that handles functionalities and dynamic HTML
You should have Node and Git Installed You should have basic knowledge on HTML / CSS / JavaScript You should have a code editor
Download install VSCODE and Git To install linters, execute the following commands:
Initialize npm | ``` npminit -y ```
HTML | ``` npm install --save-dev hint@7.x ```
CSS | ```npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x ```
To run the linters, execute the following command and fix linter errors:
HTML | ``` npx hint . ```
CSS | ```npx stylelint "**/*.{css,scss}" ```
If you get a flood of errors keep in mind that linters guide you in writing a clean code!
You can run this program on using npm start
You can run tests for this program using npm test
You can deploy this project using the following procedure:
- Pick the right hosting provider.
- Choose the tool and method to upload your website.
- Upload files to your website.
- Move the website files to the main root folder.
- Import your database.
- Check if your website works worldwide.
👤 Eloghene Otiede
- GitHub: @geekelo
- Twitter: @Geekelo_xyz
- LinkedIn: LinkedIn See Documentation of Author's inputs
You can offer Contributions, submit an issue, and make a feature request.
- Add pop up modals
- Add the contact form
- Add more content pages
Please give a ⭐️ to support this project
-
I would like to thank Microverse for inspiring this project
-
Fonts: Google Fonts
-
Original design idea by Nelson Sakwa on Behance.
This project is MIT licensed.