A comprehensive, interactive simulation of the OSI (Open Systems Interconnection) model
Visualize how data travels through each of the seven layers with detailed animations and explanations
- Overview
- Features
- OSI Layers Explained
- Key Processes Simulated
- Screenshots
- Installation
- Usage
- Contact Form Setup
- Technologies
- Educational Purpose
- Project Structure
- Learn More
- Deployment
- Contributing
- License
- About Roboticela
The OSI Model Simulator is an interactive educational tool designed to help users understand the complex concepts of the OSI (Open Systems Interconnection) reference model. By providing visual representations and step-by-step simulations, this application makes networking concepts more accessible and engaging for students, professionals, and enthusiasts alike.
- 📊 Interactive Visualization - Watch in real-time how your message is processed through each of the seven OSI layers with detailed animations
- 📝 Comprehensive Layer Information - Explore detailed explanations of protocols, headers, and processes at each layer with interactive tooltips
↔️ Bidirectional Data Flow - Follow complete data transmission paths from sender to receiver and back with packet tracing- 🎓 Rich Educational Content - Access in-depth explanations about the OSI model, its importance in networking, and real-world applications
- 🔄 Protocol Simulation - Experience realistic simulations of common networking protocols at each layer
- 📱 Responsive Design - Enjoy a seamless experience across desktop, tablet, and mobile devices
- 🎨 Customizable Scenarios - Create and modify network scenarios to observe different behaviors and outcomes
- 📞 Contact Form - Easily reach out to the team with questions or feedback through the integrated contact form
The simulator provides detailed information about all seven layers of the OSI model:
| Layer | Name | Function | Protocols | Data Unit |
|---|---|---|---|---|
| 7 | Application | Provides network services directly to end-users and applications | HTTP, SMTP, FTP, DNS, DHCP | Data |
| 6 | Presentation | Translates, encrypts, and compresses data for the application layer | SSL/TLS, JPEG, MPEG, ASCII | Data |
| 5 | Session | Establishes, manages, and terminates sessions between applications | NetBIOS, RPC, SOCKS | Data |
| 4 | Transport | Provides reliable data transfer, segmentation, and flow control | TCP, UDP, SCTP | Segment |
| 3 | Network | Routes data packets between different networks and handles addressing | IP, ICMP, OSPF, BGP | Packet |
| 2 | Data Link | Provides node-to-node data transfer and error detection on the physical layer | Ethernet, PPP, ARP, VLAN | Frame |
| 1 | Physical | Transmits raw bit stream over physical medium and handles hardware specifications | USB, Bluetooth, IEEE 802.11 | Bit |
The simulator provides detailed visualizations of key networking processes:
-
Data Encapsulation & Decapsulation: Observe how each layer adds its own headers/trailers during transmission and removes them during reception, transforming data as it moves through the stack
-
Connection Establishment: Visualize the TCP three-way handshake process with detailed sequence diagrams and explanations of SYN, SYN-ACK, and ACK packets
-
Routing & Switching: See how packets are routed through networks using various algorithms and how switches make forwarding decisions based on MAC addresses
-
Error Detection & Correction: Learn about error detection mechanisms like checksums, CRC, and parity bits, and see how protocols handle packet loss and corruption
-
Protocol Operations: Understand the specific operations of protocols at each layer with detailed protocol state machines and message exchanges
-
Fragmentation & Reassembly: Observe how large packets are broken down into smaller fragments for transmission and reassembled at the destination
Follow these steps to set up the OSI Model Simulator locally:
# Clone the repository
git clone https://github.com/Roboticela/osi-model-simulator.git
# Navigate to the project directory
cd osi-model-simulator
# Install dependencies
npm install
# Create a .env file based on example.env
cp example.env .env.local
# Update the .env.local file with your SMTP settings
# Edit .env.local
# Run the development server
npm run devOnce the development server is running, open http://localhost:3000 in your browser to access the application.
- Node.js 18.0 or later
- npm 9.0 or later
- SMTP server for contact form functionality (optional)
- Start the Simulator: Navigate to the main page and click on "Start Simulation"
- Enter a Message: Type the message you want to send through the OSI layers
- Configure Options: Select the protocols and options for each layer
- Run Simulation: Click "Send Message" to start the simulation
- Observe the Process: Watch as your message travels through each layer
- Explore Details: Click on any layer to see detailed information about the processes occurring
- Contact Support: Use the contact page to reach out with questions or feedback
The OSI Model Simulator includes a contact form that allows users to send messages directly to the team. To set up the contact form functionality:
- Configure SMTP Settings: Update the
.env.localfile with your SMTP server details:
SMTP_HOST=your-smtp-server.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=your-email@example.com
SMTP_PASSWORD=your-password
SMTP_FROM=OSI Model Simulator <noreply@yourdomain.com>
CONTACT_EMAIL=recipient@yourdomain.com- Environment Variables:
| Variable | Description | Example |
|---|---|---|
SMTP_HOST |
Your SMTP server hostname | smtp.gmail.com |
SMTP_PORT |
SMTP server port | 587 |
SMTP_SECURE |
Whether to use TLS (true/false) | false |
SMTP_USER |
SMTP authentication username | your-email@example.com |
SMTP_PASSWORD |
SMTP authentication password | your-password |
SMTP_FROM |
Sender email address | OSI Model Simulator noreply@yourdomain.com |
CONTACT_EMAIL |
Recipient email address | team@yourdomain.com |
- Testing the Contact Form:
- Navigate to the Contact page at
/contact - Fill out the form with your name, email, and message
- Submit the form to test the email functionality
- Navigate to the Contact page at
Note: For development purposes, you can use services like Mailtrap or Ethereal to test email sending without delivering actual emails.
This project leverages modern web technologies to provide a seamless and interactive experience:
- Next.js: React framework for server-rendered applications, providing optimal performance and SEO benefits
- React: JavaScript library for building dynamic and responsive user interfaces with reusable components
- TypeScript: Strongly typed programming language that builds on JavaScript, adding static type definitions
- Tailwind CSS: Utility-first CSS framework for creating custom designs without leaving your HTML
- Nodemailer: Module for Node.js applications to allow easy email sending
- React Hook Form: Performant, flexible and extensible forms with easy-to-use validation
- Yup: JavaScript schema builder for value parsing and validation
The OSI Model Simulator is designed with education at its core. It serves as a valuable resource for:
- Students learning networking fundamentals in computer science and IT courses
- Educators teaching network architecture and communication protocols
- IT Professionals refreshing their knowledge of networking concepts
- Certification Candidates preparing for networking certifications like CompTIA Network+, CCNA, etc.
The interactive nature of the simulator makes complex networking concepts more accessible and easier to understand through visual learning and hands-on experimentation.
osi-model-simulator/
├── src/
│ ├── app/ # Next.js app router pages
│ ├── components/ # React components
│ │ ├── OSILayer.tsx # Individual OSI layer component
│ │ └── ...
│ └── utils/ # Utility functions
├── public/ # Static assets
└── ...
Expand your knowledge with these resources:
- OSI Model (Wikipedia) - Comprehensive overview of the OSI model
- TCP/IP vs OSI Model - Understanding the differences between models
- Next.js Documentation - Learn about Next.js features and API
- React Documentation - Explore React concepts and tutorials
The application can be easily deployed on Vercel or any other hosting platform that supports Next.js applications.
# Build for production
npm run build
# Start production server
npm startFor detailed deployment instructions, refer to the Next.js deployment documentation.
Contributions are welcome! If you'd like to contribute to this project:
- Fork the repository
- Create a new branch (
git checkout -b feature/amazing-feature) - Make your changes
- 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 is licensed under the MIT License - see the LICENSE file for details.
Roboticela is a forward-thinking technology company specializing in educational software and interactive simulations. Our mission is to make complex technical concepts accessible and engaging for learners at all levels through innovative digital experiences.
Our team combines expertise in software development, educational design, and subject matter knowledge to create tools that transform how people learn technical subjects.
Visit Roboticela for more educational tools and resources.