diff --git a/QWEN.md b/QWEN.md index c34fb7c..8430e7a 100644 --- a/QWEN.md +++ b/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,28 +118,74 @@ 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 @@ -131,11 +193,14 @@ CISE_SPEED/ - 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 @@ -143,7 +208,8 @@ 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 \ No newline at end of file diff --git a/README.md b/README.md index b1ad15f..3b724b6 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,264 @@ -# CISE_SPEED +# CISE_SPEED - Software Practice Empirical Evidence Database (SPEED) -Software Practice Empirical Evidence Database (SPEED), a searchable database of evidence about different claims about different SE practices +A full-stack web application designed as a searchable database of evidence about different claims regarding various Software Engineering (SE) practices. This platform allows researchers and practitioners to access, submit, and evaluate empirical evidence related to software engineering methodologies, tools, and practices. + +![CISE_SPEED Screenshot](./images/cise_speed_overview.png "CISE_SPEED Application Overview") + +## 🚀 Features + +- **Article Submission**: Users can submit articles with empirical evidence about SE practices +- **Search Functionality**: Comprehensive search to find relevant evidence and studies +- **Rating System**: Users can rate articles to provide quality feedback +- **User Authentication**: Secure login/registration with role-based access +- **Role-based Access Control**: Different permissions for regular users, moderators, and administrators +- **Admin Dashboard**: Administrative tools for managing users and content +- **Moderation Queue**: Review system for submitted articles before publication +- **Duplicate Detection**: Automated system to identify potential duplicate submissions +- **Responsive Design**: Works seamlessly across devices and screen sizes + +Here are visual representations of key features: + +![Article Submission Form](./images/submission_form.png "Article Submission Form") +![Search Interface](./images/search_interface.png "Search Interface") +![Admin Dashboard](./images/admin_dashboard.png "Admin Dashboard") +![Moderator Queue](./images/moderator_queue.png "Moderator Queue Interface") + +## 🛠️ Tech Stack + +The application follows a modern full-stack architecture: + +![System Architecture](./images/system_architecture.png "System Architecture Diagram") + +### Frontend +- **Next.js** (15.5.3) - React-based framework +- **React** (19.1.0) - UI library +- **TypeScript** (5.x) - Type safety +- **Tailwind CSS** (v4) - Utility-first CSS framework +- **Sass** - CSS extension language +- **CSS Modules** - Component-scoped styling +- **Formik & Yup** - Form management and validation +- **React Hook Form** - Alternative form management +- **React Icons** - UI icons +- **Next-Auth** - Authentication solution + +### Backend +- **NestJS** (11.x) - Node.js framework +- **TypeScript** (5.x) - Type safety +- **MongoDB** - NoSQL database +- **Mongoose** - ODM (Object Document Mapper) +- **JWT** - Authentication tokens +- **BCrypt** - Password hashing +- **Nodemailer** - Email functionality +- **Class-validator & Class-transformer** - Validation +- **Jest** - Testing framework + +## 📋 Prerequisites + +- Node.js (v18 or higher) +- npm or yarn +- MongoDB (local instance or cloud service like MongoDB Atlas) + +## 🛠️ Installation & Setup + +### 1. Clone the Repository + +```bash +git clone https://github.com/your-username/CISE_SPEED.git +cd CISE_SPEED +``` + +### 2. Set Up Environment Variables + +Create a `.env` file in the `backend` directory with the following variables: + +```env +DB_URI=mongodb://localhost:27017/cise_speed +JWT_SECRET=your-super-secret-jwt-key +JWT_EXPIRES_IN=24h +PORT=8082 +FRONTEND_URL=http://localhost:3000 +``` + +For the frontend, create a `.env.local` file in the `frontend` directory: + +```env +NEXTAUTH_URL=http://localhost:3000 +NEXTAUTH_SECRET=your-next-auth-secret +BACKEND_URL=http://localhost:8082 +``` + +### 3. Install Dependencies + +```bash +# Install backend dependencies +cd backend +npm install + +# Install frontend dependencies +cd ../frontend +npm install +``` + +### 4. Start the Application + +```bash +# Terminal 1: Start the backend server +cd backend +npm run start:dev + +# Terminal 2: Start the frontend server +cd frontend +npm run dev +``` + +The application will be available at [http://localhost:3000](http://localhost:3000) + +## 🔧 Running in Production + +### Backend Production Build + +```bash +cd backend +npm run build +npm run start:prod +``` + +### Frontend Production Build + +```bash +cd frontend +npm run build +npm start +``` + +## 🧪 Testing + +### Backend Tests + +```bash +# Run unit tests +cd backend +npm run test + +# Run end-to-end tests +npm run test:e2e + +# Run tests in watch mode +npm run test:watch + +# Generate coverage report +npm run test:cov +``` + +### Frontend Tests + +```bash +# Run tests +cd frontend +npm run test + +# Run tests in watch mode +npm run test:watch + +# Generate coverage report +npm run test:coverage +``` + +## 🏗️ Project Structure + +``` +CISE_SPEED/ +├── backend/ # NestJS API server +│ ├── src/ +│ │ ├── api/ # API modules (article, user) +│ │ │ ├── article/ # Article management +│ │ │ └── user/ # User management and auth +│ │ ├── 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/ +│ │ ├── components/ # React components +│ │ ├── contexts/ # React contexts (AuthContext) +│ │ ├── hooks/ # Custom React hooks +│ │ ├── pages/ # Next.js pages +│ │ ├── styles/ # Sass stylesheets and CSS modules +│ │ ├── types/ # TypeScript type definitions +│ │ └── utils/ # Utility functions +│ └── package.json +└── README.md +``` + +## 📖 Usage + +### User Registration & Authentication +1. Visit the application homepage +2. Click on "Register" to create an account +3. Use your credentials to log in + +![Registration Page](./images/registration_page.png "User Registration Page") + +### Submitting Articles +1. Log in to your account +2. Navigate to the "Submit Article" page +3. Fill out the comprehensive form with article details +4. Submit for review + +![Article Submission](./images/submission_form.png "Article Submission Process") + +### Searching Evidence +1. Use the search page to find articles by keywords, authors, or topics +2. Filter results by various criteria +3. Read and rate articles based on their quality and relevance + +![Search Results](./images/search_results.png "Search Results Interface") + +### Administration & Moderation +- Admins can manage users and content via the admin dashboard +- Moderators can review submitted articles in the moderation queue + +![Admin Interface](./images/admin_interface.png "Admin Management Interface") + +## 🤝 Contributing + +We welcome contributions to the CISE_SPEED project! Here's how you can help: + +1. Fork the repository +2. Create a feature branch (`git checkout -b feature/amazing-feature`) +3. Make your changes +4. Commit your changes (`git commit -m 'Add amazing feature'`) +5. Push to the branch (`git push origin feature/amazing-feature`) +6. Open a Pull Request + +### Development Guidelines + +- Follow the TypeScript/JavaScript style guide used in the project +- Write tests for new functionality +- Maintain backward compatibility when possible +- Update documentation as needed +- Use meaningful commit messages + +## 🐛 Issues & Support + +If you encounter any issues or have questions about the project: + +1. Check the existing [Issues](https://github.com/your-username/CISE_SPEED/issues) to see if it's already reported +2. If not, open a new issue with detailed information about the problem +3. For feature requests, please open an issue describing the proposed feature + +## 📄 License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. + +## 🙏 Acknowledgments + +- Thanks to all contributors who have helped shape this project +- Special thanks to the open-source community for the amazing tools and libraries used in this project +- The research community for providing valuable feedback on the platform + +## 📞 Contact + +For questions or support regarding CISE_SPEED, please open an issue in the repository. \ No newline at end of file diff --git a/images/admin_dashboard.png b/images/admin_dashboard.png new file mode 100644 index 0000000..e0029dd Binary files /dev/null and b/images/admin_dashboard.png differ diff --git a/images/admin_interface.png b/images/admin_interface.png new file mode 100644 index 0000000..0e29866 Binary files /dev/null and b/images/admin_interface.png differ diff --git a/images/cise_speed_overview.png b/images/cise_speed_overview.png new file mode 100644 index 0000000..6f4baab Binary files /dev/null and b/images/cise_speed_overview.png differ diff --git a/images/moderator_queue.png b/images/moderator_queue.png new file mode 100644 index 0000000..d2e45e1 Binary files /dev/null and b/images/moderator_queue.png differ diff --git a/images/registration_page.png b/images/registration_page.png new file mode 100644 index 0000000..64ebf5a Binary files /dev/null and b/images/registration_page.png differ diff --git a/images/search_interface.png b/images/search_interface.png new file mode 100644 index 0000000..9488ef1 Binary files /dev/null and b/images/search_interface.png differ diff --git a/images/search_results.png b/images/search_results.png new file mode 100644 index 0000000..fe85782 Binary files /dev/null and b/images/search_results.png differ diff --git a/images/submission_form.png b/images/submission_form.png new file mode 100644 index 0000000..f8470eb Binary files /dev/null and b/images/submission_form.png differ diff --git a/images/system_architecture.png b/images/system_architecture.png new file mode 100644 index 0000000..ce8466b Binary files /dev/null and b/images/system_architecture.png differ