A modern, responsive web application for performing arithmetic calculations with user authentication, credit management, and operation history. Built with React, TypeScript, and Tailwind CSS.
- User Authentication: Secure login, registration, and session management
- Operations Management: Perform arithmetic operations and generate random strings
- Credit System: Manage account balance and operation costs
- Operation History: View, search, and delete past operations
- Responsive Design: Fully responsive UI with mobile-first approach
- Dark Mode: Toggle between light and dark themes
- Real-time Updates: Live balance updates and operation results
This project follows a modular architecture with clear separation of concerns:
├── src/
│ ├── components/ - Reusable UI components
│ ├── features/ - Feature-specific components and logic
│ ├── layouts/ - Page layouts and navigation
│ ├── sections/ - Page sections and views
│ ├── services/ - API integration and external services
│ ├── hooks/ - Custom React hooks
│ ├── utils/ - Utility functions and helpers
│ └── theme/ - Theme configuration and constants
- Node.js (v18.0.0 or higher)
- npm or yarn
- Docker (optional, for containerized development)
- Modern web browser with ES6+ support
-
Clone the repository
git clone https://github.com/luangrezende/arithmetic-calculator-ui.git cd arithmetic-calculator-ui
-
Install dependencies
npm install # or yarn install
-
Set up environment variables
# Create .env.local file in the root directory cp .env.example .env.local # Edit .env.local with your API configuration # For development environment: VITE_API_BASE_URL=https://your-api-gateway.execute-api.us-east-1.amazonaws.com/dev # For production environment: # VITE_API_BASE_URL=https://your-api-gateway.execute-api.us-east-1.amazonaws.com/prod
-
Start the development server
npm run dev # or yarn dev
The application will be available at http://localhost:3040
.
-
Build the application
npm run build # or yarn build
-
Preview the production build
npm run preview # or yarn preview
docker build -t arithmetic-calculator-ui .
docker run -p 3040:3040 arithmetic-calculator-ui
The application will be accessible at http://localhost:3040
.
arithmetic-calculator-ui/
├── public/ - Static assets
├── src/
│ ├── components/ - Reusable UI components
│ │ ├── modern-button/
│ │ ├── modern-input/
│ │ ├── modern-select/
│ │ └── ...
│ ├── features/ - Feature modules
│ │ ├── auth/ - Authentication features
│ │ └── operation/ - Operation features
│ ├── layouts/ - Layout components
│ │ ├── auth/ - Authentication layout
│ │ └── dashboard/ - Main application layout
│ ├── sections/ - Page sections
│ │ └── operation/ - Operation management
│ ├── services/ - API services
│ │ ├── auth.service.ts
│ │ └── operation.service.ts
│ ├── hooks/ - Custom hooks
│ ├── utils/ - Utilities
│ └── theme/ - Theme configuration
├── .env.example - Environment variables template
├── .eslintrc.cjs - ESLint configuration
├── .prettierignore - Prettier ignore file
├── .gitignore - Git ignore file
├── index.html - Main HTML file
├── package.json - Project dependencies
├── tsconfig.json - TypeScript configuration
├── tailwind.config.js - Tailwind CSS configuration
├── vite.config.ts - Vite configuration
└── README.md - Project documentation
npm run dev
- Start development servernpm run build
- Build for productionnpm run preview
- Preview production buildnpm run lint
- Run ESLintnpm run type-check
- Run TypeScript type checking
- JWT-based authentication with refresh tokens
- Secure session management
- Automatic token renewal
- Protected routes and API calls
- Support for arithmetic operations (addition, subtraction, multiplication, division, square root)
- Random string generation
- Real-time cost calculation
- Operation history with pagination
- Account balance tracking
- Operation cost deduction
- Credit addition functionality
- Real-time balance updates
- Responsive design for all screen sizes
- Dark mode support
- Loading states and error handling
- Toast notifications
- Keyboard navigation support
- Accessibility compliant
The application integrates with the Arithmetic Calculator API:
- Base URL: Configured via
VITE_API_URL
environment variable - Authentication: Bearer token in Authorization header
- Endpoints:
/auth/*
- Authentication endpoints/operation/*
- Operation management/account/*
- Account and balance management
# Run unit tests
npm run test
# Run tests with coverage
npm run test:coverage
# Run tests in watch mode
npm run test:watch
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project uses:
- ESLint for code linting
- Prettier for code formatting
- TypeScript for type safety
- Tailwind CSS for styling
This project is licensed under the MIT License - see the LICENSE file for details.