{"id":31283045,"url":"https://github.com/devadedeji/frinna","last_synced_at":"2025-09-24T04:06:01.624Z","repository":{"id":309095230,"uuid":"1032045582","full_name":"DevAdedeji/frinna","owner":"DevAdedeji","description":"Receive anonymous messages","archived":false,"fork":false,"pushed_at":"2025-08-17T17:31:43.000Z","size":588,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-17T18:06:40.425Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://frinna.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevAdedeji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-04T18:07:33.000Z","updated_at":"2025-08-13T22:34:44.000Z","dependencies_parsed_at":"2025-08-09T21:04:17.562Z","dependency_job_id":"aaa00402-aef1-43c9-9e37-6f5f7f45dd7b","html_url":"https://github.com/DevAdedeji/frinna","commit_stats":null,"previous_names":["devadedeji/frinna"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DevAdedeji/frinna","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevAdedeji%2Ffrinna","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevAdedeji%2Ffrinna/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevAdedeji%2Ffrinna/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevAdedeji%2Ffrinna/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevAdedeji","download_url":"https://codeload.github.com/DevAdedeji/frinna/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevAdedeji%2Ffrinna/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276689108,"owners_count":25686632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-24T02:00:09.776Z","response_time":97,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-24T04:06:00.591Z","updated_at":"2025-09-24T04:06:01.612Z","avatar_url":"https://github.com/DevAdedeji.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frinna - Anonymous Messaging Web Application\n\nFrinna is a full-stack anonymous messaging application built with React and Firebase. As a developer with 3 years of experience in Vue.js, I created this project as a hands-on challenge to master the React ecosystem, from component architecture and state management to automated testing and deployment.\n\n**Live Demo:** [https://frinna.vercel.app]\n\n## 📸 Screenshots\n\n\n| Sign In Page | Sign Up Page (with validation) | User Dashboard |\n| :---: | :---: | :---: |\n| ![Sign In Page Screenshot](.github/assets/signin.gif) | ![Sign Up Page Screenshot](.github/assets/signup.gif) | ![User Dashboard Screenshot](.github/assets/profile.png) |\n\n## ✨ Features\n- ✅ User Authentication (Email/Password)\n- ✅ Anonymous \"Mailbox\" System for one-way messages\n- ✅ Real-time, two-way chat for registered users\n- ✅ Message Reply functionality\n- ✅ Fully Responsive Design\n- ✅ Automated CI/CD pipeline with GitHub Actions\n\n## 🛠️ Tech Stack\n\nThis project leverages a modern, professional tech stack:\n\n*   **Framework:** React 19\n*   **Build Tool:** Vite\n*   **Language:** TypeScript\n*   **Styling:** Tailwind CSS\n*   **Routing:** React Router DOM v7.7\n*   **State Management:** Zustand\n*   **Backend \u0026 Database:** Firebase (Authentication \u0026 Firestore)\n*   **Form Handling:** React Hook Form\n*   **Notifications:** React Hot Toast\n*   **Testing:** Vitest \u0026 React Testing Library\n\n## 🤔 Architectural Decisions \u0026 Learnings\n\nAs a developer transitioning from Vue.js, several key decisions were made to deepen my understanding of the React ecosystem:\n\n1.  **Custom Components over UI Library:** I deliberately chose to build core components like `Button` and `Input` from scratch using Tailwind CSS instead of using a pre-built library. This forced me to master concepts like component polymorphism, `React.forwardRef`, and state management within reusable components.\n\n2.  **Zustand for Global State:** I selected Zustand for its simplicity, minimal boilerplate, and hook-based API. It felt like a natural and modern successor to the patterns I was familiar with from Pinia in the Vue world, making it an excellent tool for managing global authentication state.\n\n3.  **User-Centric Testing with RTL:** I am implementing a test suite using Vitest and React Testing Library to ensure the application is robust and maintainable. This approach focuses on testing the application from the user's perspective, which builds confidence in the app's functionality rather than its implementation details.\n\n## 🚀 Getting Started\n\nTo get a local copy up and running, follow these simple steps.\n\n### Prerequisites\n\n*   Node.js (v22)\n*   npm or yarn\n\n### Installation\n\n1.  **Clone the repository:**\n    ```sh\n    git clone https://github.com/devadedeji/frinna.git\n    ```\n2.  **Navigate to the project directory:**\n    ```sh\n    cd frinna\n    ```\n3.  **Install NPM packages:**\n    ```sh\n    npm install\n    ```\n\n### Environment Variables\n\nThis project uses Firebase for its backend. You will need to create your own Firebase project to get the necessary credentials.\n\n1.  Create a `.env.local` file in the root of the project.\n2.  Add your Firebase configuration variables. You can find these in your Firebase project settings.\n\n    ```env\n    # .env.local\n    VITE_FIREBASE_API_KEY=\"your_api_key\"\n    VITE_FIREBASE_AUTH_DOMAIN=\"your_auth_domain\"\n    VITE_FIREBASE_PROJECT_ID=\"your_project_id\"\n    VITE_FIREBASE_STORAGE_BUCKET=\"your_storage_bucket\"\n    VITE_FIREBASE_MESSAGING_SENDER_ID=\"your_sender_id\"\n    VITE_FIREBASE_APP_ID=\"your_app_id\"\n    ```\n\n### Running the Application\n\nStart the development server:\n```sh\nnpm run dev\n```\nOpen http://localhost:5173 to view it in the browser.\n\n### Running Tests\nTo run the component and integration tests, use the following command:\n```sh\nnpm run test\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevadedeji%2Ffrinna","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevadedeji%2Ffrinna","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevadedeji%2Ffrinna/lists"}