Skip to content

Latest commit

 

History

History
154 lines (106 loc) · 5.02 KB

README.md

File metadata and controls

154 lines (106 loc) · 5.02 KB
Raw

Staking Rewards Frontend accounting-app-logo

Table of Contents

Introduction

The Staking Rewards Frontend is a web-based application that allows users to create and manage spreadsheets. It provides functionality similar to popular spreadsheet software, such as creating cells, entering formulas, and performing calculations.

Features

  • Create, edit, and delete cells in a grid-based spreadsheet.
  • Support for mathematical calculations using formulas.
  • Automatic recalculation of dependent cells when a value changes.
  • Save and load spreadsheet data.
  • Auto-save functionality to persist changes periodically.
  • Error handling for invalid formulas and circular dependencies.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Vite A build tool that provides faster and leaner development experience
  • TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
  • Math.js: A library for mathematical calculations and expressions.
  • Axios: A promise-based HTTP client for making API requests.
  • React Router: A library for routing and navigation in React applications.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.

Directory Structure

Here is an overview of the project's directory structure:

  • src/ # Source code directory
    • assets/ # Project assets
    • components/ # Reusable components
    • containers/ # Application pages
    • libs/ # Library functions
    • styles/ # Project styling files
    • utils/ # Utility functions
    • App.tsx # Main component
    • main.tsx # Main entry point
  • public/ # Static assets
  • package.json # Project configuration
  • README.md # Project documentation

Getting Started

Follow the instructions below to get a local copy of the project up and running on your machine.

Prerequisites

  • Node.js: Install Node.js from the official website.

Installation

  1. Clone the repository:

    git clone https://github.com/sstefdev/staking-rewards-task

  2. Navigate to the project directory:

    cd <project_directory>

  3. Install project dependencies:

    npm install

  4. Start the development server:

    npm run dev

  5. Open your web browser and access the application at http://localhost:3000.

Usage

  • Upon opening the application, you will see a grid-based spreadsheet interface.
  • Click on any cell to edit its value. You can enter numbers, text, or formulas starting with the "=" sign.
  • Formulas can include mathematical operations, cell references, and functions provided by the application.
  • Changes are automatically saved periodically.
  • The application will recalculate dependent cells whenever a referenced cell changes.
  • Errors will be displayed if there are circular dependencies or invalid formulas.

Building for Production

  • To create a production-ready build of your application, run the following command:

    npm run build

    This command builds your application and generates optimized production assets in the dist directory.

  • You can preview the production build locally by running:

    npm run preview

    This command starts a server to serve the production build, allowing you to test and verify the build locally before deployment.

Additional Commands

  • Linting: Run ESLint to analyze and enforce code quality:

    npm run lint

  • Formatting: Run Prettier to format your code according to the defined rules:

    npm run prettier

Docker

This repository includes a Dockerfile that can be used to containerize the application for deployment. The Dockerfile sets up the build environment, installs the application dependencies, builds the application, and creates a lightweight production image using serve to serve the static files.

To use the Dockerfile, follow these steps:

  1. Build the Docker image by running the following command in the terminal:

    docker build -t staking-rewards-task .

  2. Once the image is built, you can run a container from it using the following command:

    docker run -d -p 3000:3000 staking-rewards-task

The application will be accessible at http://localhost:3000 within your Docker environment.

Note: Ensure that you have Docker installed and running on your machine before running the above commands.