Skip to content

Commit 980204f

Browse files
kalyandockalyandoc
authored
Merge pull request #1 from browserstack/new_app
Initial Demo App
2 parents 7c4c42c + fa80676 commit 980204f

33 files changed

+20986
-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: 294 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,294 @@
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+
3. **Install server dependencies:**
64+
```bash
65+
cd server && npm install && cd ..
66+
```
67+
68+
## 🚀 Running the Application
69+
70+
### Development Mode (Recommended)
71+
```bash
72+
npm run dev
73+
```
74+
This starts both frontend (http://localhost:3000) and backend (http://localhost:5000)
75+
76+
### Individual Components
77+
- **Backend only:** `npm run server`
78+
- **Frontend only:** `npm run client`
79+
- **Production:** `npm start`
80+
81+
## 🔗 Complete API Documentation
82+
83+
### Core Endpoints
84+
85+
| Method | Endpoint | Description | Query Parameters |
86+
|--------|----------|-------------|------------------|
87+
| GET | `/api` | API information and endpoints | - |
88+
| GET | `/api/health` | System health and metrics | - |
89+
90+
### User Management
91+
92+
| Method | Endpoint | Description | Parameters |
93+
|--------|----------|-------------|------------|
94+
| GET | `/api/users` | Get all users | `role`, `limit` |
95+
| GET | `/api/users/:id` | Get user by ID | - |
96+
| POST | `/api/users` | Create new user | `name`, `email`, `role` |
97+
| PUT | `/api/users/:id` | Update user | `name`, `email`, `role` |
98+
| DELETE | `/api/users/:id` | Delete user | - |
99+
| GET | `/api/users/paginated` | Paginated users | `page`, `limit` |
100+
| POST | `/api/users/bulk` | Create multiple users | `users[]` |
101+
102+
### Product Management
103+
104+
| Method | Endpoint | Description | Parameters |
105+
|--------|----------|-------------|------------|
106+
| GET | `/api/products` | Get all products | `category`, `minPrice`, `maxPrice`, `sort`, `limit` |
107+
| GET | `/api/products/:id` | Get product by ID | - |
108+
| POST | `/api/products` | Create new product | `name`, `price`, `category`, `stock`, `description` |
109+
110+
### Task Management
111+
112+
| Method | Endpoint | Description | Parameters |
113+
|--------|----------|-------------|------------|
114+
| GET | `/api/tasks` | Get all tasks | `completed`, `priority`, `assignedTo` |
115+
| POST | `/api/tasks` | Create new task | `title`, `priority`, `assignedTo` |
116+
| PUT | `/api/tasks/:id` | Update task | `title`, `completed`, `priority`, `assignedTo` |
117+
118+
### Order Management
119+
120+
| Method | Endpoint | Description | Parameters |
121+
|--------|----------|-------------|------------|
122+
| GET | `/api/orders` | Get all orders | `userId`, `status` |
123+
| POST | `/api/orders` | Create new order | `userId`, `productId`, `quantity` |
124+
125+
### Analytics & Search
126+
127+
| Method | Endpoint | Description | Parameters |
128+
|--------|----------|-------------|------------|
129+
| GET | `/api/analytics` | Get system analytics | - |
130+
| GET | `/api/search` | Search across entities | `q` (query), `type` |
131+
132+
### AI Testing Endpoints
133+
134+
| Method | Endpoint | Description | Parameters |
135+
|--------|----------|-------------|------------|
136+
| GET | `/api/test/slow` | Simulate slow response | `delay` (milliseconds) |
137+
| GET | `/api/test/error/:code` | Generate specific error | HTTP status code |
138+
| GET | `/api/test/large-data` | Generate large dataset | `count` |
139+
| POST | `/api/test/echo` | Echo request data | Any JSON body |
140+
| GET | `/api/test/random` | Generate random data | `type` (string, number, boolean, array, object) |
141+
142+
## 📊 Sample API Calls
143+
144+
### Create User
145+
```bash
146+
curl -X POST http://localhost:5000/api/users \
147+
-H "Content-Type: application/json" \
148+
-d '{"name":"John Doe","email":"john@example.com","role":"admin"}'
149+
```
150+
151+
### Search Products
152+
```bash
153+
curl "http://localhost:5000/api/products?category=Electronics&minPrice=100&sort=price_asc"
154+
```
155+
156+
### Test Error Handling
157+
```bash
158+
curl http://localhost:5000/api/test/error/404
159+
```
160+
161+
### Generate Large Dataset
162+
```bash
163+
curl "http://localhost:5000/api/test/large-data?count=5000"
164+
```
165+
166+
## 🎯 AI Model Testing Scenarios
167+
168+
This application is designed to test various AI model capabilities:
169+
170+
1. **API Integration Testing**: Test API calling and response parsing
171+
2. **Error Handling**: Verify proper error response processing
172+
3. **Data Processing**: Handle large datasets and complex JSON structures
173+
4. **User Interface Interaction**: Test form submissions and UI navigation
174+
5. **Search and Filtering**: Test query construction and result processing
175+
6. **CRUD Operations**: Test all database operations
176+
7. **Performance Testing**: Use slow endpoints and large datasets
177+
8. **Authentication Flow**: Test with different user roles
178+
179+
## 🔧 Technologies Used
180+
181+
### Frontend
182+
- React.js 19+ with Hooks
183+
- Modern CSS with Grid/Flexbox
184+
- Fetch API for HTTP requests
185+
- Responsive design principles
186+
187+
### Backend
188+
- Node.js with Express.js 5+
189+
- CORS middleware
190+
- JSON request/response handling
191+
- In-memory data storage (easily replaceable with database)
192+
193+
### Development Tools
194+
- nodemon for auto-reload
195+
- concurrently for running multiple processes
196+
- VS Code tasks and debugging support
197+
198+
## 📱 Frontend Functionality
199+
200+
### Dashboard Tab
201+
- Real-time analytics and metrics
202+
- System health monitoring
203+
- Overview of all entities
204+
205+
### Users Tab
206+
- Add, view, and delete users
207+
- Role-based user management
208+
- User filtering and search
209+
210+
### Products Tab
211+
- Product catalog management
212+
- Category and price filtering
213+
- Stock level monitoring
214+
215+
### Tasks Tab
216+
- Task creation and management
217+
- Priority-based organization
218+
- User assignment
219+
- Task completion tracking
220+
221+
### Orders Tab
222+
- Order creation and tracking
223+
- User and product selection
224+
- Order status management
225+
226+
### Search Tab
227+
- Global search across all entities
228+
- Real-time search results
229+
- Category-specific filtering
230+
231+
## 🚀 Advanced Features
232+
233+
### Data Relationships
234+
- Orders link users and products
235+
- Tasks can be assigned to users
236+
- Analytics aggregate data across entities
237+
238+
### Validation & Error Handling
239+
- Frontend form validation
240+
- Backend data validation
241+
- Comprehensive error messages
242+
- Conflict detection (duplicate emails)
243+
244+
### Performance Features
245+
- Efficient data filtering
246+
- Pagination support
247+
- Optimized search algorithms
248+
- Memory usage monitoring
249+
250+
## 🔄 Development Workflow
251+
252+
1. Start development servers: `npm run dev`
253+
2. Frontend auto-reloads on file changes
254+
3. Backend restarts automatically with nodemon
255+
4. Use browser dev tools for frontend debugging
256+
5. Monitor console for API request logs
257+
258+
## 🧪 Testing Guidelines
259+
260+
### Manual Testing
261+
1. Test all CRUD operations through the UI
262+
2. Verify error handling with invalid data
263+
3. Test search functionality across entities
264+
4. Verify responsive design on different screen sizes
265+
266+
### API Testing
267+
1. Use curl or Postman for endpoint testing
268+
2. Test error scenarios with `/api/test/error/:code`
269+
3. Performance test with `/api/test/large-data`
270+
4. Validate request/response with `/api/test/echo`
271+
272+
### AI Model Testing
273+
1. Test API integration capabilities
274+
2. Verify JSON parsing with complex responses
275+
3. Test error recovery and handling
276+
4. Validate search and filter functionality
277+
278+
## 🆘 Troubleshooting
279+
280+
**Common Issues:**
281+
- **Port conflicts**: Ensure ports 3000 and 5000 are available
282+
- **CORS errors**: Check proxy configuration in client/package.json
283+
- **Module errors**: Run `npm install` in both root and client directories
284+
- **API connection**: Verify backend is running on http://localhost:5000
285+
286+
**Development Tips:**
287+
- Use browser Network tab to debug API calls
288+
- Check console logs for detailed error messages
289+
- Use VS Code debugger for backend debugging
290+
- Monitor memory usage with `/api/health` endpoint
291+
292+
## 📝 License
293+
294+
ISC License - Feel free to use this project for testing, learning, and development purposes.

0 commit comments

Comments
 (0)