docs: update the README and QWEN documents and add project screenshots

QWEN.md

@@ -12,7 +12,7 @@ CISE_SPEED is the "Software Practice Empirical Evidence Database (SPEED)", a ful
 The project follows a modern full-stack architecture with:
 
 - **Backend**: NestJS (Node.js/TypeScript) with MongoDB via Mongoose
-- **Frontend**: Next.js (React/TypeScript) with Tailwind CSS and Sass
+- **Frontend**: Next.js (React/TypeScript) with Tailwind CSS, Sass, and CSS Modules
 - **Authentication**: Next-Auth for frontend, JWT-based system for backend
 - **Database**: MongoDB with Mongoose ODM
 - **API Communication**: REST API endpoints
@@ -21,12 +21,14 @@ The project follows a modern full-stack architecture with:
 
 The backend is built with NestJS and includes:
 
-- API modules for articles, users, and analysis
-- MongoDB integration with Mongoose
+- API modules for articles and users
+- MongoDB integration with Mongoose schemas
 - JWT-based authentication
 - User management (registration, login)
 - Article submission and management features
 - Environment-based configuration
+- Duplicate checking functionality
+- Role-based access control (admin, moderator)
 
 ### Backend Technologies:
 
@@ -35,6 +37,9 @@ The backend is built with NestJS and includes:
 - MongoDB/Mongoose
 - BCrypt for password hashing
 - JWT for authentication
+- Nodemailer for email functionality
+- Class-validator and class-transformer for validation
+- Jest for testing
 
 ### Backend Scripts:
 
@@ -63,21 +68,27 @@ The frontend is built with Next.js and provides:
 
 - Main landing page with database overview
 - User authentication (login/register)
-- Article submission form
+- Article submission form with validation
 - Search functionality
-- Admin and moderator interfaces
+- Admin dashboard for user and content management
+- Moderator interface for article review
 - Navigation bar with authentication context
-- Responsive design with Sass styling
+- Responsive design with Sass styling and CSS Modules
+- Rating system for articles
+- Protected route components
 
 ### Frontend Technologies:
 
-- Next.js 15.x
-- React 19.x
+- Next.js 15.5.3
+- React 19.1.0
 - TypeScript 5.x
 - Tailwind CSS v4
 - Sass for styling
+- CSS Modules for component-specific styles
 - Formik and Yup for form validation
 - React Hook Form for form management
+- React Icons for UI elements
+- Jest and React Testing Library for testing
 
 ### Frontend Scripts:
 
@@ -94,6 +105,11 @@ npm run start
 
 # Linting
 npm run lint
+
+# Testing
+npm run test          # run tests
+npm run test:watch    # run tests in watch mode
+npm run test:coverage # generate test coverage
 ```
 
 The frontend runs on port 3000 by default and communicates with the backend API running on port 8082.
@@ -102,48 +118,98 @@ The frontend runs on port 3000 by default and communicates with the backend API
 
 ```
 CISE_SPEED/
-├── backend/              # NestJS API server
+├── backend/                      # NestJS API server
+│   ├── src/
+│   │   ├── api/                  # API modules (article, user)
+│   │   │   ├── article/          # Article management
+│   │   │   │   ├── article.controller.ts
+│   │   │   │   ├── article.service.ts
+│   │   │   │   ├── article.schema.ts
+│   │   │   │   └── create-article.dto.ts
+│   │   │   └── user/             # User management and auth
+│   │   │       ├── user.controller.ts
+│   │   │       ├── user.service.ts
+│   │   │       ├── user.schema.ts
+│   │   │       ├── jwt-auth.guard.ts
+│   │   │       ├── admin.guard.ts
+│   │   │       └── user.dto.ts
+│   │   ├── controllers/          # Additional controllers
+│   │   ├── services/             # Additional services
+│   │   ├── app.module.ts         # Main application module
+│   │   └── main.ts               # Entry point
+│   └── package.json
+├── frontend/                     # Next.js web application
+│   ├── public/                   # Static assets
 │   ├── src/
