A platform for sharing career journey stories - built while learning visual-first, AI-assisted full-stack development.
📚 This is a learning project. I'm a visual learner and frontend developer exploring modern tools (n8n, Claude Code, Figma MCP) that let me build complete products without losing my soul to traditional backend development.
Goodsomeday is a platform for sharing transformative career journey stories - moments when people faced barriers in tech, reflected on their experiences, and took action that led to meaningful change.
Inspired by: Australia's recent Leaky Pipeline Report showing where we lose women in tech careers.
Stories on Goodsomeday follow a narrative arc designed to move from victimhood to empowerment:
- What happened - The negative experience or barrier (burnout, discrimination, imposter syndrome, lack of support)
- Reflection - How it made them think, what they realized about themselves or the system
- Action - What they did about it (changed environments, set boundaries, found community, left tech, advocated for change)
- Transformation - How they've grown and what changed as a result
Stories are categorized by when they left (or almost left) the pipeline:
- Student - Barriers during education (high school, university)
- Early Career - First 0-5 years in the industry
- Mid-Career - 5+ years, experienced professionals
The goal: Help others see that hope comes from action and change. Whether someone stayed in tech with new boundaries, found fulfillment elsewhere, or is still figuring it out - every story shows a path forward.
The platform focuses on authentic, structured storytelling with an emphasis on accessibility and inclusive design.
Frontend (My Comfort Zone)
- Next.js 14 - React framework with App Router
- TypeScript - Type safety
- Tailwind CSS - Utility-first styling
- Lucide React - Icons
- Focus: Beautiful, accessible interfaces for ALL users
Backend (Visual & AI-Assisted)
- n8n - Visual workflow automation (no Express.js!)
- PostgreSQL - Database (accessed via n8n nodes)
- Visual drag-and-drop logic instead of hand-coded APIs
Infrastructure
AI & Automation
- Claude Code - AI-assisted component generation
- Claude API - Automated release notes
- Figma MCP - Design-to-code integration (future goal)
Tools & Workflow
- Linear - Project management with learning documentation
- Figma - Design system and component library
- GitHub - Version control with PR workflow
This project exists to answer a question: Can a visual learner who loves frontend development build complete products using modern AI and no-code tools - without becoming a traditional backend developer?
I'm not learning "full-stack" the traditional way. I'm learning visual-first, AI-assisted full-stack:
What I'm Using:
- 🎨 n8n for backend logic (drag-and-drop workflows, not Express.js)
- 🤖 Claude Code for component generation (review, don't write from scratch)
- 📐 Figma MCP for design-to-code (the real end goal)
What I'm NOT Doing:
- ❌ Hand-coding CRUD APIs
- ❌ Writing raw SQL queries
- ❌ Becoming a database optimization expert
- ❌ Spending months on traditional backend learning
What I AM Doing:
- ✅ Using visual tools that match how I think
- ✅ Letting AI handle boilerplate I don't want to write
- ✅ Focusing on beautiful, accessible frontends
- ✅ Building toward design system automation
- ✅ Shipping a product that helps people
I care about:
- Beautiful, accessible interfaces
- Equality and fair work in tech
- Design systems and collaboration
- Making technology approachable for everyone
I don't care about:
- Writing server boilerplate manually
- SQL optimization minutiae
- Pretending to love what I don't
The future isn't "everyone becomes a traditional full-stack developer." It's "use modern tools to build on your unique strengths."
Technical:
- Visual workflow design (n8n)
- AI-assisted development (Claude Code)
- Backend concepts (without drowning in syntax)
- Design-to-code integration (Figma MCP)
- Infrastructure basics (just enough to be dangerous)
Professional:
- Building in public
- Systematic learning documentation
- Git workflow best practices
- Strategic tool selection
- Learning efficiency over mastery
Track My Progress:
- Changelog - What's been built
- Learning Resources - What I learned building each feature
- Architecture - How it all fits together
Current (MVP):
- ✅ Story submission with visual validation (n8n workflow)
- ✅ Story feed with filtering by pipeline stage
- ✅ Light/dark theme system (accessible color contrast)
- ✅ Admin moderation panel
- ✅ Automated release notes (Claude API)
In Progress:
- 🔄 Visual backend workflows (replacing traditional API code)
- 🔄 AI-generated components (Claude Code + Figma specs)
- 🔄 Accessibility-first design system
Planned (v2.0+):
- 📋 Figma MCP integration (design → code automation)
- 📋 Design system documentation generator
- 📋 Comments on stories
- 📋 User authentication
- 📋 Story reactions/likes
- 📋 Search functionality
- Node.js 20.x or higher
- npm or yarn
- VPS with Ubuntu 22.04 (for backend)
- PostgreSQL 14+
- Domain name (optional, for SSL)
# Clone the repository
git clone https://github.com/MoodyBones/goodsomeday.git
cd goodsomeday
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your values
# Run development server
npm run devOpen http://localhost:3000 to see the app.
# .env.local
NEXT_PUBLIC_API_URL=https://your-n8n-instance.com/webhookFor detailed setup instructions including VPS, database, and n8n configuration, see docs/SETUP.md.
goodsomeday/
├── src/
│ ├── app/ # Next.js app directory
│ │ ├── page.tsx # Home page
│ │ ├── admin/ # Admin routes
│ │ └── changelog/ # Changelog page
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ └── features/ # Feature-specific components
│ ├── contexts/ # React contexts (theme, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities and API client
│ └── types/ # TypeScript type definitions
├── docs/
│ ├── api/ # API documentation
│ ├── learning-resources/ # Learning documentation
│ └── ARCHITECTURE.md # System architecture
└── public/ # Static assets
The backend is built with n8n workflows hosted on a VPS. Main endpoints:
POST /webhook/submit-story- Submit a new storyGET /webhook/get-stories- Retrieve approved storiesPOST /webhook/learning-journal- Record learning data (internal)
Full API documentation: docs/api/README.md
Frontend: Deployed on Vercel Backend: Self-hosted on Hostinger VPS
See docs/SETUP.md for complete deployment instructions.
This is primarily a learning project, but feedback and suggestions are welcome!
- Check existing issues or create a new one
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See CONTRIBUTING.md for more details.
This project is licensed under the MIT License - see the LICENSE file for details.
- Australia's Leaky Pipeline Report - The inspiration for this project
- Josh Comeau - Dark mode implementation patterns
- n8n Community - Visual workflow automation inspiration
- Anthropic - Claude Code and API for AI-assisted development
- Linear - Amazing project management tool
- The Visual Learning Community - For showing there are many paths to building
Mel Jones (MoodyBones)
Visual learner • Frontend developer • Accessibility advocate
- GitHub: @MoodyBones
- Project: goodsomeday
- LinkedIn: Connect with me
- Substack: @m00dy
I'm building this project in public and documenting a non-traditional path to full-stack development.
If you're:
- A visual learner
- Frontend-focused but need backend capabilities
- Interested in AI-assisted development
- Exploring n8n or Figma MCP
- Building on your unique strengths
Follow along!
- ⭐ Star this repo to follow the journey
- 📖 Read the learning docs
- 💬 Ask questions in Issues
- 🐦 Follow updates on [LinkedIn/Substack]
Let's build the future where tools adapt to humans, not the other way around. 🚀
Built with ❤️, visual thinking, and AI assistance by MoodyBones