NeuroNest

About NeuroNest

Inspiration:

NeuroNest was inspired by the desire to create a digital sanctuary for mental wellness, blending the reflective practice of journaling with the engaging metaphor of a digital garden. The core idea was to allow users to "plant" their thoughts, feelings, or goals and visually nurture them over time, representing personal growth. We wanted to move beyond simple text entries and create a more interactive and visually rewarding experience for self-reflection. Furthermore, the project aimed to explore how modern AI, specifically large language models like Anthropic's Claude, could be constructively applied to provide personalized insights and support within a mental wellness context, offering summaries and recommendations based on the user's own entries without being overly prescriptive.

How We Built It:

The project was built iteratively as a full-stack application:

1. Frontend Foundation: We started with a React frontend created using Create React App and TypeScript, styling it with Bootstrap and custom CSS. Initial components for different pages (Home, Growth, Garden, Journal, Mindspace, etc.) were laid out.
2. Backend API: A FastAPI backend (Python) was introduced to handle logic and data persistence. We structured it with clear separation of concerns (API routes, CRUD operations, schemas, models).
3. Database Integration: PostgreSQL was chosen as the database. SQLAlchemy with its async capabilities (asyncpg driver) was used as the ORM, and Alembic was implemented for handling database schema migrations, allowing us to evolve the database structure safely. We defined User and Thought models.
4. Authentication: A simple but secure username/password authentication system was added using JWT (JSON Web Tokens). Passlib was used for password hashing (bcrypt), and python-jose handled token creation and verification. Backend dependencies were added to protect routes and associate data with specific users. The frontend was updated with Login/Signup pages and an AuthContext to manage user state and tokens (localStorage).
5. Core Feature Logic: The "Growth" feature (planting/watering thoughts) and "Garden" visualization were connected to the backend API and database, ensuring data persistence and user separation. Basic "Insights" calculations were added.
6. AI Integration: We integrated the Anthropic Claude API. Initially considered Gemini, but switched to Claude. Backend endpoints were created to:
   • Fetch relevant user thoughts from the database.
   • Construct prompts for Claude.
   • Call the Claude API to generate weekly journal summaries and Mindspace practice recommendations based on mood.
   • Parse the JSON responses from the AI.
   • The frontend was updated to call these AI-powered endpoints (Journal, Mindspace).
7. Mindspace UI: The Mindspace page UI was implemented, including mood selection, display of AI recommendations, and a functional breathing exercise timer/visualizer.
8. Deployment: The entire application (PostgreSQL DB, FastAPI backend, React frontend) was configured for deployment on Render's free tier using a render.yaml blueprint file. This involved significant debugging related to static site configuration, environment variable injection (DATABASE_URL, REACT_APP_API_URL, FRONTEND_ORIGIN, secrets), CORS policies, and build dependencies (like psycopg2-binary for Alembic).

What We Learned:

This project was a deep dive into full-stack development with a modern stack. Key learnings included:

• Designing and implementing RESTful APIs with FastAPI.
• Using SQLAlchemy asynchronously with PostgreSQL and managing migrations with Alembic.
• Implementing secure JWT-based authentication flows.
• Integrating third-party AI APIs (Anthropic Claude), including prompt engineering for specific JSON outputs.
• Managing state effectively in React using Context API.
• Configuring complex multi-service deployments on a PaaS like Render, including database linking, environment variable management (especially build-time vs. runtime), and CORS configuration.
• Debugging deployment issues across the stack, from build dependencies to runtime environment variables and CORS errors.

Challenges Faced:

• Deployment Configuration: Getting the render.yaml correct was iterative, involving debugging issues with static site definitions, environment variable propagation (DATABASE_URL modification for asyncpg, REACT_APP_API_URL injection, FRONTEND_ORIGIN manual setting), and CORS policy enforcement between the deployed services.
• Async Database & Migrations: Configuring Alembic to work correctly with the asynchronous SQLAlchemy engine and the Render environment required specific adjustments to alembic/env.py.
• Dependency Management: Ensuring the correct database drivers (asyncpg for the app, psycopg2-binary for Alembic) were installed in the Render build environment.
• Python Imports: Resolving AttributeError issues related to Python's import system, particularly when importing objects defined in __init__.py files across different modules/packages, requiring direct imports in endpoint files.
• AI Integration: Ensuring the AI reliably returned data in the expected JSON format and handling potential parsing errors.

Built With

• alembic-(migrations)
• asyncpg-(async-driver)
• css-(bootstrap-5
• custom-css)
• form
• html
• languages:-python
• lucide-react-(icons)-backend:-fastapi-(python-web-framework)-database:-postgresql-orm/db-tools:-sqlalchemy-(with-asyncio-support)
• managed-postgresql-free-tier)-other-libraries:-pydantic-(data-validation/schemas)
• passlib-(bcrypt-hashing)-ai-api:-anthropic-claude-api-(anthropic-python-sdk)-deployment-platform:-render-(web-service
• psycopg2-binary-(sync-driver-for-alembic)-authentication:-jwt-(python-jose)
• python-dotenv-(environment-variables)
• python-multipart
• sql-frontend:-react
• static-site
• typescript
• uvicorn-(asgi-server)