LoginGet started

Let's build a CRYPTO Price Tracker with React Native (step by step tutorial)🔴

notJust․dev・154 minutes read

The live stream focuses on building a crypto price tracker application similar to Coin Market Cap, with Lucas leading the tutorial and Vadim assisting with future courses and streams, emphasizing organizational structure and efficiency in developing the app. The development utilizes React Native and Expo, with a plan to integrate real data using CoinGecko API slowly, while also exploring features like form validation and adding graphs, animations, and state management for a more comprehensive application in the future.

Insights

  • The tutorial focuses on building a crypto price tracker application resembling platforms like Coin Market Cap, utilizing React Native and Expo for mobile development.
  • Lucas, a software developer, leads the tutorial, emphasizing the importance of organizing components efficiently for development.
  • Dummy data is provided initially, with plans to integrate real data slowly using the CoinGecko API, ensuring seamless data replacement.
  • The team discusses styling adjustments, color coding for positive and negative changes, and plans to implement a graph for each coin on the details page, emphasizing clean code organization and management.

Get key ideas from YouTube videos. It’s free

Recent questions

  • How can I build a crypto price tracker app?

    To build a crypto price tracker app, you can follow a tutorial using React Native and Expo for mobile development. The app will display a list of cryptocurrencies with details like name, price, and market cap. Specific details of each cryptocurrency will be shown on a separate details page. Start by creating a list item component for displaying cryptocurrency details, incorporating images and adjusting styles for better design. Utilize dummy data for initial testing and consider integrating real data from an API like CoinGecko. Organize components efficiently, use the "flat list" component for rendering multiple items, and format data for readability. Implement features like color-coded percentage changes and market cap normalization. Stay tuned for future tutorials on form validation and additional functionalities.

  • Who are Lucas and Vadim in the tutorial?

    Lucas is a software developer leading the tutorial on building the crypto price tracker app. He has a history of teaching programming and collaborating with Vadim at a startup. Vadim, on the other hand, is focusing on a premium course on full-stack mobile development while Lucas assists with the live streams. Both individuals bring expertise in software development and aim to provide valuable insights and guidance throughout the tutorial.

  • What tools are used for mobile development?

    The tutorial utilizes React Native and Expo for mobile development. React Native allows for building mobile applications using JavaScript, providing a smooth development experience. Expo complements React Native by simplifying the development process and offering tools for testing and deployment. By leveraging these tools, developers can create cross-platform mobile applications efficiently and effectively.

  • How can I display cryptocurrency data efficiently?

    To display cryptocurrency data efficiently, consider using the "flat list" component for rendering multiple items. This component optimizes rendering for large datasets, ensuring smooth performance. Destructure the data for each cryptocurrency item to extract necessary information like name, price, and market cap. Format the data for better readability, implement color coding for positive and negative changes, and organize styles for a visually appealing display. By structuring data and components effectively, you can enhance the efficiency and user experience of your cryptocurrency tracker app.

  • What are the future plans for the crypto tracker app?

    The future plans for the crypto tracker app include integrating API calls and navigation in the upcoming tutorial. Suggestions for additional features like a watch list are welcome, indicating a focus on enhancing the app's functionality and user experience. By continuously improving and expanding the app's capabilities, users can expect a comprehensive and user-friendly platform for monitoring cryptocurrency prices. Stay tuned for updates and new features to be implemented in the crypto tracker application.

Related videos

Summary

00:00

"Building Crypto Price Tracker App Tutorial"

  • The live stream focuses on building a crypto price tracker application to monitor cryptocurrency prices.
  • The application will resemble platforms like Coin Market Cap or Coin Gecko, displaying a list of cryptocurrencies with details like name, price, and market cap.
  • Specific details of individual cryptocurrencies will be shown on a separate details page, including price, ticker, and a graph representation.
  • The development will utilize React Native and Expo for ease of mobile development, with simple installation through npm.
  • The live stream introduces Lucas, a software developer, who will lead the tutorial on building the crypto tracker application.
  • Lucas and Vadim have a history of working together, including teaching programming and collaborating at a startup.
  • Vadim will focus on completing a premium course on full-stack mobile development during December, while Lucas will assist with the Friday live streams.
  • Viewers are encouraged to follow along with the tutorial, requiring assets like dummy data and images provided in a PDF presentation.
  • The project starts with creating a list item component for displaying cryptocurrency details, beginning with adding an image.
  • Initial challenges include adjusting image height and ensuring correct URL usage, with future plans to incorporate safe area views and themes for improved design.

