A beautifully designed mystical astrology application built with Next.js. Noro Astro allows users to enter their birth details to generate personalized natal charts and detailed daily horoscope readings.
- Personalized Natal Charts: Generate your unique astrological chart based on your exact birth date, time, and location.
- Detailed Daily Readings: Get comprehensive insights into:
- Overall daily theme and rating
- Moon phase and illumination
- Life areas (love, career, health, etc.)
- Planetary influences and aspects
- Lucky elements (colors, numbers, stones, directions, times)
- Stunning Mystical UI: Immersive dark-themed interface with glassmorphism effects, elegant typography, and interactive particle star backgrounds.
- Responsive Design: Flawless experience across desktop, tablet, and mobile devices.
- Framework: Next.js (React 19)
- Styling: Tailwind CSS v4
- Language: TypeScript
- Icons: Lucide React
- Animations/Effects: tsParticles
- Astrology Engine: @astro-api/astroapi-typescript
- Node.js (v20 or higher recommended)
- npm, pnpm, or yarn
-
Clone the repository:
git clone <repository-url> cd noro_astro
-
Install dependencies:
npm install
-
Set up environment variables: Create a
.env.localfile in the root directory and add your AstroAPI credentials (if required by the API setup). -
Start the development server:
npm run dev
-
Open http://localhost:3000 with your browser to see the result.
app/- Next.js App Router pages and layouts (page.tsx,layout.tsx,globals.css)app/result/- The comprehensive chart and reading display pageapp/api/- Next.js API routes handling AstroAPI communicationcomponents/- Reusable React components:BirthForm.tsx- Form for collecting birth detailsMysticalQuote.tsx- Dynamic cosmic wisdom and quotesStarBackground.tsx- Interactive tsParticles background
This project is open-source. Feel free to use and modify it for your own celestial journeys.