Forbidden Ramen 🍜

A fun and interactive ramen builder that lets you craft your perfect bowl, powered by AI and built with the latest coding tools. This project showcases how AI can help create engaging, accessible web experiences that are both beautiful and functional.

Overview

Forbidden Ramen is a modern web application that demonstrates how AI can assist in building professional-grade web applications. The project showcases:

• AI-driven development workflows
• Modern frontend engineering practices
• Accessibility-first design
• Performance optimization
• Comprehensive testing
• Theme system implementation

Features

Core Functionality

• 🍜 Interactive Ramen Builder with real-time price calculation
• ♿ Fully accessible UI with keyboard navigation and screen reader support
• 🎨 Responsive design with futuristic glassmorphism aesthetic
• ⚡ Optimized performance with Next.js and CSS Modules
• 🧪 Comprehensive test coverage with Jest and Testing Library
• 🌙 Dark/Light theme support with system preference detection

AI-Driven Development

This project was built using AI-assisted development workflows, demonstrating how AI can:

• 🤖 Generate and refine UI components with accessibility in mind
• 🔍 Implement complex state management and business logic
• 🎯 Write comprehensive tests and documentation
• 🔄 Iterate on design and user experience

Current Limitations

As a demonstration project, Forbidden Ramen has some intentional limitations:

• 💾 No persistent storage - selections are not saved between sessions
• 🔒 No user authentication or order history
• 🛒 No actual ordering functionality - this is a UI/UX demo

Future Enhancements

Planned features and improvements:

• 🗄️ Database integration for order persistence
• 👥 User accounts and order history
• 🌍 Internationalization and localization
• 🤖 AI-powered order recommendations

Tech Stack

• ⚡ Next.js 14
• 🌊 Netlify
• 🧪 Jest
• 🎬 Framer Motion
• 🎨 CSS Modules
• 🌪️ Windsurf

Getting Started

1. Clone the repository:

   git clone https://github.com/Philip-Walsh/www.spaghettis.git

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser.

Development Workflow

This project follows a modern development workflow:

1. Feature branches for new development
2. Pull requests for code review
3. Automated testing on push
4. Continuous deployment via Netlify

Testing

Run the test suite:

npm test

Run tests with coverage:

npm run test:coverage

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with ❤️ using AI-assisted development
• Inspired by the future of web development
• Special thanks to the Windsurf team for their support