20:37

Enhancing Data Presentation with Design Elements

  • Increasing font size requested
  • Displaying an image and adding music
  • Designing rows and columns for data display
  • Styling text for name and position
  • Considering adding percentage change
  • Creating a title style with white color and larger size
  • Structuring data display with two rows and columns
  • Aligning elements in a row for flexibility
  • Adding spacing and margin for visual appeal
  • Aligning Bitcoin logo and text for better presentation

40:41

Efficient Component Organization for Stylish Data Display

  • The task involves adding background to a design, creating a new rank, and ensuring font weight is bold.
  • Real data for the application will be integrated slowly using an API called CoinGecko.
  • Styling the number requires wrapping it in a view, adding background color, padding, and border radius.
  • Creating a separate component called CoinItem to avoid lengthy code for multiple items.
  • CoinItem component is structured with JSX for user-friendly rendering.
  • Styles for CoinItem are separated into a styles file for organization.
  • Props are utilized to pass data like names to the CoinItem component.
  • Destructuring props allows for easier access to passed data within the component.
  • Dummy data is provided for initial testing, with the potential for real data integration in the future.
  • The tutorial emphasizes the importance of organizing components and data for efficient development.

01:00:49

"Efficiently Display Cryptocurrency Data with React"

  • Create a folder named "data" in the assets folder and place two JSON files named "crypto" and "cryptocurrencies" containing data on 50 cryptocurrencies.
  • The data structure mirrors what you would receive from the Coingico API, ensuring seamless integration when replacing dummy data with actual data.
  • Utilize the "flat list" component for displaying multiple items efficiently, importing it and setting up the rendering instructions for each item.
  • The "flat list" optimizes rendering for large datasets, unlike manual mapping which can become sluggish with extensive data.
  • Ensure each item's key for rendering is automatically set by the "flat list" based on the provided id or key field in the object.
  • Destructure the data for each cryptocurrency item to extract necessary information like name, current price, market cap rank, symbol, percentage change, and image.
  • Format the percentage change to display only two decimal places for better readability.
  • Implement a function to normalize the market cap data, displaying it in a user-friendly format based on trillion, billion, or million values.
  • Use the underscore formatting technique for easier readability of large numbers, simplifying the representation of trillions, billions, and millions.
  • Plan to incorporate a tutorial on managing form validation using React Form Hook in the upcoming video for the authentication series, catering to the audience's interest in authentication guides.

01:21:32

"Enhancing Course Layout with Color Coding"

  • The team is working day and night on recording and preparing a course, facing issues with columns and margins.
  • Aligning content to the right in the last column improves the appearance.
  • Adjusting text margins to the right enhances the layout.
  • Implementing a function to display market cap numbers with color coding for positive and negative changes.
  • Introducing a color change for percentage changes, with green for positive and red for negative.
  • Utilizing icons to represent positive and negative percentage changes.
  • Adjusting the border color to a light shade for a refined look.
  • Refactoring the code to maintain a clean app.js file and organizing screens into separate folders.
  • Planning to implement a graph for each coin on the details page.
  • Discussing the use of the CoinGecko API for obtaining cryptocurrency data and potential future data source changes.

01:42:25

"Bitcoin Display Tutorial with Styling Tips"

  • The required size for the display is 30.
  • Importing data for Bitcoin is necessary.
  • Bitcoin data includes multiple images and market data.
  • The data contains various details like ID, symbol, name, and market information.
  • Market data includes all-time high and low prices, change percentage, and more.
  • The tutorial suggests implementing multiple different features.
  • Styling adjustments are needed for the display, including font weight and size changes.
  • Styles are organized into separate files for better management.
  • Components are separated into individual files for cleaner code.
  • The header component is structured for reusability in other screens.

