major updates

docs/tech_docs/css.md

@@ -0,0 +1,90 @@
+# Best Practices for CSS with Bootstrap, Tailwind, and Other Tools
+
+## General CSS Best Practices
+
+- **Modularity:** Organize CSS into modular files to improve readability and maintainability.
+- **Descriptive Class Names:** Use clear and self-explanatory class names such as `.main-button` over ambiguous ones like `btn1`.
+- **Avoid Inline Styles:** Rely on external stylesheets over inline styles for a more organized and reusable CSS.
+- **Use Variables:** Adopt CSS Custom Properties to maintain consistent design elements and ease modifications.
+- **Specificity Balance:** Avoid overly specific or too generic selectors to ensure ease of styling and overriding.
+- **Consistent Formatting:** Adhere to a uniform convention for indentation, selector naming, and property order.
+- **Responsive Design:** Adopt a mobile-first design approach and ensure adaptability across various devices.
+- **Performance:** Optimize CSS to minimize browser reflows or repaints, ensuring a smooth user experience.
+
+### Expanding Your CSS Toolkit
+
+- **CSS Preprocessors:** Consider leveraging preprocessors like Sass or LESS for advanced features.
+- **CSS Linters:** Incorporate tools like Stylelint to identify and rectify stylistic or functional issues in your CSS.
+- **CSS Style Guides:** Adopt or define a style guide to maintain consistent CSS styling across projects.
+
+## Integrating Bootstrap
+
+### Getting Started with Bootstrap
+
+- **Bootstrap Components:** Utilize built-in components for design consistency.
+- **Customizing Bootstrap:** Override default styles with your custom styles to maintain brand consistency.
+- **Sass with Bootstrap:** Use Sass for deeper customization of Bootstrap components.
+- **Lint Your CSS:** Incorporate CSS linters to detect and rectify potential issues in your styles.
+
+### Example Usage with Bootstrap
+
+```css
+@import "~bootstrap/scss/bootstrap";
+$primary-color: #007bff;
+body {
+  background-color: $primary-color;
+}
+.custom-button {
+  background-color: $primary-color;
+  color: white;
+}
+```
+
+## Navigating Tailwind CSS
+
+### Dive into Tailwind
+
+- **Utility-First:** Embrace the utility-first paradigm by combining small utility classes directly in the markup.
+- **Customizable:** Personalize Tailwind's design tokens to your needs via its configuration file.
+- **Responsiveness:** Use utility prefixes for varying responsive designs.
+- **PurgeCSS:** Utilize PurgeCSS to optimize the final CSS build size by removing unused styles.
+
+### Example Usage with Tailwind
+
+```html
+<div class="bg-blue-500 text-white p-6 rounded-lg shadow-md">
+  <h1 class="text-2xl font-bold mb-4">Tailwind Example</h1>
+  <p>Demonstration of the utility-first design approach with Tailwind CSS.</p>
+</div>
+```
+
+## Bootstrap vs Tailwind CSS
+
+### Philosophy
+
+- **Bootstrap:** Primarily component-based, offering ready-to-use UI elements.
+- **Tailwind CSS:** Adopts a utility-first approach, allowing granular control over styles.
+
+### Customization
+
+- **Bootstrap:** Customize by overriding Sass variables and mixins.
+- **Tailwind CSS:** Personalize styles via the Tailwind configuration file.
+
+### Learning Curve
+
+- **Bootstrap:** Generally considered beginner-friendly with its comprehensive documentation.
+- **Tailwind CSS:** Can initially feel counterintuitive, especially for those new to the utility-first approach, but becomes intuitive with practice.
+
+### Performance
+
+- **Bootstrap:** Potentially contains redundant styles which may not be used in every project.
+- **Tailwind CSS:** Initially has a large file size but optimizes significantly with tools like PurgeCSS.
+
+### Community
+
+- **Bootstrap:** Boasts a vast and established community.
+- **Tailwind CSS:** Rapidly growing in popularity with an active community.
+
+## Final Thoughts
+
+Both Bootstrap and Tailwind CSS offer unique strengths. Your choice between them should be based on the specific requirements of your project and your familiarity with each tool. Employing best practices in CSS, regardless of the tool chosen, is imperative for creating responsive and elegant designs.

