A modern Point of Sale (POS) application built with React, TypeScript and Tailwind CSS
- 6 Customizable Themes: Modern Lime, Ocean Blue, Sunset Orange, Royal Purple, Emerald Forest, Rose Gold
- Real-time color changes across the entire interface
- Adaptive logo with dynamic CSS filters
- 5 Available Languages: Spanish, English, Italian, French, German
- Intuitive selector with country flags
- Complete translations including POS-specific terminology
- Configurable Tips: 0%, 5%, 10%, 25%, 50%, 100%
- Customizable Discounts: 0%, 5%, 10%, 15%, 20%, 25%
- Automatic calculations for subtotals, discounts and totals
- Thermal printer ticket with authentic formatting
- Adaptive interface for desktop, tablet and mobile
- Dynamic grid that adjusts to screen size
- Optimized user experience on all devices
// Main technologies used
const techStack = {
framework: "React 18.3.1",
language: "TypeScript 5.5.3",
styling: "Tailwind CSS 3.4.17",
bundler: "Vite 5.0+",
routing: "React Router DOM 7.6.3"
}// Implementation with useReducer to handle order state
const [state, dispatch] = useReducer(orderReducer, initialState)
// Reducer actions
type OrderActions =
| { type: 'add-item'; payload: { item: MenuItem } }
| { type: 'remove-item'; payload: { id: number } }
| { type: 'clear-order' }
| { type: 'update-tip'; payload: { tip: number } }
| { type: 'update-discount'; payload: { discount: number } }// Dynamic theme configuration
const TEMPLATES = [
{
id: 'modern',
name: 'Modern Lime',
icon: '🌟',
colors: {
primary: 'from-lime-600 to-yellow-500',
primaryHover: 'from-lime-700 to-yellow-600',
bg: 'from-lime-50 via-yellow-50 to-lime-50',
border: 'border-lime-200',
text: 'text-lime-600'
}
}
// ... more templates
] as const- Node.js >= 18.0.0
- npm >= 8.0.0
# Clone the repository
git clone https://github.com/firedevelop/POSplus.git
# Navigate to directory
cd POSplus
# Install dependencies
npm install
# Start development server
npm run dev{
"scripts": {
"dev": "vite", // Development server
"build": "tsc -b && vite build", // Production build
"lint": "eslint .", // Code linting
"preview": "vite preview" // Build preview
}
}src/
├── components/ # Reusable components
│ ├── Header.tsx # Main navigation
│ ├── MenuItem.tsx # Product card
│ ├── OrderContents.tsx # Order content
│ └── ...
├── data/ # Menu data
│ └── menu/
│ ├── es-ES.ts # Spanish menu
│ ├── en-US.ts # English menu
│ └── ...
├── i18n/ # Internationalization
│ ├── es-ES.ts # Spanish translations
│ ├── en-US.ts # English translations
│ └── ...
├── pages/ # Application pages
├── reducers/ # State management
├── types/ # TypeScript definitions
└── App.tsx # Main component
// Reducer pattern for complex state handling
const orderReducer = (state: OrderState, action: OrderActions): OrderState => {
switch (action.type) {
case 'add-item':
const existingItem = state.order.find(item => item.id === action.payload.item.id)
if (existingItem) {
return {
...state,
order: state.order.map(item =>
item.id === action.payload.item.id
? { ...item, quantity: item.quantity + 1 }
: item
)
}
}
return {
...state,
order: [...state.order, { ...action.payload.item, quantity: 1 }]
}
// ... more cases
}
}// Template system with TypeScript
type Template = {
id: string
name: string
icon: string
colors: {
primary: string
primaryHover: string
bg: string
border: string
text: string
}
}
// Dynamic style application
const dynamicStyles = `bg-gradient-to-r ${template?.colors?.primary}`// Typed translation structure
interface Translations {
menu: string
home: string
contact: string
ticket: {
title: string
header: string
subtotal: string
total: string
}
}- ✅ Add/remove products with one click
- ✅ Automatic quantities when adding duplicate products
- ✅ Real-time subtotal calculations
- ✅ Percentage discount system
- ✅ Configurable tips
- ✅ Authentic thermal printer format
- ✅ Automatic ticket numbering
- ✅ Detailed product information
- ✅ Tax and total calculations
- ✅ Print-optimized design
- ✅ 6 predefined color themes
- ✅ Default template configuration
- ✅ Automatic UI adaptation
- ✅ Dynamic logo color changes
Perfect for pizzerias, cafes and restaurants that need a modern and easy-to-use POS system.
Adaptable for small and medium stores that require discount and tip calculations.
Intuitive interface ideal for self-service systems and interactive kiosks.
// In src/App.tsx
const DEFAULT_TEMPLATE: TemplateId = 'ocean' // Change here// 1. Create file in src/i18n/
// 2. Add to LANGS array in App.tsx
const LANGS = [
{ code: 'pt-BR', flag: 'https://flagcdn.com/br.svg', label: 'Português' }
]// In src/data/menu/
export const menu = {
pizzas: [
{
id: 1,
name: "Margherita",
price: 12.99,
image: "/images/pizza-001.webp",
description: "Tomato, mozzarella and fresh basil"
}
]
}- ⚡ Optimized build with Vite for fast loading
- 🔄 Lazy loading of components and routes
- 📱 Responsive design with optimized breakpoints
- 🎨 Optimized CSS with Tailwind CSS purging
- 🧹 Clean code with ESLint and TypeScript
Contributions are welcome! If you want to improve this project:
- Fork the project
- Create a feature branch (
git checkout -b feature/new-feature) - Commit your changes (
git commit -am 'Add new feature') - Push to the branch (
git push origin feature/new-feature) - Open a Pull Request
fireDevelop
- 🌐 Website
⭐ If you like this project, give it a star on GitHub! ⭐
This project is under the MIT License. See the LICENSE file for more details.
Photo by Tuqa Nabi on Unsplash
Photo by Aurélien Lemasson-Théobald on Unsplash
Photo by amirali mirhashemian on Unsplash
Photo by Louis Hansel on Unsplash
Photo by Louis Hansel on Unsplash
Photo by Alan Hardman on Unsplash
Photo by Saahil Khatkhate on Unsplash
Photo by Saundarya Srinivasan on Unsplash
Photo by Masimo Grabar on Unsplash
Photo by Jonas Kakaroto on Unsplash
Photo by Shourav Sheikh on Unsplash
Photo by Hybrid Storytellers on Unsplash
Photo by Fotografía de Alimentos on Unsplash
Photo by Ömer Taha Çetin on Unsplash
Photo by The Fry Family Food Co. on Unsplash
Photo by FAYYAZ KH on Unsplash
Photo by Karina B. on Unsplash
Photo by Anil Sharma on Unsplash
Photo by Whitney Wright on Unsplash
Photo by LOGAN WEAVER | @LGNWVR on Unsplash
Photo by Edward Howell on Unsplash
Photo by Toa Heftiba on Unsplash
Photo by Hogir saeed on Unsplash
Photo by Giorgi Iremadze on Unsplash
Photo by ShengGeng Lin on Unsplash
Photo by ShengGeng Lin on Unsplash
Photo by Edward Howell on Unsplash
Photo by Kobby Mendez on Unsplash
Photo by Shivansh Sethi on Unsplash
Photo by Emile Mbunzama on Unsplash
Photo by Maryam Abubakar on Unsplash
Photo by Heather Barnes on Unsplash
Photo by Diliara Garifullina on Unsplash
Photo by Nahima Aparicio on Unsplash
Photo by Alex Lvrs on Unsplash
Photo by luisana zerpa on Unsplash