# How to Use This Implementation Plan with AI Coding Assistants

1. **Save this plan** as a markdown (.md) file in your project directory
2. **Open the file** in your preferred code editor with Cursor or Windsurf AI assistant
3. **Copy and paste** the following prompt to your AI assistant:

   "I want to implement this project following the implementation plan in this file. Let's start with the first unchecked item. For each step: 1) Ask me any clarifying questions if something is unclear before proceeding, 2) Explain what needs to be done, 3) Write the necessary code, 4) Check the box when complete (change `- [ ]` to `- [x]`), then 5) Move to the next unchecked item. After completing logical groups of steps, commit the changes with a descriptive message. Let's begin with step #1."

4. **Track your progress** by checking off completed items as you go
5. **Commit regularly** after logical groups of steps are completed

# Implementation Plan for PoliLens

## Project Overview
PoliLens is a social platform designed to enhance civic engagement by providing simplified political information and real-time updates to users. The project architecture consists of a React.js frontend for web and mobile applications using React Native, a Node.js backend using Express.js, and a PostgreSQL database for data storage.

---

## Phase 1: Project Setup

- [ ] 1. Create a new Git repository for the project
- [ ] 2. Initialize the project with npm: `npm init` and create `package.json`
- [ ] 3. Create `.gitignore` file with entries for `node_modules/` and environment files
- [ ] 4. Create `README.md` with project description and setup instructions
- [ ] 5. Create a `src/` directory for the source code
- [ ] 6. Create a `tests/` directory for test files
- [ ] 7. Install essential dependencies for frontend:
      - `npm install react react-dom react-router-dom` for web app
      - `npm install react-native` for mobile app
- [ ] 8. Install backend dependencies:
      - `npm install express cors body-parser dotenv` 
- [ ] 9. Install development dependencies:
      - `npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react`
- [ ] 10. Create `webpack.config.js` with basic configuration for bundling
- [ ] 11. Create `.babelrc` file for Babel configuration to support React
- [ ] 12. Create `src/index.js` as the application entry point for the frontend
- [ ] 13. Create `src/index.html` as a basic template for the web app
- [ ] 14. Create `src/server.js` for the backend entry point
- [ ] 15. Create an initial testing rig:
      - Install `jest` and configure for unit testing
- [ ] 16. Write a unit test to verify project is set up properly in Jest (e.g., mock test of a simple function)
- [ ] 17. Set up a CI pipeline using GitHub Actions with a workflow file at `.github/workflows/ci.yml`

---

## Phase 2: Frontend Development

### User Authentication Setup

- [ ] 18. Create `src/components/auth/` directory for authentication components
- [ ] 19. Create file `LoginForm.js` in `src/components/auth/` and develop a base Login form structure
- [ ] 20. Add email input field in `LoginForm.js`
- [ ] 21. Add password input field in `LoginForm.js`
- [ ] 22. Add submit button to `LoginForm.js`
- [ ] 23. Add form validation for email field in `LoginForm.js`
- [ ] 24. Add form validation for password field in `LoginForm.js`
- [ ] 25. Write unit tests for email validation feature using Jest for `LoginForm.js`
- [ ] 26. Write unit tests for password validation feature using Jest for `LoginForm.js`
- [ ] 27. Create `src/services/auth.js` for handling authentication API calls to the backend
- [ ] 28. Implement login API call function in `auth.js` to POST credentials
- [ ] 29. Write unit tests for the login API call function in `auth.js`
- [ ] 30. Connect `LoginForm` submit handler to the auth service for login functionality
- [ ] 31. Add loading state management to `LoginForm` during the API call
- [ ] 32. Add error handling for failed login attempts in `LoginForm.js`
- [ ] 33. Write integration tests for complete login flow checking success and displayed errors

### User Profile Management Setup