docs/tech_docs/dev_choices.md

@@ -0,0 +1,60 @@
+### Node.js vs. Python (FastAPI):
+
+**Node.js**:
+- **Non-blocking I/O**: Node.js excels in handling asynchronous operations and can manage multiple connections simultaneously, which is advantageous for an API gateway.
+- **JavaScript Ecosystem**: By using JavaScript on both the frontend and backend, you can maintain consistency in your codebase and potentially reduce context switching for developers.
+- **Performance**: Node.js is optimized for event-driven architecture, making it suitable for microservices that an API gateway often interacts with.
+
+**Python with FastAPI**:
+- **Fast and Modern**: FastAPI is a modern framework that is designed to be fast and is based on standard Python 3.7+ type hints.
+- **API-centric with Automatic Docs**: FastAPI is ideal for creating APIs with automatic interactive API documentation and is known for its ease of use.
+- **Data Processing**: Python excels in computation and data processing, which might be beneficial if your backend logic requires heavy data manipulation.
+
+**Considering Kong**:
+- If you are deploying Kong as an API gateway, Node.js could be a more synergistic choice due to its performance characteristics and the fact that Kong is also built using a similar technology stack (NGINX and Lua).
+- However, FastAPI's performance is comparable for many use cases, and it might offer faster development speed due to Python's ease of writing and readability.
+
+### When to Use Which Technology:
+
+- **Use Node.js** if your primary concern is handling a high number of concurrent connections or if you prefer a uniform language across your stack.
+- **Use Python with FastAPI** if you want rapid development with automatic documentation and validation, and your application involves complex data processing or computation.
+
+In conclusion, the choice between Node.js and Python for the backend when using Kong as an API gateway depends on your performance needs, developer expertise, and specific application requirements. Node.js might offer better performance in a high-throughput environment, while Python with FastAPI could provide faster development cycles and is highly performant in its own right.
+
+---
+
+Switching between Node.js and Python can vary in difficulty based on several factors:
+
+### Syntax and Language Features:
+- Python's readability and straightforward syntax often make it user-friendly and easy to get started with.
+- JavaScript, used in Node.js, incorporates different syntax and language features, like asynchronous programming, which have a steeper learning curve.
+
+### Runtime Environment:
+- Node.js serves as a JavaScript runtime outside the browser, potentially easing the transition for those familiar with JavaScript in frontend development.
+- Python's runtime environment is quite different, widely used in diverse fields from web development to data analytics.
+
+### Ecosystem and Libraries:
+- Both Node.js and Python boast extensive libraries and packages, available through NPM and pip, respectively.
+- Familiarity with the specific packages and tools in each ecosystem is crucial as they cater to different functionalities and use cases.
+
+### Asynchronous Programming:
+- Node.js's event-driven architecture is inherently asynchronous, contrasting with Python’s default synchronous execution.
+- Python can emulate asynchronous behavior with frameworks like `asyncio`, but it requires a paradigm shift from Node.js's native async patterns.
+
+### Development Tools and Environment:
+- Many IDEs support both Node.js and Python, aiding the transition.
+- Each language has unique debugging tools and practices, necessitating a period of adaptation.
+
+### Type System:
+- JavaScript is dynamically typed, while Python supports dynamic typing and optional static typing via type annotations.
+- Developers may need to adapt their coding practices to these type system differences.
+
+### Context Switching:
+- Regularly alternating between Node.js and Python can lead to cognitive overhead due to differing syntax and practices.
+
+### Performance Characteristics:
+- Each language has its own performance considerations and optimization strategies that require a distinct understanding.
+
+Developers with experience in both Node.js and Python might find switching back and forth manageable. For others, it can be challenging initially but becomes easier with practice. Both languages are well-documented and supported by robust communities, facilitating the learning process.
+
+---