65 lines
2.4 KiB
Markdown
65 lines
2.4 KiB
Markdown
# HackerNews Fullstack
|
|
This project is a custom build to show a working implementation of FLASK with VUE.js
|
|
|
|
## Goals
|
|
Backend
|
|
- Use the unofficial Hackernews REST API to fetch news: https://github.com/HackerNews/API (Only use the API, not a library)
|
|
- Implement a single REST endpoint using Python (e.g. with Flask) which returns an improved representation of the API response
|
|
- Provide a query parameter to select a story category
|
|
- Provide a query parameter to limit the story count
|
|
|
|
Frontend
|
|
- Create a VUE.js project using the VUE cli
|
|
- Build a Master-Detail view which uses your Python API endpoint using VUE.js
|
|
|
|
## How it works
|
|
The server is seperated into Front- and Backend.
|
|
The Frontend will be shown to the user and present everything as a Single-Page-Application. The inital call of the webpage will get the bundled frontend into the clients browser.
|
|
The Backend provides all vital data, like post overviews and rankings, and can communicate with the Frontend.
|
|
|
|
### Develping and Running
|
|
1. Setup a virtual environment `python3 -m venv venv`
|
|
2. activate your virtual environment `source venv/bin/activate`
|
|
3. Run `pip3 install -r requirements`
|
|
4. Run `export FLASK_APP=wsgi:app`
|
|
5. Run `flask run`
|
|
|
|
To deactivate your virtual environment run `deactivate` in your Terminal.
|
|
|
|
### Build the Frontend
|
|
In order to rebuild the web app (Vue)
|
|
1. Navigate to the `frontend` folder
|
|
2. Run `yarn install`
|
|
3. while developing `yarn dev`
|
|
4. to build for deployment `yarn build`
|
|
|
|
|
|
|
|
## About HackerNews
|
|
HackerNews got a public API at https://hacker-news.firebaseio.com for getting their
|
|
- Items (`/v0/item/<id>`) like
|
|
- Stories
|
|
- Comments
|
|
- Jobs
|
|
- Polls and Pollopts
|
|
- Users (`/v0/user/<username>`)
|
|
- and spezial live Data
|
|
- current largest item id (`/v0/maxitem`)
|
|
- top stories (`/v0/topstories`) (also contains jobs)
|
|
- new stories (`/v0/newstories`)
|
|
- best stories (`/v0/beststories`)
|
|
- ask stories (`/v0/askstories`)
|
|
- show stories(`/v0/showstories`)
|
|
- job stories (`/v0/jobstories`)
|
|
- changed items and profiles (`/v0/updates`)
|
|
|
|
|
|
|
|
# links and resources
|
|
- https://github.com/HackerNews/API
|
|
- https://vuejs.org/
|
|
- https://github.com/jrbarhydt/FlaskWebAPI
|
|
- https://dev.to/michaelbukachi/flask-vue-js-integration-tutorial-2g90
|
|
- https://towardsdatascience.com/creating-a-beautiful-web-api-in-python-6415a40789af
|
|
- https://gist.github.com/jamescalam/0b309d275999f9df26fa063602753f73
|
|
- https://www.stackhawk.com/blog/vue-cors-guide-what-it-is-and-how-to-enable-it/ |