A comprehensive web application for managing and monitoring tree planting initiatives in educational institutions. This system enables students to select, monitor, and track the growth of trees while providing administrators with powerful management and reporting tools.
- Tree Selection: Browse and select from available trees
- Progress Tracking: Upload photos and track tree growth over time
- Care Instructions: Get species-specific care guidelines
- Achievement System: Track care scores and milestones
- Class Management: Manage students in assigned classes
- Tree Assignment: Help students select appropriate trees
- Progress Monitoring: Track student engagement and tree health
- Department Overview: View department-wide statistics
- Student Management: Manage students within the department
- Tree Monitoring: Monitor all trees assigned to department students
- Reports: Generate department-specific reports
- College-wide Dashboard: Complete overview of the institution
- Multi-department Management: Manage all departments and staff
- Comprehensive Reports: Institution-wide analytics and insights
- Staff Management: Manage HODs and staff members
- Multi-college Management: Manage multiple educational institutions
- User Management: Create and manage all user types
- System Reports: Comprehensive analytics across all colleges
- Data Export: Export reports and data for analysis
- React 18 with TypeScript
- Vite for fast development and building
- Tailwind CSS for modern, responsive styling
- Lucide React for beautiful icons
- Axios for API communication
- Node.js with Express.js
- PostgreSQL database
- JWT authentication
- Multer for file uploads
- bcrypt for password hashing
- Node.js (v16 or higher)
- PostgreSQL (v12 or higher)
- npm or yarn package manager
git clone <repository-url>
cd one-student-one-treecd one_student_one-_treeAPI
npm install
# Create .env file
cp .env.example .env
# Configure your database connection in .env
# DB_HOST=localhost
# DB_PORT=5432
# DB_NAME=tree_monitoring
# DB_USER=your_username
# DB_PASSWORD=your_password
# JWT_SECRET=your_jwt_secret
# Run database migrations
npm run migrate
# Start the backend server
npm run devcd ../one_student_one-_treeUI
npm install
# Start the frontend development server
npm run devcd ../one_student_one-_treeAPI
# Populate with sample data
node comprehensive-populate.jsAfter running the population script, you can use these demo credentials:
- Email: admin@system.edu
- Password: password123
- Email: principal.rmkec@edu.in
- Password: Principal@123456
- Email: principal.sairam@edu.in
- Password: Principal@123456
- Email: hod.cse.0@rmkec.edu.in
- Password: Hod@123456
- Email: staff0.0.0@rmkec.edu.in
- Password: Staff@123456
- Email: student1@rmkec.edu.in
- Password: Student@123456
- Access the application at
http://localhost:5174 - Log in using one of the demo credentials
- Explore the features based on your role
- Navigate to "Tree Selection" to choose a tree
- Use "My Tree Progress" to upload photos and track growth
- Check "Guidelines" for care instructions
- Use the "Dashboard" for overview statistics
- Manage users through "Users" section
- View comprehensive analytics in "Reports"
- Handle approvals in "Invitations" and "Requests"
one-student-one-tree/
├── one_student_one-_treeAPI/ # Backend API
│ ├── src/
│ │ ├── controllers/ # Route controllers
│ │ ├── models/ # Database models
│ │ ├── routes/ # API routes
│ │ ├── middleware/ # Custom middleware
│ │ └── utils/ # Utility functions
│ ├── migrations/ # Database migrations
│ └── package.json
├── one_student_one-_treeUI/ # Frontend React app
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── Auth/ # Authentication components
│ │ │ ├── Dashboard/ # Dashboard components
│ │ │ ├── Management/ # Management components
│ │ │ ├── TreeSelection/ # Tree selection components
│ │ │ ├── TreeProgress/ # Progress tracking
│ │ │ ├── Reports/ # Reporting components
│ │ │ ├── Settings/ # Settings components
│ │ │ ├── UI/ # Reusable UI components
│ │ │ └── Layout/ # Layout components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── services/ # API services
│ │ ├── types/ # TypeScript type definitions
│ │ └── utils/ # Utility functions
│ └── package.json
└── README.md
# Database Configuration
DB_HOST=localhost
DB_PORT=5432
DB_NAME=tree_monitoring
DB_USER=your_username
DB_PASSWORD=your_password
# JWT Configuration
JWT_SECRET=your_super_secret_jwt_key
JWT_EXPIRES_IN=7d
# Server Configuration
PORT=3000
NODE_ENV=development
# File Upload Configuration
UPLOAD_PATH=./uploads
MAX_FILE_SIZE=5242880# API Configuration
VITE_API_BASE_URL=http://localhost:3000/api/v1
VITE_API_HOST=http://localhost:3000
# App Configuration (optional)
VITE_APP_NAME=Student - ACT
VITE_APP_VERSION=1.0.0The frontend uses environment variables to configure API endpoints. Copy .env.example to .env and modify as needed.
The system uses PostgreSQL with the following main entities:
- Users (students, staff, HODs, principals, admins)
- Colleges (educational institutions)
- Departments (within colleges)
- Trees (tree records with species, location, etc.)
- Tree Images (progress photos)
- Invitations (for user registration)
- Registration Requests (pending user registrations)
cd one_student_one-_treeUI
npm run buildcd one_student_one-_treeAPI
npm run build
npm startDocker configuration files can be added for containerized deployment.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions:
- Create an issue in the GitHub repository
- Contact the development team
- Check the documentation in the
/docsfolder
- R.M.K Engineering College for the project inspiration
- All contributors and testers
- Open source libraries and frameworks used
Built with ❤️ for environmental sustainability and education "# work-flow-lms-ui"