Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sayedshehata1/dad-jokes

React App that lets people view and vote on cheesy jokes from icanhazdadjoke API
https://github.com/sayedshehata1/dad-jokes

axios font-awesome icanhazdadjoke react uuid

Last synced: 29 days ago
JSON representation

React App that lets people view and vote on cheesy jokes from icanhazdadjoke API

Host: GitHub
URL: https://github.com/sayedshehata1/dad-jokes
Owner: SayedShehata1
Created: 2024-04-11T00:51:57.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-04-11T01:18:54.000Z (9 months ago)
Last Synced: 2024-05-07T19:36:23.066Z (8 months ago)
Topics: axios, font-awesome, icanhazdadjoke, react, uuid
Language: CSS
Homepage: https://dad-jokes-smoky.vercel.app/
Size: 570 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Dad Jokes App

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Font-Awesome](https://img.shields.io/badge/Font_Awesome-339AF0?style=for-the-badge&logo=fontawesome&logoColor=white)
![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)

View Demo
·
Report Bug

Table of Contents

About The Project
- Features

Getting Started
- Installation
- Ports and EndPoints

Contributing

## About The Project

React App that lets people view and vote on cheesy jokes from [icanhazdadjoke](https://icanhazdadjoke.com/) API

![Preview](./src/assets/preview.png)

### Features

- List jokes fetched from [icanhazdadjoke](https://icanhazdadjoke.com/) API, along with:
- "vot-up" Button
- "vot-down" Button
- net score for each joke
- User can vote and net score should update
- Should show loading state when loading jokes
- Should show the jokes sorted by net score, and update this as the scores changes on each fetch
- Should show dynamic vote-border-color and emoji based on joke net vote score
- Should persist the list of jokes in local storage
- > When user visit the app, it should show saved jokes, rather than fetching new jokes, However the user should still be able to generate new jokes via the "New Jokes" button, and these new jokes should update the ones in local storage.

(back to top)

---

## Getting Started

This project require some perquisites and dependencies to be installed, you can view it online using this [demo](https://dad-jokes-smoky.vercel.app/). or you can find the instructions below:

> To get a local copy, follow these simple steps :

### Installation

#### installing Locally

1. Clone the repo

```sh
git clone https://github.com/SayedShehata1/Dad-Jokes.git
```

2. go to project folder

```sh
cd dad-jokes
```

3. install dependencies

```bash
npm install
```

4. Run development server

```sh
npm start
```

---

### Ports and EndPoints

#### Ports

- FrontEnd Development Server runs on port `3000`

#### API endpoints

- joke: [https://icanhazdadjoke.com/](https://icanhazdadjoke.com/) [GET]
- headers: `"application/json"`

(back to top)