Added More Features

CHANGELOG.md

@@ -0,0 +1,108 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [2.0.0] - Enhanced Version by Mustafa Meco
+
+### Added
+- 🎨 **Monaco Editor Integration**: Professional code editor with syntax highlighting
+  - Auto-language detection
+  - Theme support (light/dark mode)
+  - Code paste functionality
+  - Line numbers and syntax validation
+
+- 💬 **AI-Powered Q&A System**: Interactive conversation about code
+  - Context-aware responses
+  - Conversation history tracking
+  - Follow-up question support
+  - Markdown rendering for responses
+
+- ⚡ **Code Optimization Feature**: AI-powered suggestions
+  - Performance improvements
+  - Readability enhancements
+  - Security recommendations
+
+- 🌙 **Dark/Light Mode**: Complete theme support
+  - Persistent theme storage
+  - Smooth transitions
+  - System preference detection
+  - All components themed
+
+- 📤 **Export Capabilities**:
+  - Copy explanations to clipboard
+  - Export as Markdown files
+  - Formatted output
+
+- 🌐 **Extended Language Support**: 20+ languages
+  - JavaScript, TypeScript, Python, Java
+  - C, C++, C#, Go, Rust
+  - PHP, Ruby, Swift, Kotlin, Scala
+  - Perl, R, MATLAB, SQL
+  - HTML, CSS, Bash, PowerShell
+
+- 📚 **Advanced Explanation Options**:
+  - Beginner/Intermediate/Expert levels
+  - Summary vs Step-by-Step modes
+  - Customizable depth
+
+- ✨ **Animations**: Framer Motion integration
+  - Smooth page transitions
+  - Loading states
+  - Interactive feedback
+
+### Enhanced
+- 🎯 **React 19 Features**: Modern React patterns
+  - `useActionState` for form handling
+  - Server Actions pattern
+  - Improved error boundaries
+
+- 🔒 **Security Improvements**:
+  - Rate limiting (10 requests per day)
+  - Helmet.js security headers
+  - Input validation
+  - CORS configuration
+
+- 🎨 **UI/UX Improvements**:
+  - Responsive grid layouts
+  - Better error handling
+  - Loading states
+  - Clean component architecture
+
+- 📱 **Mobile Responsive**: Full mobile support
+  - Adaptive layouts
+  - Touch-friendly controls
+  - Optimized for all screen sizes
+
+### Fixed
+- ✅ Port configuration (3002 for backend, 5173 for frontend)
+- ✅ CORS default URL (localhost:5173 instead of 3000)
+- ✅ Environment variable documentation
+- ✅ Component organization and structure
+
+### Technical Improvements
+- Upgraded to TailwindCSS v4
+- Added comprehensive error handling
+- Improved API response formatting
+- Better code organization
+- Added environment examples
+- Enhanced documentation
+
+### Configuration
+- Added `.env.example` files for both frontend and backend
+- Updated `.gitignore` to properly handle environment files
+- Fixed port mismatches between client and server
+- Updated CORS configuration for correct frontend URL
+
+## [1.0.0] - Original Version by Tapas Adhikary
+
+### Initial Features
+- Basic code explanation
+- Simple form with textarea
+- Three language support (JavaScript, Python, Java)
+- React 19 integration
+- Express backend
+- OpenAI API integration
+
+---
+
+**Note**: Version 2.0.0 is a significant enhancement of the original project with many new features and improvements while maintaining backward compatibility with the core functionality.

CONTRIBUTING.md

