Coder Social home page Coder Social logo

lgope / til Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 120 KB

This is a Full Stack application, basically to create and display facts along with their source of information, their category, and the voting system for each factor. In conclusion, this application's purpose was to explore the new version of React 18. Thanks ๐Ÿ‘๐Ÿป

Home Page: https://today-i-learn-lgope.netlify.app/

JavaScript 69.33% HTML 2.84% CSS 27.83%
netlify reactjs supabase-js vitejs-react react-18

til's Introduction

Today I Learned

This is a Full Stack application, basically to create and display facts along with their source of information, their category, and the voting system for each factor. In conclusion, this application's purpose was to explore the new version of React 18. Thanks ๐Ÿ‘๐Ÿป

Description

todayILearned

First, you should click on the share a fact button. Then you share your facts.

If you want to share a fact you probably have to include these:

  • โœ… The content of your fact
  • ๐Ÿš€ A trustworthy source which starts with [http:// or https://] like http://examplesite.com
  • ๐Ÿ”ฅ And the fact's category [which you can choose from a dropdown list]

Also remember that there is a 200-letter limit to your fact ๐Ÿ˜‰

Each fact consists of 3 buttons:

  • ๐Ÿ‘ Interesting
  • ๐Ÿคฏ Mind-blowing
  • โ›” False

Note that if your fact's false votes are more than your interesting and mind-blowing facts together your facts will be disputed.

Also, there is a category section that includes various categories such as:

  • All
  • Science
  • Technology
  • Finance
  • Society
  • Entertainment
  • Health
  • History
  • News

๐Ÿ”บ The app is connected to Supabase and you can retrieve data from the database, update, and insert new data.

๐Ÿ”น Not to mention that the app is mobile friendly (It is completely responsive on mobile devices)

Usage


To upload a fact follow these steps:

  1. Press the Share a Fact button to open the fact form
  2. Enter your facts' text in 200 characters or less
  3. Enter your trustworthy source beginning with http:// or https://
  4. Select a category
  5. Press the Post button.

Upload


Down below you can see the fact I just created! Note that the fact React was developed by Google is disputed, as seen by the [โ›”๏ธ DISPUTED] that precedes it. For a fact to be disputed, it must be voted false more than it was voted interesting. To vote on a fact simply press the ๐Ÿ‘ or โ›”๏ธ buttons as seen below as well.


Disputed


Vote


Lastly, you can filter the facts in the database by their category type. Here we pressed the Society button to view only facts that relate to society.


Filter


Installation โš’๏ธ

1. Server Setup
#1. Clone this project
~ git clone https://github.com/lgope/til.git
#2. cd into it
~ cd til
#3. Install server dependencies
~ npm i
#3. run app
~ npm run dev

Contributing ๐Ÿ’ก

Pull requests are welcome but please open an issue and discuss what you will do before ๐Ÿ˜Š

Known Bugs ๐Ÿšจ

Feel free to email me at [email protected] if you run into any issues or have questions, ideas, or concerns. Please enjoy and feel free to share your opinion, constructive criticism, or comments about my work. Thank you! ๐Ÿ™‚

Future Updates ๐Ÿชด

  • Enable PWA
  • Auth base vote
  • Improve overall UX/UI and fix bugs
  • Featured Facts and so on...

And More! There's always room for improvement!

License ๐Ÿ“„

This project is open-sourced under the MIT license.

Deployed Version ๐Ÿš€

Feel free to visit ๐Ÿ‘‰๐Ÿป https://til-lgope.netlify.app/

til's People

Contributors

lgope avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.