- [ ] 34. Create `src/components/profile/` directory for user profile components
- [ ] 35. Create file `UserProfile.js` in `src/components/profile/` to display user profile details
- [ ] 36. Initialize `UserProfile` component with basic state management for displaying user data
- [ ] 37. Create an API call in `auth.js` to get user profile once logged in
- [ ] 38. Write a unit test for the get user profile API call function in `auth.js`
- [ ] 39. Display user profile data in `UserProfile.js`
- [ ] 40. Create editing functionality in `UserProfile.js` for user data updates
- [ ] 41. Write unit tests for user profile editing functions
- [ ] 42. Integrate loading state and error handling for profile updating in `UserProfile.js`
- [ ] 43. Write integration tests to ensure all functionality of the user profile component

### Community Engagement Tools

- [ ] 44. Create `src/components/community/` directory for community components
- [ ] 45. Create `CommunityFeed.js` in `src/components/community/` to display user discussions
- [ ] 46. Initialize state management for fetching and displaying discussions in `CommunityFeed.js`
- [ ] 47. Set up API calls in a new `community.js` service file to get discussions from the backend
- [ ] 48. Write unit tests for get discussions API call in `community.js`
- [ ] 49. Build UI to display a list of discussions with a "Join Discussion" button in `CommunityFeed.js`
- [ ] 50. Implement functionality to add a new discussion in `CommunityFeed.js`
- [ ] 51. Add loading state for discussions and error displays in `CommunityFeed.js`
- [ ] 52. Write integration tests for the community feed and discussion joining functionalities
- [ ] 53. Create a separate `Discussion.js` component for individual discussion threads
- [ ] 54. Implement dynamic routing for discussions in `src/App.js` to handle specific discussions
- [ ] 55. Write tests to ensure routing works correctly in `Discussion.js`

---

## Phase 3: Backend Development

### Database Schema Setup

- [ ] 56. Set up a local PostgreSQL database and create a connection using `pg` package
- [ ] 57. Create a file for database migrations to set up users, discussions, and posts tables
- [ ] 58. Write SQL schemas for `users`, `discussions`, and `posts`
- [ ] 59. Implement a way to seed initial data into the tables for development
- [ ] 60. Set up connection pooling for performance and optimize queries
- [ ] 61. Write integration tests using `pg` to ensure schema structures work as expected

### API Endpoints

- [ ] 62. Create RESTful API routes in `src/routes/auth.js` for user authentication
- [ ] 63. Implement API routes in `src/routes/community.js` to handle discussions
- [ ] 64. Set up API for retrieving user profiles in `src/routes/auth.js`
- [ ] 65. Create middleware for authentication checks using JWT
- [ ] 66. Write integration tests for all created API routes

### Data Handling

- [ ] 67. Set up data handling functions (GET, POST) for user authentication and community discussions
- [ ] 68. Write validation checks for incoming requests using `Joi` or other libraries
- [ ] 69. Implement API rate limiting on sensitive routes
- [ ] 70. Use environment variables for secure management of sensitive credentials

---

## Phase 4: CI/CD and Deployment

### Preparation for Deployment

- [ ] 71. Finalize the development environment setup in `AWS Elastic Beanstalk`
- [ ] 72. Write deployment scripts using Docker to containerize both frontend and backend
- [ ] 73. Set up AWS RDS for PostgreSQL hosting
- [ ] 74. Configure `GitHub Actions` for CI/CD pipeline to automate testing and deployment processes
- [ ] 75. Write a final set of tests to ensure that the deployment pipeline operates correctly and health checks on the environment
- [ ] 76. Conduct a test deployment to ensure everything operates smoothly

---

## Phase 5: Post-Launch Activities and Monitoring 

### Monitoring and Feedback Collection

- [ ] 77. Integrate logging and error tracking tools like Sentry to monitor production applications
- [ ] 78. Set up user feedback collection through in-app surveys
- [ ] 79. Create an analytics dashboard focusing on engagement metrics
- [ ] 80. Schedule regular releases for user-requested features based on incoming feedback

---

Each of these steps is designed to ensure a comprehensive and methodically constructed application that meets the needs of PoliLens and its users. Following this plan will help establish a solid foundation for both the development and launch of the project.