Client dev

.github/ISSUE_TEMPLATE/backend-template.yml

@@ -0,0 +1,110 @@
+name: 🔧 Backend Component
+description: Contribute by building or improving a backend route/controller/model/middleware
+title: '[feat] Backend: <Feature Name>'
+labels: ['backend', 'good first issue', 'help wanted']
+assignees:
+  - AdamsGeeky
+body:
+  - type: textarea
+    attributes:
+      label: 🧠 Feature Overview
+      description: |
+        Describe what this backend feature does and how it connects to the app’s functionality.
+        Mention whether this is a new route, controller, or update to an existing one.
+      placeholder: |
+        This task involves creating a POST endpoint for creating a new comment on a post...
+        It interacts with the Supabase database and requires user authentication.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 🔁 API Route & HTTP Method
+      description: |
+        Define the API endpoint and the HTTP method(s) used.
+        Example: `POST /api/comments` — creates a new comment.
+      placeholder: |
+        Example:
+        - Route: /api/posts/:id/comments
+        - Method: POST
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 🧱 Expected Data Model / Schema
+      description: |
+        Briefly outline the database structure or the Supabase table this task interacts with.
+        This helps contributors know what fields and validations are expected.
+      value: |
+        Table: `comments`
+        - id: UUID
+        - post_id: UUID
+        - user_id: UUID
+        - content: Text
+        - created_at: Timestamp
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 📚 Learning Resources (Required Before Starting)
+      description: |
+        Links and documentation contributors should review before starting.
+        These ensure they are familiar with Express, Supabase, and best practices.
+      value: |
+        - [Node.js Crash Course](https://www.youtube.com/watch?v=fBNz5xF-Kx4)
+        - [Express.js Docs](https://expressjs.com/)
+        - [Supabase JS Client](https://supabase.com/docs/guides/api)
+        - [REST API Design Tutorial](https://restfulapi.net/)
+        - [Intro to Middleware in Express](https://expressjs.com/en/guide/using-middleware.html)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: ✅ Prerequisites
+      description: |
+        What the contributor should already be comfortable with before working on this.
+      value: |
+        - Ability to run a local Node.js + Express server
+        - Basic understanding of async/await and HTTP request/response cycle
+        - Familiarity with `.env` usage and API key management
+        - Knows how to test API endpoints using Postman or Thunder Client
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 🧪 Suggested Test Cases
+      description: |
+        Outline how this feature should be tested.
+        Example: Valid input, invalid input, unauthorized request, etc.
+      value: |
+        - ✅ Should create a comment successfully when valid input is sent
+        - ❌ Should fail when the post ID is invalid
+        - ❌ Should reject if the user is not authenticated
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: 📁 Relevant File Paths
+      description: Suggest where to implement the logic (controller, model, route).
+      value: |
+        - `/src/controllers/comment.controller.js`
+        - `/src/routes/comment.routes.js`
+        - `/src/models/comment.model.js`
+        - `/src/middleware/auth.middleware.js`
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: 💡 Additional Notes
+      description: |
+        Mention things like environment variables, related components, or naming conventions.
+        Add any warnings or tips you think are helpful.
+      placeholder: Ensure you include try/catch for error handling. Follow the REST naming convention.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/frontend-template.yml

@@ -0,0 +1,77 @@
+name: 🚧 Frontend Component
+description: Contribute by building a frontend UI component using Next.js, ShadCN, and TailwindCSS
+title: '[feat] Component: <Component Name>'
+labels: ['frontend', 'good first issue', 'help wanted']
+assignees:
+  - AdamsGeeky
+body:
+  - type: textarea
+    attributes:
+      label: 📌 Component Overview
+      description: |
+        Describe the purpose and expected behavior of this frontend component.
+        Provide links to any design prototypes or references (Figma, Notion, etc.)
+        Helpful for understanding how this component fits into the app.
+      placeholder: |
+        This component is responsible for rendering...
+        It is located on the homepage/dashboard/profile page etc.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 🧱 UI Elements & Interactions
+      description: |
+        List and describe the main UI elements this component will include.
+        Include animation, responsiveness, dark/light mode if applicable.
+      value: |
+        - ✅ Button: Triggers a new post submission
+        - ✅ Card: Displays each user’s post with metadata
+        - ✅ Modal: For adding/editing a post
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 📚 Learning Resources (Required Before Starting)
+      description: |
+        Links and tutorials that contributors can review to complete this task.
+        Add or update if you found new helpful material!
+      value: |
+        - [ShadCN UI Documentation](https://ui.shadcn.dev/docs/components)
+        - [Next.js App Router Docs](https://nextjs.org/docs/app/building-your-application/routing)
+        - [TailwindCSS Docs](https://tailwindcss.com/docs)
+        - [React Components Crash Course](https://www.youtube.com/watch?v=bMknfKXIFA8)
+        - [Props & State in React](https://react.dev/learn/passing-props-to-a-component)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: ✅ Prerequisites
+      description: |
+        What should the contributor already understand before picking this task?
+        Use this to ensure beginner contributors are not overwhelmed.
+      value: |
+        - Basic understanding of React functional components
+        - Familiar with TailwindCSS utility classes
+        - Knows how to use `useState`, `useEffect`, and `props`
+        - Has installed Node.js and run a Next.js app locally
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 📷 Design References or Screenshots (Optional)
+      description: Add any Figma link, screenshot, or UI inspiration that describes how this should look.
+      placeholder: Paste image links or embed markdown here.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: 💡 Additional Notes
+      description: Any edge cases, dependencies, or file paths to keep in mind while building this.
+      placeholder: This component should be responsive and mobile-first. You may reuse components from /ui or /shared folders.
+    validations:
+      required: false