https://github.com/kelvinleandro/smart-something-site
Smart car page built with React and TypeScript, featuring device control, car location, and communication via web server
https://github.com/kelvinleandro/smart-something-site
axios axios-react axios-rest distributed-systems google-maps-api google-maps-react javascript next-js nextjs react react-google-maps react-google-maps-api reactjs shadcn shadcn-ui smart-car smart-devices tailwind-css tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Smart car page built with React and TypeScript, featuring device control, car location, and communication via web server
- Host: GitHub
- URL: https://github.com/kelvinleandro/smart-something-site
- Owner: kelvinleandro
- Created: 2025-01-24T15:27:49.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-18T13:34:00.000Z (2 months ago)
- Last Synced: 2025-02-18T14:31:33.089Z (2 months ago)
- Topics: axios, axios-react, axios-rest, distributed-systems, google-maps-api, google-maps-react, javascript, next-js, nextjs, react, react-google-maps, react-google-maps-api, reactjs, shadcn, shadcn-ui, smart-car, smart-devices, tailwind-css, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 151 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Smart Car Web App
## Overview
This is a web-based smart car application built with Next.js and TypeScript. It allows users to monitor and control various car devices through a REST API. The gateway server, responsible for handling requests, is managed in a [separate repository](https://github.com/gabrielfruet/gateway-iot).
## Features
- **Car Location**: View the car's real-time location on an interactive map.
- **Car Lock Status**: Check whether the car is locked or unlocked.
- **Temperature Sensor**: Monitor the car's current temperature.
- **Air Conditioner Control**: Turn the AC on or off, with temperature feedback.
- **Light Control**: Adjust the light brightness level (0-100).
- **Theme Support**: Light and dark mode support.
## Prerequisites
To run the application, ensure you have the following:
- Node.js
- A valid **Google Maps API Key**
- Access to the gateway REST API
## Installation
1. **Clone the Repository**:
```bash
git clone https://github.com/kelvinleandro/smart-something-site.git
cd smart-something-site
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Configure Environment Variables**:
- Create a `.env` file in the root directory.
- Add the following:
```env
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
```
4. **Run the Application**:
```bash
npm run dev
```
The app will be available at `http://localhost:3000`.
## Usage
1. Open the web application in your browser.
2. Use the interactive dashboard to monitor and control car devices:
- View the car's location on Google Maps.
- Check and toggle the car lock status.
- Monitor the temperature sensor.
- Turn the air conditioner on or off.
- Adjust the light brightness.
3. The UI automatically updates based on data from the gateway.
## Technologies Used
- **Next.js**
- **TypeScript**
- **Google Maps API** (for car location tracking)
- **Tailwind CSS** (for styling)
- **REST API** (for backend communication)
- **Axios** (for API requests)
- **ShadCN UI** (for UI components)
## Notes
- Ensure the gateway server is running and accessible.
- For further details on the gateway setup, refer to the [gateway repository](https://github.com/gabrielfruet/gateway-iot).
## License
This project is licensed under the MIT License. See the `LICENSE` file for details.