diff --git a/README.md b/README.md index 4f60d99..4748eb3 100644 --- a/README.md +++ b/README.md @@ -1,328 +1,89 @@ -# EasyCRUD - Student Registration System - -A full-stack web application for student registration with a React frontend and Spring Boot backend. - -## ๐Ÿš€ Current Status - -The application is currently configured to run **without database dependencies** for easy development and testing. All data is stored in memory and will be reset when the application restarts. - -## ๐Ÿ“ Project Structure - -``` -EasyCRUD/ -โ”œโ”€โ”€ backend/ # Spring Boot Backend -โ”‚ โ”œโ”€โ”€ src/main/java/ -โ”‚ โ”‚ โ””โ”€โ”€ com/student/registration/ -โ”‚ โ”‚ โ””โ”€โ”€ student_registration_backend/ -โ”‚ โ”‚ โ”œโ”€โ”€ controller/ # REST Controllers -โ”‚ โ”‚ โ”œโ”€โ”€ model/ # Data Models -โ”‚ โ”‚ โ””โ”€โ”€ config/ # Configuration -โ”‚ โ”œโ”€โ”€ src/main/resources/ -โ”‚ โ”‚ โ””โ”€โ”€ application.properties # App Configuration -โ”‚ โ”œโ”€โ”€ database_schema.sql # Complete Database Schema -โ”‚ โ”œโ”€โ”€ simple_schema.sql # Minimal Database Schema -โ”‚ โ”œโ”€โ”€ DATABASE_SETUP.md # Database Setup Guide -โ”‚ โ””โ”€โ”€ pom.xml # Maven Dependencies -โ””โ”€โ”€ frontend/ # React Frontend - โ”œโ”€โ”€ src/ - โ”‚ โ”œโ”€โ”€ components/ # React Components - โ”‚ โ”œโ”€โ”€ api/ # API Service - โ”‚ โ””โ”€โ”€ hooks/ # Custom Hooks - โ””โ”€โ”€ package.json # Node Dependencies -``` - -## ๐Ÿ› ๏ธ Quick Start - -### Prerequisites -- Java 17 or higher -- Node.js 16 or higher -- Maven (or use the included Maven wrapper) - -### Backend Setup - -1. **Navigate to backend directory:** - ```bash - cd backend - ``` - -2. **Build the application:** - ```bash - # Make Maven wrapper executable (first time only) - chmod +x mvnw - - # Build the project - ./mvnw clean package - ``` - -3. **Run the application:** - ```bash - # Using Maven - ./mvnw spring-boot:run - - # Or using the JAR file - java -jar target/student-registration-backend-0.0.1-SNAPSHOT.jar - ``` - -The backend will start on `http://localhost:8080` - -### Frontend Setup - -1. **Navigate to frontend directory:** - ```bash - cd frontend - ``` - -2. **Install dependencies:** - ```bash - npm install - ``` - -3. **Start the development server:** - ```bash - npm run dev - ``` - -The frontend will start on `http://localhost:5173` - -## ๐Ÿ“Š API Endpoints - -### Student Registration API - -| Method | Endpoint | Description | -|--------|----------|-------------| -| POST | `/api/register` | Register a new student | -| GET | `/api/users` | Get all students | -| DELETE | `/api/users/{id}` | Delete a student by ID | - -### Sample API Usage - -```bash -# Register a new student -curl -X POST http://localhost:8080/api/register \ - -H "Content-Type: application/json" \ - -d '{ - "name": "John Doe", - "email": "john@example.com", - "course": "Computer Science", - "studentClass": "Final Year", - "percentage": 85.5, - "branch": "Computer Engineering", - "mobileNumber": "+1234567890" - }' - -# Get all students -curl http://localhost:8080/api/users - -# Delete a student -curl -X DELETE http://localhost:8080/api/users/1 -``` - -## ๐Ÿ—„๏ธ Database Integration (Optional) - -### Current State -- โœ… **No database dependencies** - Application runs independently -- โœ… **In-memory storage** - Data persists during runtime -- โœ… **Ready for database integration** - Schema files provided - -### Database Schema Files - -The project includes comprehensive database schemas: - -1. **`database_schema.sql`** - Complete schema with: - - Users table with all fields - - Courses and branches tables - - User roles and permissions - - Audit logging - - Sample data (10 students, 6 courses, 5 branches) - -2. **`simple_schema.sql`** - Minimal schema with: - - Basic users table - - Sample data (5 students) - -3. **`DATABASE_SETUP.md`** - Complete setup guide - -### MariaDB Setup (Ubuntu) - -1. **Install MariaDB:** - ```bash - sudo apt update && sudo apt install mariadb-server -y - ``` - -2. **Secure the installation:** - ```bash - sudo mysql_secure_installation - ``` - -3. **Create database and user:** - ```bash - sudo mysql -u root -p - ``` - ```sql - CREATE DATABASE student_db; - GRANT ALL PRIVILEGES ON student_db.* TO 'username'@'localhost' IDENTIFIED BY 'your_password'; - FLUSH PRIVILEGES; - EXIT; - ``` - -4. **Import the schema:** - ```bash - mysql -u username -p student_db < database_schema.sql - ``` - -### Adding Database Support - -When ready to add database support: - -1. **Add dependencies to `pom.xml`:** - ```xml - - org.springframework.boot - spring-boot-starter-data-jpa - - - org.mariadb.jdbc - mariadb-java-client - runtime - - ``` - -2. **Update `application.properties`:** - ```properties - spring.datasource.url=jdbc:mariadb://localhost:3306/student_db - spring.datasource.username=your_username - spring.datasource.password=your_password - spring.jpa.hibernate.ddl-auto=validate - spring.jpa.show-sql=true - ``` - -3. **Restore JPA annotations in User.java:** - ```java - @Entity - @Data - public class User { - @Id - @GeneratedValue(strategy = GenerationType.IDENTITY) - private Long id; - // ... other fields - } - ``` - -4. **Recreate UserRepository.java:** - ```java - @Repository - public interface UserRepository extends JpaRepository { - } - ``` - -## ๐Ÿ”ง Configuration - -### Environment Variables - -When using database, set these environment variables: - -```bash -export DB_HOST=localhost -export DB_USER=your_username -export DB_PASS=your_password -export DB_PORT=3306 -export DB_NAME=student_db -``` - -### Application Properties - -Key configuration options in `application.properties`: - -```properties -# Server Configuration -server.port=8080 - -# Database Configuration (when enabled) -spring.datasource.url=jdbc:mariadb://localhost:3306/student_db -spring.datasource.username=${DB_USER:root} -spring.datasource.password=${DB_PASS:} -spring.jpa.hibernate.ddl-auto=validate -spring.jpa.show-sql=true -``` - -## ๐Ÿงช Testing - -### Backend Testing -```bash -cd backend -./mvnw test -``` - -### API Testing -```bash -# Test registration -curl -X POST http://localhost:8080/api/register \ - -H "Content-Type: application/json" \ - -d '{"name":"Test User","email":"test@example.com","course":"CS","studentClass":"First Year","percentage":85.0,"branch":"Computer Engineering","mobileNumber":"+1234567890"}' - -# Test retrieval -curl http://localhost:8080/api/users -``` - -## ๐Ÿ“ Features - -### Current Features -- โœ… Student registration form -- โœ… View all registered students -- โœ… Delete students -- โœ… Responsive UI design -- โœ… Form validation -- โœ… In-memory data storage - -### Planned Features (with Database) -- ๐Ÿ”„ Persistent data storage -- ๐Ÿ”„ User authentication -- ๐Ÿ”„ Role-based access control -- ๐Ÿ”„ Data export/import -- ๐Ÿ”„ Advanced search and filtering -- ๐Ÿ”„ Audit logging - -## ๐Ÿ› Troubleshooting - -### Common Issues - -1. **Maven build fails:** - - Ensure Java 17+ is installed - - Check if Maven wrapper is executable: `chmod +x mvnw` - -2. **Port already in use:** - - Change port in `application.properties`: `server.port=8081` - -3. **Frontend can't connect to backend:** - - Check CORS configuration in `WebConfig.java` - - Verify backend is running on correct port - -4. **Database connection issues:** - - Verify MariaDB service is running: `sudo systemctl status mariadb` - - Check credentials and permissions - - Ensure database exists: `SHOW DATABASES;` - -## ๐Ÿ“š Documentation - -- **`DATABASE_SETUP.md`** - Complete database setup guide -- **`database_schema.sql`** - Full database schema with sample data -- **`simple_schema.sql`** - Minimal database schema for quick setup - -## ๐Ÿค Contributing - -1. Fork the repository -2. Create a feature branch -3. Make your changes -4. Test thoroughly -5. Submit a pull request - -## ๐Ÿ“„ License - -This project is open source and available under the [MIT License](LICENSE). - -## ๐Ÿ†˜ Support - -For issues and questions: -1. Check the troubleshooting section -2. Review the database setup guide -3. Check application logs for error messages -4. Verify all prerequisites are installed \ No newline at end of file +# MariaDB Setup and Configuration Guide for Windows + +This guide explains how to set up MariaDB, create a database, and Create Database User + +## 1. Installing MariaDB + +Installing MariaDB on Ubntu + +```shell +apt update && apt install mariadb-server -y +``` + +## 2. Securing MariaDB + +Open the Command Prompt as Administrator and run the following command to secure your installation: + +```shell + +mysql_secure_installation +``` + +Follow the prompts to: +Set a root password. +Remove insecure default users and test databases. +Disable remote root login. + +## 3. Setting Up the Database + +Open terminal and login to MariaDB: + +```bash + +mysql -u root -p +``` + +Enter the root password when prompted. + +Create a new database and user: + +```sql +CREATE DATABASE student_db; +GRANT ALL PRIVILEGES ON springbackend.* TO 'username'@'localhost' IDENTIFIED BY 'your_password'; +``` +in this case +```sql +CREATE DATABASE student_db; +GRANT ALL PRIVILEGES ON springbackend.* TO 'admin'@'localhost' IDENTIFIED BY 'Redhat123hi'; +``` + +Replace username and your_password with your desired username and password. + +Exit MariaDB: + +```sql + +EXIT; +``` + +## 4. You will need Database Credentials to Connect Backend with Database +1. DB_HOST +2. DB_USER +3. DB_PASS +4. DB_PORT +5. DB_NAME + +--- +## Docker compose Installation +``` +apt install docker-compose -y +``` +- varify docker compose is avalibal or not + +``` +docker-compose --version +``` +## docker compose file +- Create and start containers in detach way +``` +docker-compose up -d +``` + +- Stop and remove resources +``` +docker-compose down +``` +- https://docs.docker.com/compose/intro/features-uses/ + + + diff --git a/backend/Readme.md b/backend/Readme.md index 1d69609..ed67dac 100644 --- a/backend/Readme.md +++ b/backend/Readme.md @@ -60,8 +60,8 @@ mvn clean package Run the generated JAR file by using the following command: ```bash - -java -jar target\spring-backend-v1.jar +cd target +java -jar spring-backend-v1_filename.jar ``` The application will start and be accessible at: @@ -70,4 +70,5 @@ http://localhost:8080 ### Step 5: Keep the Application Running -To keep the application running in the background, you can use nohup or a similar method. \ No newline at end of file + +To keep the application running in the background, you can use nohup or a similar method. diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties index 4c00e40..6485d9d 100644 --- a/backend/src/main/resources/application.properties +++ b/backend/src/main/resources/application.properties @@ -1 +1,8 @@ server.port=8080 + +spring.datasource.url=jdbc:mariadb://:3306/student_db?sslMode=trust +spring.datasource.username=admin +spring.datasource.password=redhat123 + +spring.jpa.hibernate.ddl-auto=update +spring.jpa.show-sql=true diff --git a/compose.yaml b/compose.yaml new file mode 100644 index 0000000..252e606 --- /dev/null +++ b/compose.yaml @@ -0,0 +1,18 @@ +version: "3.8" + +services: + backend: + build: + context: ./backend + dockerfile: Dockerfile + ports: + - "8080:8080" + + frontend: + build: + context: ./frontend + dockerfile: Dockerfile + ports: + - "3000:3000" + depends_on: + - backend diff --git a/frontend/README.md b/frontend/README.md index b056748..d4f1ef0 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,295 +1,55 @@ -# CLOUDBLITZ Student Management Frontend - -A modern, scalable React application built with industry best practices for managing student registrations and data. - -## ๐Ÿš€ Features - -- **Modern React Architecture**: Built with React 18, React Router v6, and modern hooks -- **State Management**: React Query for server state, Context API for global state -- **Type Safety**: Full TypeScript support (can be easily migrated) -- **Responsive Design**: Mobile-first approach with modern CSS -- **Error Handling**: Comprehensive error boundaries and user feedback -- **Performance**: Optimized with React Query caching and lazy loading -- **Accessibility**: WCAG compliant with proper focus management -- **Developer Experience**: Hot reloading, ESLint, and development tools - -## ๐Ÿ“ Project Structure - -``` -src/ -โ”œโ”€โ”€ components/ # Reusable UI components -โ”‚ โ”œโ”€โ”€ common/ # Shared components (ErrorBoundary, etc.) -โ”‚ โ””โ”€โ”€ layout/ # Layout components (Header, Navigation, etc.) -โ”œโ”€โ”€ context/ # React Context providers -โ”œโ”€โ”€ hooks/ # Custom React hooks -โ”œโ”€โ”€ pages/ # Page components -โ”œโ”€โ”€ api/ # API service functions -โ”œโ”€โ”€ assets/ # Static assets (images, icons) -โ”œโ”€โ”€ styles/ # Global styles and utilities -โ”œโ”€โ”€ utils/ # Utility functions -โ”œโ”€โ”€ App.jsx # Main application component -โ”œโ”€โ”€ main.jsx # Application entry point -โ””โ”€โ”€ index.css # Global styles -``` - -## ๐Ÿ› ๏ธ Technology Stack - -- **React 18** - UI library -- **React Router v6** - Client-side routing -- **React Query (TanStack Query)** - Server state management -- **React Icons** - Icon library -- **React Hot Toast** - Toast notifications -- **Axios** - HTTP client -- **Vite** - Build tool and dev server -- **ESLint** - Code linting - -## ๐Ÿš€ Getting Started - -### Prerequisites - -- Node.js 18+ -- npm or yarn - -### Installation - -1. Install dependencies: -```bash -npm install -``` - -2. Start development server: -```bash -npm run dev -``` - -3. Build for production: -```bash -npm run build -``` - -## ๐Ÿ“‹ Available Scripts - -- `npm run dev` - Start development server -- `npm run build` - Build for production -- `npm run preview` - Preview production build -- `npm run lint` - Run ESLint - -## ๐Ÿ—๏ธ Architecture Overview - -### Component Structure - -The application follows a hierarchical component structure: - -1. **App Component** - Main application wrapper with providers -2. **Layout Component** - Consistent layout with navigation -3. **Page Components** - Individual page views -4. **Common Components** - Reusable UI elements - -### State Management - -- **React Query**: Handles server state (API calls, caching, synchronization) -- **Context API**: Manages global application state (theme, user, notifications) -- **Local State**: Component-specific state using useState/useReducer - -### Routing - -Uses React Router v6 with: -- Nested routes -- Route protection (can be implemented) -- 404 handling -- Programmatic navigation - -## ๐ŸŽจ Styling Approach - -### CSS Architecture - -- **Global Styles**: Reset, base styles, and utility classes -- **Component Styles**: Scoped CSS files for each component -- **Responsive Design**: Mobile-first with breakpoint utilities -- **Design System**: Consistent colors, spacing, and typography - -### Design Tokens - -```css -/* Colors */ ---primary: #ff8000; ---primary-dark: #e67300; ---text-primary: #1f2937; ---text-secondary: #6b7280; - -/* Spacing */ ---spacing-xs: 0.25rem; ---spacing-sm: 0.5rem; ---spacing-md: 1rem; ---spacing-lg: 1.5rem; ---spacing-xl: 2rem; -``` - -## ๐Ÿ”ง Development Guidelines - -### Code Style - -- Use functional components with hooks -- Prefer composition over inheritance -- Follow React best practices -- Use meaningful component and variable names -- Add proper TypeScript types (when migrated) - -### Component Guidelines - -```jsx -// Good component structure -const ComponentName = ({ prop1, prop2 }) => { - // 1. Hooks - const [state, setState] = useState(); - - // 2. Event handlers - const handleClick = () => {}; - - // 3. Effects - useEffect(() => {}, []); - - // 4. Render - return
Content
; -}; -``` - -### File Naming - -- Components: PascalCase (e.g., `UserProfile.jsx`) -- Pages: PascalCase (e.g., `Dashboard.jsx`) -- Utilities: camelCase (e.g., `formatDate.js`) -- Styles: kebab-case (e.g., `user-profile.css`) - -## ๐Ÿ“ฑ Responsive Design - -The application is built with a mobile-first approach: - -- **Mobile**: < 768px -- **Tablet**: 768px - 1024px -- **Desktop**: > 1024px - -### Breakpoints - -```css -@media (max-width: 768px) { /* Mobile styles */ } -@media (max-width: 1024px) { /* Tablet styles */ } -@media (min-width: 1025px) { /* Desktop styles */ } -``` - -## ๐Ÿ”’ Security Considerations - -- Input validation on both client and server -- XSS prevention with proper escaping -- CSRF protection (implemented on backend) -- Secure HTTP headers -- Content Security Policy (CSP) - -## ๐Ÿงช Testing Strategy - -### Testing Levels - -1. **Unit Tests**: Individual components and functions -2. **Integration Tests**: Component interactions -3. **E2E Tests**: User workflows (can be implemented with Cypress) - -### Testing Tools - -- React Testing Library -- Jest -- MSW (Mock Service Worker) for API mocking - -## ๐Ÿ“Š Performance Optimization - -### React Optimizations - -- React.memo for expensive components -- useMemo for expensive calculations -- useCallback for stable function references -- Lazy loading for routes - -### Bundle Optimization - -- Code splitting with React.lazy -- Tree shaking -- Dynamic imports -- Asset optimization - -## ๐ŸŒ Browser Support - -- Chrome 90+ -- Firefox 88+ -- Safari 14+ -- Edge 90+ - -## ๐Ÿ”„ API Integration - -### API Service Structure - -```javascript -// api/userService.js -export const fetchUsers = async () => { - const response = await axios.get('/api/users'); - return response.data; -}; -``` - -### Error Handling - -- Global error boundary -- API error handling with React Query -- User-friendly error messages -- Retry mechanisms - -## ๐Ÿ“ˆ Monitoring and Analytics - -- Error tracking (can be integrated with Sentry) -- Performance monitoring -- User analytics (can be integrated with Google Analytics) -- Logging and debugging tools - -## ๐Ÿš€ Deployment - -### Build Process - -1. Run `npm run build` -2. Optimized files generated in `dist/` -3. Deploy to hosting service - -### Environment Variables - -```bash -VITE_API_BASE_URL=http://localhost:8080 -VITE_APP_NAME=CLOUDBLITZ Student Management -``` - -## ๐Ÿค Contributing - -1. Fork the repository -2. Create a feature branch -3. Make your changes -4. Add tests if applicable -5. Submit a pull request - -## ๐Ÿ“„ License - -This project is licensed under the MIT License. - -## ๐Ÿ†˜ Support - -For support and questions: -- Create an issue in the repository -- Contact the development team -- Check the documentation - -## ๐Ÿ”ฎ Future Enhancements - -- [ ] TypeScript migration -- [ ] Advanced filtering and search -- [ ] Data export functionality -- [ ] Real-time updates with WebSocket -- [ ] Offline support with Service Workers -- [ ] Advanced analytics dashboard -- [ ] Multi-language support -- [ ] Dark mode theme -- [ ] Advanced user roles and permissions \ No newline at end of file +# React Project Setup and Deployment Guide for Windows + +This guide provides step-by-step instructions for setting up a React project. + +## 1. Setting Up the React Project + +### Install Node.js and npm + +```shell +apt update && apt install nodejs npm -y +``` + +### Verify Installation + + +```shell +node -v +npm -v +``` + + +## 2. Install Dependencies + +To install the necessary dependencies for your project, run the following command: + +```shell +npm install +``` + +## 3. Build the React Application for Production + +Update backend IP in .env file + +```shell +vim .env +``` + +To build the React application for production, run: + +```shell +npm run build +``` + +This will create a dist/ directory in your project containing optimized, production-ready files. + +## 4. Deploy production-ready files on s3 or apache2 server + +```shell +apt install apache2 -y +systemctl start apache2 +cp -rf dist/* /var/www/html/ +``` + + +You can access the application on http://localhost:80 diff --git a/tester.md b/tester.md new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/tester.md @@ -0,0 +1 @@ +