https://github.com/nas5w/react-mirror
React-based magic mirror with node/express back-end.
https://github.com/nas5w/react-mirror
javascript magic-mirror metro mirror-application nodejs react reactjs
Last synced: 3 months ago
JSON representation
React-based magic mirror with node/express back-end.
- Host: GitHub
- URL: https://github.com/nas5w/react-mirror
- Owner: nas5w
- Created: 2018-11-16T21:34:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-17T00:38:53.000Z (over 6 years ago)
- Last Synced: 2025-03-29T12:05:03.242Z (4 months ago)
- Topics: javascript, magic-mirror, metro, mirror-application, nodejs, react, reactjs
- Language: JavaScript
- Size: 527 KB
- Stars: 5
- Watchers: 3
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Magic Mirror
[](https://travis-ci.com/nas5w/react-mirror)
This repository contains the front- and back-end code for a React-based Magic Mirror Application. If you don't know what a magic mirror is, take a look at [this site](https://www.raspberrypi.org/blog/magic-mirror/).
## Architecture
The application is composed of two main directories: `server` and `client`. The `server` directory contains a simple Node/Express application that hits the [OpenWeatherMap API](https://openweathermap.org/api) for weather data and the [WMATA API](https://developer.wmata.com/docs/services/) for metro data. To make this application work as-is, you'll need to get (free) API keys from both sources.
The `client` directory is a React application that uses `fetch` to periodicially retrieve data from the node server.
## Configuration
To configure the application, first install all client and server dependencies:
```bash
cd client
npm i
cd ../server
npm i
```
Next, set node environment variables in the `server` and `client` directory for your API keys and settings:
```bash
cp .env.sample .env
```
## Using the Application
To use the application, you can simply use node to start both the server and React app:
server:
```bash
cd server
npm start
```
React application:
```bash
cd client
npm start
```
Navigate to `http://localhost:3000` and you'll see your mirror application in all its glory!
