Visual Circuit Designer
Visual Circuit Designer – is a web-based tool for designing, simulating, and managing digital logic circuits in the browser. It features a drag-and-drop interface, real-time manipulation, and cloud saving, making it ideal for engineers, students, and developers.

📡 Link to our product 📡
📹 Video demo v2 📹

---

💻 Project description 💻

▪️ Project goals and description ▪️

Project Goal

To create a web-based, no-installation-required platform for designing, simulating, and managing digital logic circuits with an intuitive drag-and-drop interface.

Key Features

• Visual Circuit Design – Drag-and-drop logic gates (AND, OR, INPUT, OUTPUT, etc.)
• Real-Time Editing – Rotate, flip, duplicate, and connect components dynamically
• Cloud Saving – Save/load circuits via backend API (preserves structure, inputs, layout)
• User-Friendly UX – Grid snapping, zoom/pan, multi-select (Ctrl + drag), context menus
• No Local Software Needed – Fully browser-based

User Flow

• Auth → Register/login to access saved projects
• Dashboard → View, load, delete, or create new circuits
• Workspace → Build circuits visually, save/load from cloud

Ideal for: Engineers, students, and developers learning or prototyping digital logic.

▪️ Project Context Diagram ▪️

Below you can see a high-level context diagram of Visual Circuit Designer, showing all key stakeholders, external systems and data flows.

Project Context Diagram

Legend

Stakeholders

• Engineer / Student: designs, simulates and saves circuits via the browser UI
• System Admin: manages user accounts and monitors system health

External Systems & Services

• Browser Client (Next.js / React): front-end UI communicating over REST & WebSocket
• Docker Compose: orchestrates all backend & monitoring containers
• API Service (Node.js / Express): central gateway for business logic
• Authentication Service: issues & validates OAuth2 tokens
• Database Service: CRUD interface to PostgreSQL
• Simulation Engine (Python): executes logic simulations
• Circuit DB (PostgreSQL): stores project schemas & metadata
• Cloud Storage (S3-compatible): holds raw project files & exports
• Analytics Service: collects usage events (e.g. Google Analytics)
• Monitoring Stack: Promtail → Loki → Grafana for logging & dashboards

Data Flows

1. User → Browser: UI interaction
2. Browser → API: REST calls / WebSocket messages
3. API → Auth, DB, Sim, S3, Analytics: token validation, data persistence, simulation runs, file storage, telemetry
4. Compose → Services & Monitoring: container startup
5. Promtail → Loki → Grafana: log pipeline; Admin views dashboards

👥 Team Members 👥

The following team members have contributed to the development of Visual Circuit Designer as of 12:03 PM CEST on Saturday, July 19, 2025:

• Iskander Kutlakhmetov - Runner Node
• Nikita Khripunkov - Back-end Developer
• Amir Gabdullin - Back-end Developer
• Islam Gainullin - Front-end Developer
• Ernest Kudakaev - Front-end Developer

For more detailed information about their contributions, please refer to the Development documentation.

▪️ Feature Roadmap ▪️

Stage	Status	Priority
MVP v0	delivered	Must
MVP v1	delivered
Connect Authentication of Users with back-end	done	Must
Dashboard page without functionality	done	Should
Pop-up interactive window with some settings	done	Should
MVP v2	delivered
Save schematic to user account	done	Must
Implement logic of components	done	Must
Implement simulation of program	done	Must
Dashboard functionality (create/search projects)	done	Must
Projects connect to user account	done	Must
MVP v3	in development
Bugs fixing	in process	Should
Implement simulation for more than one output	in process	Should
New I/Os	in process	Should

Priority Definitions

Priority	Description
Must	Critical features without which the release cannot take place
Should	Desirable features that are important to enable when possible
	Optional features or those that are carried over to future versions

▪️ Usage Instructions / Short User Guide ▪️

To launch the MVP, open the deployed app at:

• URL: http://85.198.81.168/
• Note: You can use any data on the registration page — first sign up, then sign in with the same credentials.

---

1. Accessing the Application

1. Open your browser and go to: http://85.198.81.168/
2. Wait for the page to fully load.

---

2. Registering a New User

Important: First create an account via Sign up, then log in via Sign in using the same credentials.

1. Click Sign up.
2. Fill out the registration form fields:

• Username
• Email
• Password
• Confirm Password

3. For the MVP you can use any dummy data:

• A fake email (e.g., test@example.com)
• A simple password (e.g., 123456)

4. Click Register / Sign up.
5. You should see a “Registration successful” message.

---

3. Logging In

1. Go to Sign in.
2. Enter the same credentials you used to register:

• Username / Email
• Password

3. Click Log in / Sign in.
4. You will be redirected to the Dashboard.

---

4. Main Navigation

After logging in, you’ll see these sections:

Section	Description
Dashboard	Overview of stats and quick links
Data	List of your items with Create, Read, Update, Delete actions
Settings	Notifications, privacy options, theme settings

---

5. Example: Creating a New Record

1. Navigate to the Data section.
2. Click Create New.
3. Fill in the form fields (title, description, date, status).
4. Click Save.
5. Your new record will appear in the list with edit and delete icons.

---

6. Logging Out

1. In the top-right corner, click your Username (or profile icon).
2. Select Logout.
3. You will be redirected back to the sign-in page.

---

7. Tips & Recommendations

• If you encounter login errors, double-check that you’re entering the exact credentials you registered with.
• Server errors can be inspected in your browser console (F12 → Console).
• Use your browser’s incognito/private mode to clear sessions for testing.
• MVP validation is minimal—feel free to use any test data.

---

🖨️ Usage 🖨️

▪️ Project Installation & Deployment instructions ▪️

If you wish to run the project locally:

1. Clone the repository:

   git clone https://gitlab.pg.innopolis.university/team-45/visual-circuit-designer.git

2. Navigate to the project directory:

   cd project

3. Install dependencies:
   Ensure you have Node.js (v18+) and npm installed.

   npm install

4. Create a .env file (if required):
   Copy the example file and edit environment variables as needed.

   cp .env.example .env

   Edit the .env file to set API endpoints, database URLs, etc.

5. Start the app:

   npm run dev

   The app will be available at http://localhost:3000

▪️ Troubleshooting ▪️

• If you see errors on startup, ensure all environment variables are set correctly in the .env file.
• If port 3000 is busy, set a different port in your .env file (e.g., PORT=4000).
• Make sure you have network access to all required backend services.

---

Hyperlinks to the Documentation

• Architecture
• Development
• Quality Characteristics & Attribute Scenarios
• Quality Assurance Automated tests
• Quality Assurance User tests
• Сontinuous delivery
• Сontinuous integration

All reports and AI usage