Striga Account Management Frontend

A React-based frontend application for managing Striga accounts, built with TypeScript and Tailwind CSS.

Features

• Account registration and login
• Real-time balance updates
• Deposit and withdrawal operations
• Transaction history with pagination
• Form validation
• Loading indicators
• Toast notifications
• Responsive design

Tech Stack

• React 18
• TypeScript
• Tailwind CSS
• Formik & Yup for form validation
• React Router for navigation
• Axios for API requests
• Socket.IO for real-time updates
• React Hot Toast for notifications
• React Spinners for loading states
• Heroicons for icons

Getting Started

1. Clone the repository

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory with:

   REACT_APP_API_URL=http://localhost:5000/api
   

4. Start the development server:

   npm start

The application will be available at http://localhost:3000.

Environment Variables

• REACT_APP_API_URL: URL of the backend API (default: http://localhost:5000/api)

Available Scripts

• npm start: Runs the app in development mode
• npm test: Launches the test runner
• npm run build: Builds the app for production
• npm run eject: Ejects from Create React App

Project Structure

src/
├── pages/          # Page components
│   ├── Login.tsx
│   └── Dashboard.tsx
├── services/       # API services
│   └── api.ts
├── utils/          # Utility functions
│   └── validation.ts
├── App.tsx         # Main App component
└── index.tsx       # Entry point

API Integration

The frontend communicates with the backend through:

• RESTful API endpoints for account operations
• WebSocket connection for real-time balance updates

Form Validation

• Account ID validation
• Transaction amount validation
• Real-time error feedback

Styling

The application uses Tailwind CSS for styling with a responsive design that works across different screen sizes.