Merge pull request #11 from Levis92/develop

Rewrite to Next.js and update project structure

Author: Levis92

.gitignore

@@ -12,7 +12,7 @@ __pycache__/
 
 # Distribution / packaging
 .Python
-env/
+#env/
 build/
 develop-eggs/
 dist/
@@ -84,7 +84,7 @@ celerybeat-schedule
 *.sage.py
 
 # dotenv
-.env
+#.env
 
 # virtualenv
 .venv

README.md

@@ -1,75 +1,88 @@
-# InfoHub
+![Screenshot](screenshot.png)
+
+# InfoHub · [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Levis92/InfoHub/blob/master/LICENCE)
+
 This project is made for my personal use, but you're welcome to use any part of the code. Some widgets may need [API keys](https://en.wikipedia.org/wiki/Application_programming_interface_key) and it's up to you to acquire those yourself.
 
 ## Application
+
 InfoHub is an application to display widgets on a screen. That's it. No accounts or special features for touchscreen monitors. Just for displaying information.
 
+It fetches background wallpapers from [Unsplash API](https://unsplash.com/developers).
+
 ### Current widgets
-* **Clock with time and date.** Displays the current time and date.
 
-* **Västtrafik.** Displays the current departures from chosen bus-, tram- or trainstops. Needs API keys. You can get them from [developer.vasttrafik.se](https://developer.vasttrafik.se/portal/#/).
+- **Clock with time and date.** Displays the current time and date.
 
-* **Twitter images.** Displays the latest images from specified Twitter user.
+- **Västtrafik.** Displays the current departures from chosen bus-, tram- or trainstops. Needs API keys. You can get them from [developer.vasttrafik.se](https://developer.vasttrafik.se/portal/#/).
 
-* **Weather (Dark Sky API).** Displays current and hourly weather data for chosen location. Needs API key. You can get it from [darksky.net/dev](https://darksky.net/dev/).
+- **Twitter images.** Displays the latest images from specified Twitter user.
 
-## React
-The frontend is built with the Javascript library [React](https://facebook.github.io/react/) and is styled with the CSS extension language [Sass](http://sass-lang.com).
+- **Weather (Tomorrow API).** Displays current and hourly weather data for chosen location. Needs API key. You can get it from [tomorrow.io/weather-api](https://www.tomorrow.io/weather-api/).
 
-### Development
-First you need to add a copy of `widget-settings.example.js` and rename it to `widget-settings.js`. The file can be found in `infohub/src/components/`. Add your own settings in the file.
+## Docker
 
-The first time you run the application (and every time you add new dependencies) you need do run:
-```
-npm install
-```
-After that you only need to run:
-```
-npm start
-```
+The application can, after fixing the configuration files, be composed with [Docker](https://www.docker.com).
 
-#### Sass
-To compile the Sass files you need to have Sass installed. Instructions on how to do that can be found [here](http://sass-lang.com/install).
+To build it run:
 
-There's a [npm](https://www.npmjs.com) script included, so to compile you only need to run:
-```
-npm run sass
+```shell
+$ docker-compose up --build
 ```
 
-### Production
-To build the React application you run:
-```
-npm run build
+To just compose it, after being built, run:
+
+```shell
+$ docker-compose up
 ```
 
-## Flask
-The backend runs on the Python framework [Flask](http://flask.pocoo.org) and is used as an [API](https://en.wikipedia.org/wiki/Application_programming_interface) to request data and structure it in a format more convenient for the frontend application.
+## Next.js
+
+The frontend is built with the Javascript framework [Next.js](https://nextjs.org/) based on [React](https://facebook.github.io/react/) and is styled with [CSS Modules](https://github.com/css-modules/css-modules) and the CSS extension language [Sass](http://sass-lang.com).
 
 ### Development
-First you need to add a copy of `api_keys.example.py` and rename it to `api_keys.py`. The file can be found in `flask-app/InfoHubAPI/`. Add your API keys in this file.
+
+First you need to add a copy of `widget-settings.example.ts` and rename it to `widget-settings.ts`. The file can be found in `infohub/`. Add your own settings in the file.
+
+Then you also need to make a copy of the `.env` file in `infohub/` and rename it `.env.local`. Add your API keys in it.
 
 The first time you run the application (and every time you add new dependencies) you need do run:
+
+```shell
+$ yarn install
 ```
-sh ./init.sh
-```
+
 After that you only need to run:
-```
-sh ./debug.sh
+
+```shell
+$ yarn dev
 ```
 
+#### Sass
+
+Sass files are automatically compiled during runtime or when building the application.
+
 ### Production
-There are currently no specified script for production mode.
+
+To build and run the Next.js application you run:
+
+```shell
+$ yarn build && yarn start
+```
 
 ## Dependencies
-* [React](https://facebook.github.io/react/)
-* [Flask](http://flask.pocoo.org)
-* [npm](https://www.npmjs.com)
-* [Sass](http://sass-lang.com)
-* [SuperAgent](https://visionmedia.github.io/superagent/)
-* [Requests: HTTP for Humans](http://docs.python-requests.org/en/master/)
-* [Moment.js](http://momentjs.com)
-* [Beautiful Soup](https://www.crummy.com/software/BeautifulSoup/)
+
+- [Next.js](https://nextjs.org/)
+- [React](https://facebook.github.io/react/)
+- [Yarn](https://yarnpkg.com/)
+- [Sass](http://sass-lang.com)
+- [React Query](https://react-query.tanstack.com/)
+- [Day.js](https://day.js.org/en/)
+- [Puppeteer](https://pptr.dev/)
 
 ## Resources
-* [Västtrafik Developer Portal](https://developer.vasttrafik.se/portal/#/)
-* [Dark Sky API](https://darksky.net/dev/)
+
+- [Västtrafik Developer Portal](https://developer.vasttrafik.se/portal/#/)
+- [Tomorrow API](https://www.tomorrow.io/weather-api/)
+- [Unsplash](https://unsplash.com/developers)
+- [News API](https://newsapi.org/docs)

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3'
+services:
+  infohub:
+    build:
+     context: ./infohub
+     dockerfile: Dockerfile
+    image: infohub:prod
+    ports:
+     - "3000:3000"
+    volumes:
+     - ./infohub:/usr/src/app
+  redis:
+    image: "redis:alpine"