GET-JOKES!
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:
Screenshots:
HomeScreen:
| Light Mode: | Dark Mode: |
 |
 |
User-Screen:
| User's collection | Empty Collection |
 |
 |
User-registration and Oauth:
On Mobile:
| Dark Mode | Light Mode | User Screen |
 |
 |
 |