{"id":51126542,"url":"https://github.com/apiverve/horoscope-app-react-tutorial","last_synced_at":"2026-06-25T08:01:58.822Z","repository":{"id":338751573,"uuid":"1158997166","full_name":"apiverve/horoscope-app-react-tutorial","owner":"apiverve","description":"Daily horoscope app built with React for zodiac sign readings","archived":false,"fork":false,"pushed_at":"2026-02-16T07:40:37.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-16T15:18:48.310Z","etag":null,"topics":["apiverve","astrology","daily-horoscope","fortune","horoscope","react","tutorial","zodiac"],"latest_commit_sha":null,"homepage":"https://apiverve.com/marketplace/horoscope","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apiverve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-16T07:20:09.000Z","updated_at":"2026-02-16T07:40:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/apiverve/horoscope-app-react-tutorial","commit_stats":null,"previous_names":["apiverve/horoscope-app-react-tutorial"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/apiverve/horoscope-app-react-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fhoroscope-app-react-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fhoroscope-app-react-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fhoroscope-app-react-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fhoroscope-app-react-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apiverve","download_url":"https://codeload.github.com/apiverve/horoscope-app-react-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fhoroscope-app-react-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34765322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apiverve","astrology","daily-horoscope","fortune","horoscope","react","tutorial","zodiac"],"created_at":"2026-06-25T08:01:58.742Z","updated_at":"2026-06-25T08:01:58.816Z","avatar_url":"https://github.com/apiverve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Daily Horoscope App | APIVerve API Tutorial\r\n\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\r\n[![Build](https://img.shields.io/badge/Build-Passing-brightgreen.svg)]()\r\n[![React](https://img.shields.io/badge/React-18-61dafb)](https://react.dev)\r\n[![Vite](https://img.shields.io/badge/Vite-5-646cff)](https://vitejs.dev)\r\n[![APIVerve | Horoscope](https://img.shields.io/badge/APIVerve-Horoscope-purple)](https://apiverve.com/marketplace/horoscope?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial)\r\n\r\nA beautiful daily horoscope app built with React. Select your zodiac sign and get personalized readings with lucky numbers, mood, and more.\r\n\r\n![Screenshot](https://raw.githubusercontent.com/apiverve/horoscope-app-react-tutorial/main/screenshot.jpg)\r\n\r\n---\r\n\r\n### Get Your Free API Key\r\n\r\nThis tutorial requires an APIVerve API key. **[Sign up free](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial)** - no credit card required.\r\n\r\n---\r\n\r\n## Features\r\n\r\n- All 12 zodiac signs with symbols\r\n- Daily horoscope readings\r\n- Lucky number and lucky time\r\n- Mood and color of the day\r\n- Zodiac element and birthstone info\r\n- Beautiful dark cosmic theme\r\n- Smooth animations\r\n- Built with React 18 and Vite\r\n\r\n## Quick Start\r\n\r\n1. **Clone this repository**\r\n   ```bash\r\n   git clone https://github.com/apiverve/horoscope-app-react-tutorial.git\r\n   cd horoscope-app-react-tutorial\r\n   ```\r\n\r\n2. **Install dependencies**\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Add your API key**\r\n\r\n   Open `.env` and add your API key:\r\n   ```\r\n   VITE_API_KEY=your-api-key-here\r\n   ```\r\n\r\n4. **Start the development server**\r\n   ```bash\r\n   npm run dev\r\n   ```\r\n\r\n5. **Open in browser**\r\n\r\n   Visit http://localhost:5173 and check your horoscope!\r\n\r\n## Project Structure\r\n\r\n```\r\nhoroscope-app-react-tutorial/\r\n├── src/\r\n│   ├── App.jsx         # Main React component\r\n│   ├── App.css         # Styles\r\n│   └── main.jsx        # Entry point\r\n├── index.html          # HTML template\r\n├── package.json        # Dependencies\r\n├── vite.config.js      # Vite configuration\r\n├── .env                # Environment variables (add your API key)\r\n├── screenshot.jpg      # Preview image\r\n├── LICENSE             # MIT license\r\n├── .gitignore          # Git ignore rules\r\n└── README.md           # This file\r\n```\r\n\r\n## How It Works\r\n\r\n1. User clicks on their zodiac sign\r\n2. App fetches today's horoscope from the API\r\n3. Response includes reading, lucky numbers, mood, and more\r\n4. Beautiful card displays the complete horoscope\r\n\r\n### The API Call\r\n\r\n```javascript\r\nconst response = await fetch(`https://api.apiverve.com/v1/horoscope?sign=aries`, {\r\n  method: 'GET',\r\n  headers: {\r\n    'x-api-key': API_KEY\r\n  }\r\n});\r\n```\r\n\r\n## API Reference\r\n\r\n**Endpoint:** `GET https://api.apiverve.com/v1/horoscope`\r\n\r\n**Query Parameters:**\r\n\r\n| Parameter | Type | Required | Description |\r\n|-----------|------|----------|-------------|\r\n| `sign` | string | Yes | Zodiac sign (aries, taurus, gemini, etc.) |\r\n\r\n**Example Response:**\r\n\r\n```json\r\n{\r\n  \"status\": \"ok\",\r\n  \"error\": null,\r\n  \"data\": {\r\n    \"sign\": \"aries\",\r\n    \"horoscope\": \"Today, the celestial alignment initiates a deep dive into your emotional landscapes...\",\r\n    \"luckyNumber\": 12,\r\n    \"luckyTime\": \"8:00 AM\",\r\n    \"mood\": \"excited\",\r\n    \"color\": \"green\",\r\n    \"compatibility\": [\"leo\", \"sagittarius\"],\r\n    \"zodiac\": {\r\n      \"name\": \"Aries\",\r\n      \"element\": \"fire\",\r\n      \"symbol\": \"\\u2648\",\r\n      \"stone\": \"bloodstone\"\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## Zodiac Signs\r\n\r\n| Sign | Symbol | Dates | Element |\r\n|------|--------|-------|---------|\r\n| Aries | ♈ | Mar 21 - Apr 19 | Fire |\r\n| Taurus | ♉ | Apr 20 - May 20 | Earth |\r\n| Gemini | ♊ | May 21 - Jun 20 | Air |\r\n| Cancer | ♋ | Jun 21 - Jul 22 | Water |\r\n| Leo | ♌ | Jul 23 - Aug 22 | Fire |\r\n| Virgo | ♍ | Aug 23 - Sep 22 | Earth |\r\n| Libra | ♎ | Sep 23 - Oct 22 | Air |\r\n| Scorpio | ♏ | Oct 23 - Nov 21 | Water |\r\n| Sagittarius | ♐ | Nov 22 - Dec 21 | Fire |\r\n| Capricorn | ♑ | Dec 22 - Jan 19 | Earth |\r\n| Aquarius | ♒ | Jan 20 - Feb 18 | Air |\r\n| Pisces | ♓ | Feb 19 - Mar 20 | Water |\r\n\r\n## Customization Ideas\r\n\r\n- Add weekly/monthly horoscopes\r\n- Save favorite sign to localStorage\r\n- Add share to social media\r\n- Display compatibility matches\r\n- Add notification reminders\r\n- Create horoscope history\r\n\r\n## Related APIs\r\n\r\nExplore more APIs at [APIVerve](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial):\r\n\r\n- [Moon Phases](https://apiverve.com/marketplace/moonphases?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial) - Get moon phase data\r\n- [Chinese Zodiac](https://apiverve.com/marketplace/chinesezodiac?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial) - Chinese zodiac calculator\r\n- [Fortune Cookie](https://apiverve.com/marketplace/fortunecookie?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial) - Random fortune cookies\r\n\r\n## Free Plan Note\r\n\r\nThis tutorial works with the free APIVerve plan. Some APIs may have:\r\n- **Locked fields**: Premium response fields return `null` on free plans\r\n- **Ignored parameters**: Some optional parameters require a paid plan\r\n\r\nThe API response includes a `premium` object when limitations apply. [Upgrade anytime](https://dashboard.apiverve.com/plans) to unlock all features.\r\n\r\n## License\r\n\r\nMIT - see [LICENSE](LICENSE)\r\n\r\n## Links\r\n\r\n- [Get API Key](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial) - Sign up free\r\n- [APIVerve Marketplace](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial) - Browse 300+ APIs\r\n- [Horoscope API](https://apiverve.com/marketplace/horoscope?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=horoscope-app-react-tutorial) - API details\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Fhoroscope-app-react-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapiverve%2Fhoroscope-app-react-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Fhoroscope-app-react-tutorial/lists"}