A modern, web-based assembly language editor and assembler built with React, TypeScript, and Vite. This project provides an interactive environment for writing, assembling, and learning assembly language programming with a custom instruction set.

• 🖥️ Interactive Code Editor: Write assembly code with syntax highlighting
• ⚡ Real-time Assembly: Convert assembly instructions to binary and hexadecimal
• 💾 Program Management: Save, load, and manage your assembly programs locally
• 📊 Visual Output: View assembled code in multiple formats (binary, hex, instruction table)
• 📚 Learning Resources: Comprehensive documentation and tutorials
• 🎨 Modern UI: Clean, responsive interface built with Tailwind CSS

• Node.js (v18 or higher)
• pnpm (recommended) or npm

1. Clone the repository

   git clone https://github.com/FarhanXTanvir/SAP1
   cd sap1

2. Install dependencies

   If you don't have pnpm installed in your device then install it:

     npm install -g pnpm

   Finally:

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser Navigate to http://localhost:5173 to start using the assembler.

pnpm build

1. Navigate to the Home page to access the code editor
2. Write your assembly code using the supported instruction set
3. Click "Assemble" to convert your code to machine language
4. View the output in binary, hexadecimal, and tabular formats
5. Save your programs for later use with custom titles

LDA 5        ; Load immediate value 5 into accumulator A
LDB 3        ; Load immediate value 3 into accumulator B
ADD          ; Add B to A
STA 10       ; Store result at memory address 10
HLT          ; Halt program execution

You can also initialize memory locations using the mem[] syntax:

mem[0] = 0x0A    ; Set memory address 0 to hexadecimal 0A
mem[1] = 0b1010  ; Set memory address 1 to binary 1010
mem[2] = 15      ; Set memory address 2 to decimal 15

The assembler supports a comprehensive instruction set with both 4-bit and 5-bit opcodes:

The assembler supports multiple operand formats:

• Decimal: LDA 15 (loads decimal 15)
• Hexadecimal: LDA 0xF (loads hexadecimal F = decimal 15)
• Binary: LDA 0b1111 (loads binary 1111 = decimal 15)

• Operand Range: 0-15 (4-bit values)
• Shift Amounts: 0-7 for SHL/SHR operations
• Memory Addresses: 0-255 (8-bit addressing)

src/
├── App.tsx              # Main application component
├── main.tsx             # Application entry point
├── CodeEditor.tsx       # Assembly code editor component
├── Header.tsx           # Navigation header
├── pages/
│   ├── Home.tsx         # Main editor page
│   └── Learn.tsx        # Documentation and tutorials
├── scripts/
│   └── assembler.ts     # Core assembler logic
└── assets/              # Static assets

• Frontend Framework: React 19
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router v7
• Code Quality: ESLint with TypeScript support

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

The project uses ESLint with TypeScript and React-specific rules. Run the linter with:

pnpm lint

# Development build
pnpm dev

# Production build
pnpm build

# Preview production build
pnpm preview

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with modern web technologies for an optimal developer experience
• Inspired by classic assembly language programming and computer architecture concepts
• Designed for educational purposes and learning assembly language fundamentals

Happy Coding! 🎉