diff --git a/README.md b/README.md index 13276bb..9f65f60 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,270 @@ -# Presentation -[Youtube shorts](https://www.youtube.com/shorts/l88tk7wHQCE) - - - -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -## Available Scripts - -In the project directory, you can run: - -### `npm start` - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. - -The page will reload when you make changes.\ -You may also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can't go back!** - -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. - -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +# 🏠 Smart Home System Frontend + +> **Bachelor's Engineering Thesis Project** +> A comprehensive web-based frontend for managing and controlling smart home devices with real-time monitoring and automation capabilities. + +[![Demo](https://img.shields.io/badge/Demo-YouTube%20Shorts-red)](https://www.youtube.com/shorts/l88tk7wHQCE) +[![React](https://img.shields.io/badge/React-18.2.0-blue)](https://reactjs.org/) +[![PrimeReact](https://img.shields.io/badge/PrimeReact-10.7.0-orange)](https://primereact.org/) +[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4.1-cyan)](https://tailwindcss.com/) +[![Socket.IO](https://img.shields.io/badge/Socket.IO-4.8.1-black)](https://socket.io/) + +## πŸ“‹ Table of Contents + +- [Overview](#overview) +- [Features](#features) +- [Technologies](#technologies) +- [Project Structure](#project-structure) +- [Installation](#installation) +- [Usage](#usage) +- [Components](#components) +- [Development](#development) +- [Contributing](#contributing) +- [License](#license) + +## 🎯 Overview + +This Smart Home System frontend is a modern, responsive web application designed to provide comprehensive control and monitoring of various smart home devices. Built as part of a Bachelor's Engineering Thesis, it demonstrates advanced web development techniques and IoT integration patterns. + +The application features a sleek, dark-themed interface with real-time device control, automation scenarios, security monitoring, and detailed analytics. It communicates with Arduino-based hardware and backend services through WebSocket connections for instant updates. + +## ✨ Features + +### πŸŽ›οΈ Device Management +- **Smart Lighting Control** - Brightness adjustment and on/off switching +- **Heat Pump Controller** - Temperature regulation and scheduling +- **Sensor Monitoring** - Real-time environmental data tracking +- **Camera Integration** - Live video streaming and security monitoring +- **Front Gate Control** - Access management and visitor monitoring + +### πŸ€– Automation & Intelligence +- **Scenario Management** - Custom automation rules and triggers +- **Task Scheduling** - Automated device operations +- **Activity Monitoring** - Comprehensive system activity logs +- **Statistics Dashboard** - Usage analytics and performance metrics + +### πŸ’¬ Communication & Alerts +- **Real-time Chat** - Integrated communication system +- **Alarm System** - Security alerts and notifications +- **Session Management** - Secure user authentication and timeout handling + +### πŸ“± User Experience +- **Responsive Design** - Optimized for desktop and mobile devices +- **Dark Theme** - Modern, eye-friendly interface +- **Real-time Updates** - Instant device status synchronization +- **Intuitive Navigation** - Clean, organized dashboard layout + +## πŸ› οΈ Technologies + +### Frontend Framework +- **React 18.2.0** - Modern React with hooks and functional components +- **Create React App** - Development toolchain and build system + +### UI/UX Libraries +- **PrimeReact 10.7.0** - Comprehensive React UI component library +- **PrimeIcons 7.0.0** - Rich icon set for consistent visual language +- **PrimeFlex 3.3.1** - CSS utility library for responsive layouts + +### Styling & Design +- **Tailwind CSS 3.4.1** - Utility-first CSS framework +- **Tailwind Merge** - Conditional class merging utility +- **Inter Font** - Modern, readable typography +- **Custom Color Palette** - Branded design system with `larablue` accent + +### Real-time Communication +- **Socket.IO Client 4.8.1** - WebSocket communication for live updates +- **Real-time Device Control** - Instant command execution and status updates + +### Navigation & Routing +- **React Router DOM 6.24.0** - Client-side routing and navigation +- **Multi-page Application** - Organized route structure + +### Calendar & Scheduling +- **FullCalendar 6.1.15** - Advanced calendar functionality +- **Core & DayGrid** - Comprehensive scheduling features + +### Utilities & Enhancement +- **Lodash** - Utility functions for data manipulation and debouncing +- **React Transition Group** - Smooth animations and transitions +- **Querystring ES3** - URL parameter parsing + +### Development & Testing +- **Testing Library** - Comprehensive testing utilities + - Jest DOM + - React Testing Library + - User Event Testing +- **ESLint** - Code quality and consistency +- **Web Vitals** - Performance monitoring + +## πŸ“ Project Structure + +``` +frontend-arduino/ +β”œβ”€β”€ public/ +β”‚ β”œβ”€β”€ certificates/ # SSL certificates +β”‚ β”œβ”€β”€ details/ # Project documentation assets +β”‚ β”œβ”€β”€ img/ # Static images and assets +β”‚ └── manifest.json # PWA configuration +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ components/ # Reusable React components +β”‚ β”‚ β”œβ”€β”€ dashboard-tabs/ # Dashboard tab components +β”‚ β”‚ β”œβ”€β”€ cameraStreamComponent.jsx +β”‚ β”‚ β”œβ”€β”€ chatComponent.jsx +β”‚ β”‚ β”œβ”€β”€ dashboard-header.jsx +β”‚ β”‚ β”œβ”€β”€ frontGateComponent.jsx +β”‚ β”‚ β”œβ”€β”€ heatPumpController.jsx +β”‚ β”‚ β”œβ”€β”€ scenarioComponent.jsx +β”‚ β”‚ β”œβ”€β”€ sensorAlarmComponent.jsx +β”‚ β”‚ β”œβ”€β”€ statisticCompomnent.jsx +β”‚ β”‚ └── tasksComponents.jsx +β”‚ β”œβ”€β”€ pages/ # Application pages/routes +β”‚ β”‚ β”œβ”€β”€ home.jsx # Landing page +β”‚ β”‚ β”œβ”€β”€ panel-dashboard.jsx # Main dashboard +β”‚ β”‚ β”œβ”€β”€ login-app-home.jsx # Authentication +β”‚ β”‚ β”œβ”€β”€ add-new-app-home.jsx # Device setup +β”‚ β”‚ β”œβ”€β”€ author.jsx # Author information +β”‚ β”‚ β”œβ”€β”€ details.jsx # Project details +β”‚ β”‚ β”œβ”€β”€ stack.jsx # Technology stack +β”‚ β”‚ └── mockup.jsx # Design mockups +β”‚ β”œβ”€β”€ styles/ # Global styles and utilities +β”‚ β”œβ”€β”€ scripts/ # Utility scripts +β”‚ β”œβ”€β”€ downloads/ # Downloadable assets +β”‚ └── icons/ # Custom icon components +β”œβ”€β”€ tailwind.config.js # Tailwind CSS configuration +└── package.json # Dependencies and scripts +``` + +## πŸš€ Installation + +### Prerequisites +- **Node.js** (v14 or higher) +- **npm** or **yarn** package manager +- **Arduino/IoT Backend** (for full functionality) + +### Setup + +1. **Clone the repository** + ```bash + git clone https://github.com/Seveneqqq/frontend-arduino.git + cd frontend-arduino + ``` + +2. **Install dependencies** + ```bash + npm install + ``` + +3. **Start development server** + ```bash + npm start + ``` + +4. **Open your browser** + Navigate to [http://localhost:3000](http://localhost:3000) + +### Build for Production + +```bash +npm run build +``` + +The optimized production build will be created in the `build/` directory. + +## πŸ“– Usage + +### Development Mode +```bash +npm start +``` +- Runs the app in development mode +- Hot reload enabled for instant updates +- Open [http://localhost:3000](http://localhost:3000) to view + +### Testing +```bash +npm test +``` +- Launches the test runner in interactive watch mode +- Includes unit tests for components and utilities + +### Production Build +```bash +npm run build +``` +- Creates optimized production bundle +- Minified and optimized for deployment +- Ready for hosting on any static server + +## 🧩 Components + +### Core Dashboard Components +- **HeaderDashboard** - Navigation and user controls +- **DevicesTab** - Device management interface +- **ActivityTab** - System activity monitoring +- **AutomationTab** - Scenario and automation rules +- **SettingsTab** - System configuration +- **AccountTab** - User account management + +### Device Control Components +- **HeatPumpController** - Temperature control interface +- **CameraStreamComponent** - Live video streaming +- **FrontGateComponent** - Access control system +- **SensorAlarmComponent** - Security monitoring + +### Utility Components +- **ChatComponent** - Real-time communication +- **ScenarioComponent** - Automation management +- **StatisticComponent** - Analytics dashboard +- **TasksComponent** - Scheduled operations +- **SessionTimedOut** - Security timeout handling + +## πŸ”§ Development + +### Code Style +- **ESLint** configuration included +- **Prettier** recommended for formatting +- **React hooks** and functional components preferred +- **Tailwind CSS** for styling consistency + +### Real-time Features +- WebSocket connection management +- Device state synchronization +- Live data streaming +- Instant UI updates + +### Responsive Design +- Mobile-first approach +- Tailwind CSS breakpoints +- Flexible layouts with PrimeFlex + +## 🀝 Contributing + +1. Fork the repository +2. Create a feature branch (`git checkout -b feature/amazing-feature`) +3. Commit your changes (`git commit -m 'Add amazing feature'`) +4. Push to the branch (`git push origin feature/amazing-feature`) +5. Open a Pull Request + +### Development Guidelines +- Follow existing code style and patterns +- Add tests for new functionality +- Update documentation as needed +- Ensure responsive design compatibility + +## πŸ“„ License + +This project is part of a Bachelor's Engineering Thesis. Please respect academic integrity guidelines when using or referencing this work. + +## πŸ‘€ Author + +**PaweΕ‚ BoroΕ„** +- Email: pawel.boron01@interia.pl +- Project: Bachelor's Engineering Thesis - Smart Home System + +## πŸŽ₯ Demo + +Check out the [YouTube Shorts demonstration](https://www.youtube.com/shorts/l88tk7wHQCE) to see the system in action! + +--- + +*Built with ❀️ using React, PrimeReact, and Tailwind CSS* diff --git a/package-lock.json b/package-lock.json index a6b885f..0b71896 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16891,16 +16891,17 @@ } }, "node_modules/typescript": { - "version": "5.7.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", - "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=14.17" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": {