@@ -0,0 +1,166 @@
+# Contributing to CodeSplain
+
+First off, thank you for considering contributing to CodeSplain! It's people like you that make CodeSplain such a great tool.
+
+## Code of Conduct
+
+This project and everyone participating in it is governed by respect and professionalism. Please be kind and courteous.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+Before creating bug reports, please check the issue list as you might find out that you don't need to create one. When you are creating a bug report, please include as many details as possible:
+
+* **Use a clear and descriptive title**
+* **Describe the exact steps to reproduce the problem**
+* **Provide specific examples to demonstrate the steps**
+* **Describe the behavior you observed after following the steps**
+* **Explain which behavior you expected to see instead and why**
+* **Include screenshots if possible**
+* **Include your environment details** (OS, Node version, browser, etc.)
+
+### Suggesting Enhancements
+
+Enhancement suggestions are tracked as GitHub issues. When creating an enhancement suggestion, please include:
+
+* **Use a clear and descriptive title**
+* **Provide a step-by-step description of the suggested enhancement**
+* **Provide specific examples to demonstrate the steps**
+* **Describe the current behavior and explain the behavior you expected to see**
+* **Explain why this enhancement would be useful**
+
+### Pull Requests
+
+* Fill in the required template
+* Follow the coding style used throughout the project
+* Include appropriate test cases if applicable
+* Update documentation as needed
+* End all files with a newline
+
+## Development Setup
+
+1. Fork the repo and create your branch from `main`
+2. Install dependencies:
+   ```bash
+   cd codesplain && npm install
+   cd ../server && npm install
+   ```
+3. Create `.env` files (see `.env.example`)
+4. Make your changes
+5. Test your changes thoroughly
+6. Push to your fork and submit a pull request
+
+## Coding Style
+
+### JavaScript/JSX
+* Use 4 spaces for indentation
+* Use semicolons
+* Use single quotes for strings
+* Use arrow functions where appropriate
+* Use async/await over promises
+* Use destructuring when it improves readability
+
+### React Components
+* Use functional components
+* Use hooks appropriately
+* Keep components small and focused
+* Extract reusable logic into custom hooks
+* Use proper prop types or TypeScript
+
+### CSS/Tailwind
+* Use Tailwind utility classes
+* Follow the dark mode pattern used in the project
+* Keep styles consistent with existing components
+
+## Project Structure
+
+```
+codesplain/
+├── codesplain/          # Frontend
+│   ├── src/
+│   │   ├── actions/     # Server actions
+│   │   ├── components/  # React components
+│   │   └── ...
+│   └── ...
+├── server/              # Backend
+│   ├── server.js        # Express server
+│   └── ...
+└── README.md
+```
+
+## Component Guidelines
+
+When creating new components:
+
+1. Create a new file in `src/components/`
+2. Use functional components with hooks
+3. Handle loading and error states
+4. Support dark mode
+5. Make it responsive
+6. Add appropriate ARIA labels for accessibility
+7. Document complex logic with comments
+
+## API Guidelines
+
+When adding new endpoints:
+
+1. Add to `server/server.js`
+2. Follow RESTful conventions
+3. Validate input
+4. Handle errors appropriately
+5. Return consistent JSON responses
+6. Update documentation
+
+## Testing
+
+Currently, we don't have automated tests, but please:
+
+1. Test your changes manually
+2. Test in both light and dark modes
+3. Test on different screen sizes
+4. Test error conditions
+5. Test with different programming languages
+
+## Documentation
+
+* Update README.md if you change functionality
+* Update CHANGELOG.md with your changes
+* Add JSDoc comments for complex functions
+* Update API documentation if you add/change endpoints
+
+## Git Commit Messages
+
+* Use the present tense ("Add feature" not "Added feature")
+* Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
+* Limit the first line to 72 characters or less
+* Reference issues and pull requests liberally after the first line
+* Consider starting the commit message with an emoji:
+    * 🎨 `:art:` - Improving structure/format of the code
+    * ⚡ `:zap:` - Improving performance
+    * 🐛 `:bug:` - Fixing a bug
+    * ✨ `:sparkles:` - Adding a new feature
+    * 📝 `:memo:` - Writing docs
+    * 🔒 `:lock:` - Fixing security issues
+    * ♻️ `:recycle:` - Refactoring code
+
+## Adding New Languages
+
+To add support for a new programming language:
+
+1. Add to the language dropdown in `CodeExplainForm.jsx`
+2. Ensure Monaco Editor supports it (most common languages are supported)
+3. Test with example code
+4. Update documentation
+
+## Questions?
+
+Feel free to open an issue with your question or reach out to the maintainers.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the MIT License.
+
+---
+
+Thank you for contributing! 🎉