Liascope Astrology is a modern astrology charting application designed to provide a clean and beginner-friendly alternative to cluttered and visually overwhelming astrology tools. The application allows users to generate and explore multiple astrological charts through an intuitive, responsive interface with interactive SVG visualizations.
The project originated as a Vanilla JavaScript project structured using the MVC pattern. After validating the core domain logic, the application was refactored and rebuilt with React.js and Next.js.
- Ensure full responsiveness and smooth UX across devices, including input handling and chart generation.
- Expand functionality with new features, such as save & load charts, input & location autocomplete.
- Enable advanced SVG manipulation for interactive, dynamic charts.
Project Evolution: Vanilla JS → React & Next.js
The initial Vanilla JavaScript version was intentionally implemented using a clear MVC architecture to demonstrate structured application design and explicit data flow without frameworks. While this version successfully validated the core domain logic, the project was refactored into React.js and Next.js to align with modern frontend production standards, long-term scalability and maintainability.
Improvements & Technical Progress
Compared to the original Vanilla JavaScript implementation, the React & Next.js version improves flexibility, maintainability, and overall user experience without rewriting the core business logic.
In the initial version, limitations of the external SVG chart library required pragmatic workarounds. For example, retrograde planets were rendered outside the chart because direct SVG manipulation was not yet feasible given my experience at the time.
In the React/Next.js version, SVG rendering is handled internally through custom hooks, enabling direct manipulation of chart elements. This allows integrated retrograde indicators, dynamic filtering, and responsive scaling directly within the SVG.
The layout was also fully refactored to be responsive, replacing the desktop-only design of the original version and ensuring a consistent experience across devices.
- Liascope Vanilla JS (left) and Liacope React.js & Next.js (right): 1.Form & Autocomplete functionality - 2.Data Info Table extension - 3.Displaying Retrograde & Filter functionality
App Structure
/app
├─ RootLayout → Global layout with header & footer
│ ├─ / → Homepage (CTA to form)
│ ├─ /form → Data entry (natal & transit charts, horoscope selection)
│ ├─ /profiles → Saved profiles (localStorage)
│ └─ /policy → Policy page
│
├─ _components → Reusable UI components (incl. NavIcons)
│
├─ _lib
│ ├─ hooks/ → Custom React hooks
│ ├─ context/ → Context API for global state
│ ├─ config.js → App configuration
│ └─ helpers.js → Utility functions
│
├─ /charts → Chart layout & pages
│ ├─ layout.js → Chart info button & table, navigation
│ ├─ /chart/natal → Natal chart
│ ├─ /chart/transit → Transit chart
│ ├─ /chart/natalTransit → Natal & transit overlay
│ ├─ /chart/progression → Progressed chart
│ ├─ /chart/draconic → Draconic chart
│ └─ /chart/perfection → Annual perfection chart
|
├─ /api/nominatim/route.js → SS Nominatim route to bypass CORS & dev request limits
Challenges & Learnings
Implementing the MVC pattern in the original Vanilla JS version provided a strong architectural baseline for separation of concerns and data flow. This foundation made the subsequent transition to React.js and Next.js smoother, allowing me to focus on scaling the app, improving maintainability, and adopting modern frontend practices.
- Translating MVC-based procedural logic into reusable React components and custom hooks while preserving domain logic
- Managing complex derived state across multiple chart types using the Context API with predictable state ownership
- Extending and refactoring a third-party SVG chart library to support responsive behavior, interactive filtering, and chart manipulation
- Adapting and modernizing external libraries to correctly handle timezone conversions and retrograde calculations across environments
- Structuring complex, multi-step forms with validation and conditional logic while maintaining a consistent user experience
Reflection & Next Steps
This project strengthened my architectural thinking and highlighted the importance of upfront planning when building complex frontend applications.
- Defining state structures and data flow early significantly reduced refactoring during implementation.
- The transition from a procedural MVC approach to a component-driven architecture improved my ability to design scalable, reusable, and maintainable frontend systems in a structured and predictable way.
Planned enhancements include:
- Downloadable PDF chart reports.
- Lunar phase calendar integration.
- Downloadable PDF chart reports.
- AI-generated astrology insights based on user input.