02:04:33

"Coin Details Header Styling and Data"

  • To import the coin detailed header, use "import coinDetailedHeader from components/coinDetailHeader."
  • Props need to be sent to the coin details header to render data correctly.
  • The data for the coin details header should be sent from the coin detail screen.
  • Multiple props, like name, symbol, and market cap rank, need to be passed to the coin details header.
  • The name prop is not currently used but may be needed later.
  • Adding padding to the page instead of individual components can make styling easier.
  • The current price can be accessed using "marketData.currentPrice.usd."
  • Styling adjustments, like font size and letter spacing, can enhance the appearance of the current price display.
  • Create a styles.js file to manage styling and import it for consistency.
  • Display the price change percentage per 24 hours by accessing "marketData.priceChangePercentage24h."

02:25:53

Enhancing Project Aesthetics Through Design Adjustments

  • The team discusses the design, font size, and color of a project, making adjustments for better aesthetics.
  • They focus on adjusting the font size, vertical spacing, and padding to improve the overall look.
  • The team works on the color scheme, specifically addressing the red color and making changes to enhance the design.
  • They discuss the issue with calories and make adjustments to improve the visual appeal.
  • Plans are made to potentially separate components due to the large size of the project.
  • They introduce a chart component called "Rainbow React Native Animated Chart" and discuss its minimalistic and animated features.
  • The team decides to set up React Native Animated by following instructions on the website.
  • They install React Native Reanimated and make necessary changes in the project configuration for it to work.
  • The team demonstrates how to create a simple chart using the provided example and adjust data structure for compatibility.
  • They discuss the importance of passing data with x and y values to the chart provider for proper display.

02:46:32

Enhancing Chart Functionality for Cryptocurrency Tracking

  • Double press on "R" for complex functionality, realizing the superiority of the buzzer.
  • Simple function does not yield any results, leading to the preference for a chart.
  • Implementing a chart path and chart dot to control the blue bubble's movement.
  • Wrapping the chart in a view within a chart path provider for functionality.
  • Utilizing a chart y label to update the price according to the dot's position.
  • Formatting data with a function called format currency for performance enhancement.
  • Running code on the UI thread for improved performance without state updates.
  • Adjusting colors based on price changes, with red indicating a drop and green a rise.
  • Adding a price converter for ease of calculating cryptocurrency values in USD.
  • Demonstrating state management and input handling for practical application.

03:07:27

"Enhancing Text Input with React Native"

  • Text input requires style properties for better appearance and functionality.
  • React Native elements offer superior input options compared to text input.
  • Placeholder text can be added to text input for initial display.
  • The first column will display symbols in uppercase.
  • Styling is necessary to enhance the appearance of the input.
  • Flex 1 should be used instead of fixed width to ensure responsiveness.
  • Aligning the input in the center improves the overall look.
  • Numeric keyboard type should be set for input fields.
  • State management is crucial for updating values dynamically.
  • Mathematical operations on values require parsing to and from floats to avoid errors.

03:29:42

"Managing Text Inputs in React Native"

  • The text discusses the challenges of working with text inputs in React Native elements.
  • It mentions the need to parse and manipulate text inputs for proper functionality.
  • The text delves into setting values for coin and USD, highlighting the need for specific numerical values.
  • It emphasizes the importance of managing side effects when changing values in an application.
  • The discussion involves implementing useEffect to handle side effects in the application.
  • There is a focus on preventing infinite loops in the application by adding conditional checks.
  • The text explores issues with decimal points in calculations and suggests solutions like replacing commas with dots.
  • It mentions the importance of ensuring accurate decimal calculations for proper functionality.
  • The text concludes with a demonstration of the application's features, including cryptocurrency details and a converter.
  • It hints at future improvements like integrating navigation and querying data for a more comprehensive application.

03:52:06

"Build project continues with API integration"

  • Next week, on Friday at 3 p.m., Lucas and viewers are invited to join for the continuation of the build project, focusing on integrating API calls and navigation. Suggestions for additional features like a watch list are welcome in the comments.
Channel avatarChannel avatarChannel avatarChannel avatarChannel avatar

Try it yourself — It’s free.