Skip to content

Commit e20cd99

Browse files
Dave3130Dave3130
committed
initial version
1 parent 7c4c42c commit e20cd99

33 files changed

+20937
-2
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
client/node_modules/
3+
server/node_modules/
4+
app.log

‎README.md‎

Lines changed: 289 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,289 @@
1-
# test-selection-demo-app-browserstack
2-
Test Selection Demo App Browserstack
1+
# Test Selection Demo App Browserstack
2+
A comprehensive full-stack web application built with React.js frontend and Node.js/Express.js backend, designed for AI model testing and demonstration purposes.
3+
4+
## 🚀 Features
5+
6+
### Frontend Features
7+
- **Multi-Tab Interface**: Dashboard, Users, Products, Tasks, Orders, and Search
8+
- **Real-time Analytics**: Visual dashboard with key metrics
9+
- **CRUD Operations**: Full Create, Read, Update, Delete functionality
10+
- **Advanced Search**: Cross-entity search with filtering
11+
- **Responsive Design**: Mobile-friendly interface
12+
- **Interactive UI**: Dynamic forms, modals, and real-time updates
13+
14+
### Backend Features
15+
- **RESTful API**: Complete REST endpoints with proper HTTP methods
16+
- **Data Management**: Users, Products, Tasks, Orders with relationships
17+
- **Advanced Filtering**: Query parameters for sorting, pagination, filtering
18+
- **Bulk Operations**: Create multiple records simultaneously
19+
- **Error Handling**: Comprehensive error responses with proper status codes
20+
- **Test Endpoints**: Special endpoints for AI model testing scenarios
21+
22+
### AI Testing Features
23+
- **Slow Response Simulation**: Test timeout handling
24+
- **Error Code Generation**: Test error handling (400, 401, 403, 404, 500)
25+
- **Large Data Sets**: Generate large JSON responses for performance testing
26+
- **Echo Endpoint**: Return request data for debugging
27+
- **Random Data Generation**: Various data types for testing
28+
- **Pagination**: Test pagination scenarios
29+
30+
## 📁 Enhanced Project Structure
31+
32+
```
33+
├── client/ # React frontend
34+
│ ├── public/
35+
│ ├── src/
36+
│ │ ├── App.js # Main React component with tabs
37+
│ │ ├── App.css # Enhanced styling
38+
│ │ └── index.js # Entry point
39+
│ └── package.json # Client dependencies
40+
├── server/ # Express backend
41+
│ └── index.js # Enhanced server with multiple endpoints
42+
├── .github/
43+
│ └── copilot-instructions.md # AI assistant instructions
44+
├── .vscode/
45+
│ └── tasks.json # VS Code tasks
46+
├── package.json # Root package.json with scripts
47+
├── .gitignore # Git ignore file
48+
└── README.md # This file
49+
```
50+
51+
## 🛠️ Installation & Setup
52+
53+
1. **Install root dependencies:**
54+
```bash
55+
npm install
56+
```
57+
58+
2. **Install client dependencies:**
59+
```bash
60+
cd client && npm install && cd ..
61+
```
62+
63+
## 🚀 Running the Application
64+
65+
### Development Mode (Recommended)
66+
```bash
67+
npm run dev
68+
```
69+
This starts both frontend (http://localhost:3000) and backend (http://localhost:5000)
70+
71+
### Individual Components
72+
- **Backend only:** `npm run server`
73+
- **Frontend only:** `npm run client`
74+
- **Production:** `npm start`
75+
76+
## 🔗 Complete API Documentation
77+
78+
### Core Endpoints
79+
80+
| Method | Endpoint | Description | Query Parameters |
81+
|--------|----------|-------------|------------------|
82+
| GET | `/api` | API information and endpoints | - |
83+
| GET | `/api/health` | System health and metrics | - |
84+
85+
### User Management
86+
87+
| Method | Endpoint | Description | Parameters |
88+
|--------|----------|-------------|------------|
89+
| GET | `/api/users` | Get all users | `role`, `limit` |
90+
| GET | `/api/users/:id` | Get user by ID | - |
91+
| POST | `/api/users` | Create new user | `name`, `email`, `role` |
92+
| PUT | `/api/users/:id` | Update user | `name`, `email`, `role` |
93+
| DELETE | `/api/users/:id` | Delete user | - |
94+
| GET | `/api/users/paginated` | Paginated users | `page`, `limit` |
95+
| POST | `/api/users/bulk` | Create multiple users | `users[]` |
96+
97+
### Product Management
98+
99+
| Method | Endpoint | Description | Parameters |
100+
|--------|----------|-------------|------------|
101+
| GET | `/api/products` | Get all products | `category`, `minPrice`, `maxPrice`, `sort`, `limit` |
102+
| GET | `/api/products/:id` | Get product by ID | - |
103+
| POST | `/api/products` | Create new product | `name`, `price`, `category`, `stock`, `description` |
104+
105+
### Task Management
106+
107+
| Method | Endpoint | Description | Parameters |
108+
|--------|----------|-------------|------------|
109+
| GET | `/api/tasks` | Get all tasks | `completed`, `priority`, `assignedTo` |
110+
| POST | `/api/tasks` | Create new task | `title`, `priority`, `assignedTo` |
111+
| PUT | `/api/tasks/:id` | Update task | `title`, `completed`, `priority`, `assignedTo` |
112+
113+
### Order Management
114+
115+
| Method | Endpoint | Description | Parameters |
116+
|--------|----------|-------------|------------|
117+
| GET | `/api/orders` | Get all orders | `userId`, `status` |
118+
| POST | `/api/orders` | Create new order | `userId`, `productId`, `quantity` |
119+
120+
### Analytics & Search
121+
122+
| Method | Endpoint | Description | Parameters |
123+
|--------|----------|-------------|------------|
124+
| GET | `/api/analytics` | Get system analytics | - |
125+
| GET | `/api/search` | Search across entities | `q` (query), `type` |
126+
127+
### AI Testing Endpoints
128+
129+
| Method | Endpoint | Description | Parameters |
130+
|--------|----------|-------------|------------|
131+
| GET | `/api/test/slow` | Simulate slow response | `delay` (milliseconds) |
132+
| GET | `/api/test/error/:code` | Generate specific error | HTTP status code |
133+
| GET | `/api/test/large-data` | Generate large dataset | `count` |
134+
| POST | `/api/test/echo` | Echo request data | Any JSON body |
135+
| GET | `/api/test/random` | Generate random data | `type` (string, number, boolean, array, object) |
136+
137+
## 📊 Sample API Calls
138+
139+
### Create User
140+
```bash
141+
curl -X POST http://localhost:5000/api/users \
142+
-H "Content-Type: application/json" \
143+
-d '{"name":"John Doe","email":"john@example.com","role":"admin"}'
144+
```
145+
146+
### Search Products
147+
```bash
148+
curl "http://localhost:5000/api/products?category=Electronics&minPrice=100&sort=price_asc"
149+
```
150+
151+
### Test Error Handling
152+
```bash
153+
curl http://localhost:5000/api/test/error/404
154+
```
155+
156+
### Generate Large Dataset
157+
```bash
158+
curl "http://localhost:5000/api/test/large-data?count=5000"
159+
```
160+
161+
## 🎯 AI Model Testing Scenarios
162+
163+
This application is designed to test various AI model capabilities:
164+
165+
1. **API Integration Testing**: Test API calling and response parsing
166+
2. **Error Handling**: Verify proper error response processing
167+
3. **Data Processing**: Handle large datasets and complex JSON structures
168+
4. **User Interface Interaction**: Test form submissions and UI navigation
169+
5. **Search and Filtering**: Test query construction and result processing
170+
6. **CRUD Operations**: Test all database operations
171+
7. **Performance Testing**: Use slow endpoints and large datasets
172+
8. **Authentication Flow**: Test with different user roles
173+
174+
## 🔧 Technologies Used
175+
176+
### Frontend
177+
- React.js 19+ with Hooks
178+
- Modern CSS with Grid/Flexbox
179+
- Fetch API for HTTP requests
180+
- Responsive design principles
181+
182+
### Backend
183+
- Node.js with Express.js 5+
184+
- CORS middleware
185+
- JSON request/response handling
186+
- In-memory data storage (easily replaceable with database)
187+
188+
### Development Tools
189+
- nodemon for auto-reload
190+
- concurrently for running multiple processes
191+
- VS Code tasks and debugging support
192+
193+
## 📱 Frontend Functionality
194+
195+
### Dashboard Tab
196+
- Real-time analytics and metrics
197+
- System health monitoring
198+
- Overview of all entities
199+
200+
### Users Tab
201+
- Add, view, and delete users
202+
- Role-based user management
203+
- User filtering and search
204+
205+
### Products Tab
206+
- Product catalog management
207+
- Category and price filtering
208+
- Stock level monitoring
209+
210+
### Tasks Tab
211+
- Task creation and management
212+
- Priority-based organization
213+
- User assignment
214+
- Task completion tracking
215+
216+
### Orders Tab
217+
- Order creation and tracking
218+
- User and product selection
219+
- Order status management
220+
221+
### Search Tab
222+
- Global search across all entities
223+
- Real-time search results
224+
- Category-specific filtering
225+
226+
## 🚀 Advanced Features
227+
228+
### Data Relationships
229+
- Orders link users and products
230+
- Tasks can be assigned to users
231+
- Analytics aggregate data across entities
232+
233+
### Validation & Error Handling
234+
- Frontend form validation
235+
- Backend data validation
236+
- Comprehensive error messages
237+
- Conflict detection (duplicate emails)
238+
239+
### Performance Features
240+
- Efficient data filtering
241+
- Pagination support
242+
- Optimized search algorithms
243+
- Memory usage monitoring
244+
245+
## 🔄 Development Workflow
246+
247+
1. Start development servers: `npm run dev`
248+
2. Frontend auto-reloads on file changes
249+
3. Backend restarts automatically with nodemon
250+
4. Use browser dev tools for frontend debugging
251+
5. Monitor console for API request logs
252+
253+
## 🧪 Testing Guidelines
254+
255+
### Manual Testing
256+
1. Test all CRUD operations through the UI
257+
2. Verify error handling with invalid data
258+
3. Test search functionality across entities
259+
4. Verify responsive design on different screen sizes
260+
261+
### API Testing
262+
1. Use curl or Postman for endpoint testing
263+
2. Test error scenarios with `/api/test/error/:code`
264+
3. Performance test with `/api/test/large-data`
265+
4. Validate request/response with `/api/test/echo`
266+
267+
### AI Model Testing
268+
1. Test API integration capabilities
269+
2. Verify JSON parsing with complex responses
270+
3. Test error recovery and handling
271+
4. Validate search and filter functionality
272+
273+
## 🆘 Troubleshooting
274+
275+
**Common Issues:**
276+
- **Port conflicts**: Ensure ports 3000 and 5000 are available
277+
- **CORS errors**: Check proxy configuration in client/package.json
278+
- **Module errors**: Run `npm install` in both root and client directories
279+
- **API connection**: Verify backend is running on http://localhost:5000
280+
281+
**Development Tips:**
282+
- Use browser Network tab to debug API calls
283+
- Check console logs for detailed error messages
284+
- Use VS Code debugger for backend debugging
285+
- Monitor memory usage with `/api/health` endpoint
286+
287+
## 📝 License
288+
289+
ISC License - Feel free to use this project for testing, learning, and development purposes.

0 commit comments

Comments
 (0)