-│   │   ├── api/          # API modules (article, user, analysis)
-│   │   ├── app.module.ts # Main application module
-│   │   └── main.ts       # Entry point
+│   │   ├── components/           # React components
+│   │   │   ├── nav/              # Navigation components
+│   │   │   ├── table/            # Table components
+│   │   │   ├── ArticleRating.tsx
+│   │   │   ├── ConfirmDialog.tsx
+│   │   │   ├── ModeratorQueue.tsx
+│   │   │   ├── PopulatedNavBar.tsx
+│   │   │   ├── ProtectedRoute.tsx
+│   │   │   ├── SearchArticles.tsx
+│   │   │   ├── StarRating.tsx
+│   │   │   ├── SubmissionForm.tsx
+│   │   │   └── SubmitterForm.tsx
+│   │   ├── contexts/             # React contexts (AuthContext)
+│   │   ├── hooks/                # Custom React hooks
+│   │   ├── pages/                # Next.js pages
+│   │   │   ├── admin/            # Admin pages
+│   │   │   ├── articles/         # Article pages
+│   │   │   ├── _app.tsx          # Custom App component
+│   │   │   ├── index.tsx         # Home page
+│   │   │   ├── login.tsx         # Login page
+│   │   │   ├── moderator.tsx     # Moderator page
+│   │   │   ├── ratings.tsx       # Ratings page
+│   │   │   ├── register.tsx      # Registration page
+│   │   │   ├── search.tsx        # Search page
+│   │   │   └── submit.tsx        # Article submission page
+│   │   ├── styles/               # Sass stylesheets and CSS modules
+│   │   ├── types/                # TypeScript type definitions
+│   │   └── utils/                # Utility functions
 │   └── package.json
-└── frontend/             # Next.js web application
-    ├── src/
-    │   ├── components/   # React components
-    │   ├── contexts/     # React contexts (AuthContext)
-    │   ├── pages/        # Next.js pages (index, login, submit, etc.)
-    │   └── styles/       # Sass stylesheets
-    └── package.json
+├── test_duplicate_check.js       # Standalone duplicate checking script
+└── README.md
 ```
 
 ## Key Features
 
-1. **User Authentication**: Registration, login, and role-based access (admin, moderator)
-2. **Article Management**: Submit, search, and review articles with empirical evidence
+1. **User Authentication**: Registration, login, and role-based access (admin, moderator, regular user)
+2. **Article Management**: Submit, search, rate, and review articles with empirical evidence
 3. **Database Integration**: MongoDB-based storage for articles and user data
-4. **Search Functionality**: Searchable database of SE practice evidence
+4. **Search Functionality**: Searchable database of SE practice evidence with filtering
 5. **Role-based UI**: Different interfaces for regular users, moderators, and admins
+6. **Article Rating System**: Users can rate articles to provide quality feedback
+7. **Moderation Queue**: Moderators can review and approve submitted articles
+8. **Admin Dashboard**: Admins can manage users and articles
+9. **Duplicate Checking**: System to identify potential duplicate article submissions
+10. **Protected Routes**: Ensuring proper access control throughout the application
 
 ## Development Conventions
 
 - TypeScript is used throughout both frontend and backend
 - REST API conventions for backend endpoints
 - Component-based architecture in React
 - Context API for state management
-- Sass for complex styling, Tailwind CSS for utility classes
+- Sass and CSS Modules for styling
 - Form validation with Yup and Formik
 - Git-based version control with .gitignore files in both subprojects
 - Design system: Use the unified styling system defined in `design-system.scss` for consistent UI components
 - Component styling: Always use CSS custom properties and predefined class names from the design system when creating new components
+- Testing: Jest for unit and integration tests, React Testing Library for component tests
+- API controllers should validate input using DTOs with class-validator
+- Use guards for authentication and authorization checks
 
 ## Environment Configuration
 
 The application requires environment variables for:
 
 - Database connection (DB_URI)
 - Port configurations
-- Authentication secrets (JWT)
+- Authentication secrets (JWT_SECRET, JWT_EXPIRES_IN)
+- Email configuration (for password reset, if implemented)
 
 ## Building and Running
 
@@ -163,7 +229,9 @@ The application requires environment variables for:
 ## Testing
 
 - Backend: Jest-based unit and e2e tests
-- Frontend: Standard Next.js testing capabilities
+- Frontend: Jest with React Testing Library for unit and integration tests
+- Run `npm run test` in each directory to run tests
+- Run `npm run test:coverage` for frontend to generate test coverage
 
 ## Design System
 
@@ -187,11 +255,15 @@ When creating new components:
 
 - Always use CSS custom properties from the design system (e.g., `var(--primary-600)`, `var(--spacing-md)`)
 - Apply predefined class names from the design system when possible
-- Extend existing classes using Sass `@extend` directive when creating similar components
+- Use CSS Modules for component-specific styling to avoid global CSS conflicts
 - Follow the existing component structure and naming conventions
+- Use `@extend` directive when creating similar components to leverage existing Sass styles
 
 ## Notes
 
-- The application appears to be under active development based on the version numbers and architecture
+- The application is actively developed with regular updates and feature additions
 - The project focuses on creating a repository of empirical evidence for software engineering practices
-- Authentication is required for article submission and administrative functions
+- Authentication is required for article submission, ratings, and administrative functions
+- The project uses both Sass stylesheets and CSS Modules for styling flexibility
+- API endpoints are protected with JWT tokens and role-based access control
+- The application includes automated duplicate checking to maintain data quality