A comprehensive, user-friendly website to help people with chronic invisible illnesses through information, community support, and resources.
- About Page: Comprehensive overview of chronic invisible illnesses with supportive information
- Conditions Page: Detailed list of supported conditions (Fibromyalgia, Lupus, ME/CFS, etc.)
- Symptoms Guide: Detailed breakdown of common symptoms with visual elements
- Treatments & Management: Complete guide to medications, therapies, and lifestyle strategies
- Resources Directory: Extensive links to medical organizations, support groups, and research
- Community Page: Space for sharing experiences and connecting with others
- Community Forum: Local storage-based forum for sharing experiences
- Feedback Form: Friendly feedback page with type categorization (Bug Report, Feature Request, General Feedback, Other) that emails submissions via FormSubmit
- Scroll Buttons: Convenient scroll-to-top and scroll-to-bottom buttons for easy navigation on long pages
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Calming Aesthetics: Soft purple/lavender color scheme suitable for health-focused content
- Accessibility: Proper contrast, navigation, and semantic HTML
- Wellbeing Corner Inspired Design: Clean, centered navigation with hamburger menu on smaller screens
- Global Footer: Consistent footer with copyright and medical disclaimer across all pages
- Framework: Next.js 16.1.4 with App Router and TypeScript
- Styling: Tailwind CSS with custom design system
- Database: SQLite with Prisma ORM (authentication foundation)
- State Management: React hooks with local storage persistence
- Deployment: GitHub Pages static export (docs/) or any Node.js hosting
- Node.js 18+ and npm
- Git (for version control)
-
Clone the repository:
git clone <repository-url> cd chronic-haven
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser
chronic-haven/
├── src/
│ ├── app/ # Next.js app directory
│ │ ├── layout.tsx # Root layout with navigation and global footer
│ │ ├── page.tsx # Home page
│ │ ├── globals.css # Global styles
│ │ ├── about/page.tsx # About chronic invisible illnesses
│ │ ├── conditions/page.tsx# List of supported conditions
│ │ ├── symptoms/page.tsx # Symptoms information
│ │ ├── treatments/page.tsx# Treatments guide
│ │ ├── resources/page.tsx # Resources directory
│ │ ├── community/page.tsx # Community forum
│ │ ├── feedback/page.tsx # Feedback form
│ │ └── api/ # API routes
│ ├── components/ # Reusable components
│ │ ├── Nav.tsx # Navigation component
│ │ ├── FeedbackForm.tsx # Feedback form component
│ │ └── ScrollButtons.tsx # Scroll buttons component
│ └── generated/ # Generated Prisma client
├── prisma/ # Database schema
│ ├── schema.prisma # Prisma schema
│ └── migrations/ # Database migrations
├── public/ # Static assets
├── .github/workflows/ # GitHub Actions
├── README.md # This documentation
└── progress.md # Development progress log
Started: January 23, 2026 Current Status: 100% COMPLETE - All features implemented and browser icons fixed Project Status: PRODUCTION READY
- Initialize Next.js 15 project with TypeScript
- Set up Tailwind CSS for styling
- Configure project structure with App Router
- Install and configure development dependencies
- Set up version control and documentation
- Create responsive navigation component
- Build home page with feature overview
- Implement routing for all main pages
- Design calming, accessible color scheme (purple/lavender)
- Add global footer with copyright and disclaimer
- About Page: Comprehensive chronic invisible illness overview
- Conditions Page: Detailed list of supported conditions
- Symptoms Page: Detailed symptom breakdown
- Treatments Page: Complete treatment guide
- Resources Page: Extensive support directory
- Community Page: Community forum
- Feedback Page: Feedback form with type categorization
- Community Forum: Local storage-based community
- Feedback Form: Friendly feedback page with type dropdown and website identification
- Updated home page with wellbeing-corner inspired layout
- Added colorful gradient sections for each category
- Centered section titles with emoji accents
- Made navigation centered with logo above menu
- Added hamburger menu for smaller screens (laptop breakpoint)
- Added custom purple heart logo
- Updated all text to be bold and friendly
- Made text larger and easier to read
- Added diverse emojis for each section
- Added global footer with copyright and medical disclaimer
- Swapped footer text order and styling for better readability
- Added feedback type dropdown (Bug Report, Feature Request, General Feedback, Other)
- Added website identification to feedback emails to distinguish from wellbeing corner
- Removed duplicate footers from individual pages
- Total Pages: 9 (Home + 6 content pages + community + feedback)
- Interactive Components: 3 (Community Forum, Feedback Form, Scroll Buttons)
- Database Tables: 6 (Users, Sessions, Accounts, etc.)
- External Links: 15+ resource links
- Frontend: Next.js 15, React, TypeScript
- Styling: Tailwind CSS
- Database: SQLite + Prisma ORM
- State Management: React hooks + localStorage
- Email Service: FormSubmit.co for feedback submissions
-
Firefox Icon Fixes:
- Added explicit PNG type declarations in metadata
- Added missing icon sizes (150x150, 310x310)
- Created favicons.html for Firefox-specific icon declarations
- Updated service worker to v6 for cache refresh
- Removed "maskable" purpose from icons
-
Microsoft Edge Icon Fixes:
- Created edge-specific icons with proper padding (70% logo size)
- Added edge-150x150.png and edge-310x310.png with 22-46px padding
- Updated browserconfig.xml to use padded icons
-
Samsung Internet Fixes:
- Changed theme_color from purple (#8b5cf6) to black (#000000)
- Regenerated favicon.ico with correct logo
-
Result: All browser icons now consistent and displaying correctly across Firefox, Edge, and Samsung Internet
-
Scroll Buttons Component:
- Added scroll-to-top and scroll-to-bottom buttons
- Buttons appear on the right side of the page
- Smooth scrolling animation
- Appears on pages with substantial content
- Added to: About, Conditions, Symptoms, Treatments, and Resources pages
-
Python Server Support:
- Added
app.pyfor Python-based server deployment - Added
server.jsfor Node.js server option - Alternative deployment options for production
- Added
The website is deployed on GitHub Pages and accessible at: https://jens-space.github.io/chronic-haven/
-
GitHub Pages (current)
- Run
npm run buildto generate static files indocs/ - Push to GitHub to deploy automatically
- Run
-
Python Server
python app.py
-
Node.js Server
node server.js
This project aims to provide valuable support for people with chronic invisible illnesses. Contributions are welcome, especially from:
- Healthcare professionals
- People with chronic conditions
- UX/UI designers
- Accessibility experts
This project is open source and available under the MIT License.
- Built with care for the chronic illness community
- Special thanks to healthcare professionals and advocates who provided guidance
- Design inspired by The Wellbeing Corner
- Icons and design elements from open source collections
Note: This website provides general information and tools but is not a substitute for professional medical advice. Always consult with qualified healthcare providers for personalized medical guidance.