Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theemperorofdaiviet/upvote
A simple voting application that takes inspiration from popular social feed websites like Reddit and Hacker News.
https://github.com/theemperorofdaiviet/upvote
bulma css3 font-awesome html5 javascript vue3 vuejs
Last synced: 11 days ago
JSON representation
A simple voting application that takes inspiration from popular social feed websites like Reddit and Hacker News.
- Host: GitHub
- URL: https://github.com/theemperorofdaiviet/upvote
- Owner: theEmperorofDaiViet
- Created: 2023-07-15T17:46:23.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-07-22T16:54:34.000Z (over 1 year ago)
- Last Synced: 2023-07-22T17:36:16.271Z (over 1 year ago)
- Topics: bulma, css3, font-awesome, html5, javascript, vue3, vuejs
- Language: JavaScript
- Homepage:
- Size: 282 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
# About The Project
A simple voting application that takes inspiration from popular social feed websites like Reddit and Hacker News. It's based on chapter 2 of the book "Fullstack Vue 3"".
## Built With
* [![HTML5][HTML5-shield]][HTML5-url]
* [![CSS3][CSS3-shield]][CSS3-url]
* [![JavaScript][JavaScript-shield]][JavaScript-url]
* [![Vue.js][Vue.js-shield]][Vue.js-url]
* [![Bulma][Bulma-shield]][Bulma-url]
* [![Font Awesome][Font Awesome-shield]][Font Awesome-url]
# Getting Started
## Prerequisites
Before cloning and using this application, you'll need to install these things on your computer:
* [Visual Studio Code](https://code.visualstudio.com/download): You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): An extension for Visual Studio Code that help to launch a local development server with live reload feature for static & dynamic pages.
## Installation
You can install this application by cloning this repository into your current working directory:
```sh
git clone https://github.com/theEmperorofDaiViet/upvote.git
```
After cloning the repository, you can open the project by Visual Studio Code.
Click to Go Live from the status bar to turn the server on/off.
As usual, the app should automatically open in a new tab in your browser. It runs on port 5500 by default.
# Key Features
UpVote! focuses on displaying a list of submissions that users can vote on:
* Each submission will present some information about itself like an image, title, and description.
* All submissions are sorted instantaneously by number of votes: submissions with the highest number of votes appear at the top of the web page with lower voted submissions being positioned at the bottom.
* The up-vote icon in each submission will allow users to increase vote numbers and subsequently rearrange submission layout
* A special blue border will appear around a submission when said submission reaches a certain number of votes (let’s say 20 votes)
# Usage
Our app looks like this:
# Contact
You can contact me via:
* [![GitHub][GitHub-shield]][GitHub-url]
* [![LinkedIn][LinkedIn-shield]][LinkedIn-url]
* ![Gmail][Gmail-shield]: [email protected]
* [![Facebook][Facebook-shield]][Facebook-url]
* [![Twitter][Twitter-shield]][Twitter-url]
[HTML5-shield]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[HTML5-url]: https://www.w3.org/html/
[CSS3-shield]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[CSS3-url]: https://www.w3.org/Style/CSS/
[JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
[JavaScript-url]: https://www.ecma-international.org/
[Vue.js-shield]: https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D
[Vue.js-url]: https://vuejs.org/
[Bulma-shield]: https://img.shields.io/badge/Bulma-00D1B2?style=for-the-badge&logo=Bulma&logoColor=white
[Bulma-url]: https://bulma.io/
[Font Awesome-shield]: https://img.shields.io/badge/Font_Awesome-339AF0?style=for-the-badge&logo=fontawesome&logoColor=white
[Font Awesome-url]: https://fontawesome.com/
[GitHub-shield]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[GitHub-url]: https://github.com/theEmperorofDaiViet
[LinkedIn-shield]: https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white
[LinkedIn-url]: https://www.linkedin.com/in/khiet-to/
[Gmail-shield]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white
[Facebook-shield]: https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white
[Facebook-url]: https://www.facebook.com/Khiet.To.Official/
[Twitter-shield]: https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white
[Twitter-url]: https://twitter.com/KhietTo