22chiragmodh / StockSpot

Stocks Application Documentation

Installation

1. Create a New Expo Project

   npx create-expo-app MyNewApp --template

2. Navigate into Your Project Directory

   cd MyNewApp

3. Install Dependencies

   To run the project on the web, install the following dependencies:

   npx expo install react-dom react-native-web @expo/metro-runtime

Custom Fonts

This project uses the Axiforma font.

1. Download the Font Files

   Download the Axiforma font files and place them in an assets/fonts directory within your project.

Third-Party Libraries Used

This project utilizes several third-party libraries to enhance its functionality and development experience:

1. Lottie React Native 🔗

• Why:

  • Easily add high-quality animations to React Native apps.
  • Ideal for creating animated error highlights and other engaging animations.

• Usage:

  • Used for displaying animated error highlights view.
  • Key point: Enhances user experience with visually appealing animations.

2. Moti 🔗

• Why:

  • Simplifies animations in React Native.
  • Provides a clean and concise API for creating complex animations with ease.

• Usage:

  • Used to show skeleton loading states in the UI.
  • Key point: Improves user experience by providing smooth and visually appealing loading states.

3. Tamagui 🔗

• Why:

  • A library for creating responsive and beautifully designed UIs with React Native.
  • Simplifies the theming and layout process with a compelling set of tools.

• Usage:

  • Used to create awesome UI and themes.
  • Key point: Streamlines the process of building responsive and visually consistent UIs.

4. SWR 🔗

• Why:

  • Offers powerful data fetching and caching capabilities, making it easy to handle remote data.
  • Efficiently manages caching, revalidation, focus tracking, and more.

• Usage:

  • Fetch data from APIs with minimal configuration and manage cache automatically.
  • Key point: Simplifies handling of remote data fetching while enhancing performance.

5. Expo Router 🔗

• Why:

  • Simplifies navigation in React Native projects by using a file-based routing system, similar to popular web frameworks.
  • Enhances maintainability and scalability of navigation logic.

• Usage:

  • Define routes in a more intuitive way using the file structure.
  • Key point: Provides a clean and maintainable way to manage navigation in React Native projects.

6. react-native-gifted-charts 🔗

• Why:

  • Provides beautifully crafted and easy-to-use chart components for React Native.
  • Ideal for creating rich data visualizations without complex implementations.

• Usage:

  • Render various types of charts, such as bar charts, line charts, and pie charts.
  • Key point: Enables the creation of engaging, interactive data visualizations seamlessly.

Running the Project

To start the project, run:

npx expo start

1. Top Gainers, Losers & Actively Traded Stock Screen with Lazzy Loading :

2. Stock Overview Screen & check Stocks Charts Daily, Weekely, Monthly and Yearly:

3. Stock Search Screen by using query + Tab field value :

Screen Recording of the Application

Click here to view the screen recording

Updated Link

Click here to view the updated link

Download Apk here:

Click here to download the apk