Giter Site home page Giter Site logo

yanivwein24 / get-jokes Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 1.09 MB

A MERN stack web application that generates jokes from a collection of over 1000 jokes, using "Joke-api". Users can register for free and create their own collection of jokes. Adding new jokes by pressing the "Like" button beneath a joke, or deleting jokes by pressing the "Delete" button on the user tab.

Home Page: https://get-jokes.onrender.com/

License: MIT License

HTML 0.25% JavaScript 85.10% CSS 14.65%
api-integration react react-hooks es6-javascript react-router-v6 axios bcrypt express-js mongodb nodejs

get-jokes's Introduction

GET-JOKES!

get-jokes-gif


This is a full stack web application, built using the "MERN" Stack.

The client side: is handled with React and Bootstrap.
State management is completely handled with Redux.
We send HTTP requests with Axios, and manipulate the request to the API
according to the User's queries (which depend on the states from the form).
We use localStorage to memorize the last theme that was applied on the User's device.
Routing and screens rending is implemented using React router v6.

The server side: is handled with Express and runs on a Node.js server.
User authentication and sessions are handled with Passport.js, and Oauth.
Passwords are being hashed and salted using Bcrypt.
All the user data is stored in A MongoDB Database.

The jokes are coming from Jokes-API.

Also Includes Unit-Tests And CI/CD

Where can i check this out?

Right Here: https://get-jokes.onrender.com/

Features:

Joke Generator:

  • Access a variety of over 1000 jokes!
  • Supports 6 languages: English, Czech, German, French, Spanish and Portuguese.
  • 6 categories to choose from, including: Programming, Dark, Punctuation, Spooky, Christmas and Miscellaneous.
  • Black Flags - To filter out any jokes that might be offensive to the user.
  • Search for specific jokes using the search bar.
  • 2 Types of jokes to choose from - "Single" and "Two-Part".

User Authentication:

  • Uses both client-side form validation (using Bootstrap) and server-side user authentication.
  • Complete support for user registration / login using sessions.
  • All passwords are being "Hashed" and "Salted" using Bcrypt before they get stored in the database, to ensure a high level of security.
  • Support for Google & Facebook Oauth.
  • Registered users can "like" jokes and add them to their private collection of jokes.
  • There's an option to sign in using a "Guest User" - which is public!

Dark Mode:

  • A fully customized dark mode.
  • Toggle on and off using the theme-switch on the navigation bar.
  • The default theme is set depending on the OS of user's device.
  • The theme preference is being saved in the user's local storage, for the next time they visit!

Lighthouse Score:

HomeScreen-light

Screenshots:

HomeScreen:

Light Mode: Dark Mode:
HomeScreen-light HomeScreen-dark

User-Screen:

User's collection Empty Collection
UserScreen EmptyUserScreen

User-registration and Oauth:

UserScreen

On Mobile:

Dark Mode Light Mode User Screen

get-jokes's People

Contributors

yanivwein24 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

get-jokes's Issues

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.