{"id":22706914,"url":"https://github.com/caner-yesiltas/react-interview-q-a","last_synced_at":"2025-03-29T20:43:57.247Z","repository":{"id":255939394,"uuid":"853902722","full_name":"Caner-Yesiltas/React-Interview-Q-A","owner":"Caner-Yesiltas","description":"🎯 React Interview Q\u0026A App built with Bootstrap, featuring toggleable answers and responsive design.","archived":false,"fork":false,"pushed_at":"2025-02-23T01:31:53.000Z","size":16517,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-23T02:26:31.304Z","etag":null,"topics":["coding-practice","interview-preparation","reactbootstrap","responsive","toogle"],"latest_commit_sha":null,"homepage":"https://react-interview-questions-assigment.vercel.app","language":"JavaScript","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/Caner-Yesiltas.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}},"created_at":"2024-09-07T21:18:36.000Z","updated_at":"2025-02-23T01:31:56.000Z","dependencies_parsed_at":"2025-02-23T02:34:39.493Z","dependency_job_id":null,"html_url":"https://github.com/Caner-Yesiltas/React-Interview-Q-A","commit_stats":null,"previous_names":["caner-yesiltas/react-interview-questions-assigment","caner-yesiltas/react-interview-q-a"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caner-Yesiltas%2FReact-Interview-Q-A","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caner-Yesiltas%2FReact-Interview-Q-A/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caner-Yesiltas%2FReact-Interview-Q-A/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caner-Yesiltas%2FReact-Interview-Q-A/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Caner-Yesiltas","download_url":"https://codeload.github.com/Caner-Yesiltas/React-Interview-Q-A/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246243566,"owners_count":20746307,"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","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":["coding-practice","interview-preparation","reactbootstrap","responsive","toogle"],"created_at":"2024-12-10T10:10:22.642Z","updated_at":"2025-03-29T20:43:57.238Z","avatar_url":"https://github.com/Caner-Yesiltas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\n\u003cdiv align=\"center\"\u003e\n \u003ch1\u003e \n# React Interview Q\u0026A 🎯\n \u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003e\n    👉 \u003ca href=\"https://react-interview-questions-assigment.vercel.app/\"\u003eLive Demo\u003c/a\u003e 👈\n  \u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/assets/React-Interview.gif\" alt=\"Todo List Demo\" width=\"800\"/\u003e\n\u003c/div\u003e\n\n## 📌 About The Project\n\nAn interactive React application that displays common React interview questions and answers in an accordion-style interface. Perfect for React developers preparing for technical interviews or reviewing core React concepts.\n\n### ✨ Key Features\n\n- 📚 Comprehensive React interview Q\u0026A\n- 🔄 Interactive accordion interface\n- ⚡ Dynamic content rendering\n- 📱 Responsive design\n- 🎨 Bootstrap styling\n- 🔍 Clear question categorization\n- 👆 Easy-to-use toggle functionality\n\n### 🛠️ Built With\n\n- [React](https://reactjs.org/)\n- [Bootstrap](https://getbootstrap.com/)\n- CSS3\n\n## 🚀 Getting Started\n\n```bash\n# Clone the repository\ngit clone https://github.com/caneryesiltas/react-interview-qa.git\n\n# Navigate to project directory\ncd react-interview-qa\n\n# Install dependencies\nnpm install\n\n# Start the development server\nnpm start\n```\n\n## 💻 Project Structure\n\n```\nsrc/\n├── components/\n│   ├── MyHeader.jsx\n│   ├── Question.jsx\n│   └── InterviewAccord.jsx\n├── helper/\n│   ├── data.js\n│   └── icons.js\n├── styles/\n│   └── App.css\n└── App.js\n```\n\n## 🔍 Component Details\n\n### App Component\n- Main application container\n- Renders MyHeader and Question components\n- Manages overall layout structure\n\n### MyHeader Component\n- Displays the application title\n- Styled with Bootstrap\n- Responsive container design\n\n### Question Component\n- Maps through interview questions data\n- Renders individual InterviewAccord components\n- Handles data distribution\n\n### InterviewAccord Component\n- Interactive accordion functionality\n- Toggle state management\n- Dynamic content rendering\n- Custom styling with responsive design\n\n## 📱 Responsive Design\n\n- Bootstrap Grid System\n- Mobile-first approach\n- Flexible container widths\n- Responsive text sizing\n- Cross-browser compatibility\n\n## 🎯 Features Implementation\n\n### State Management\n- Uses React useState hook for accordion toggle\n- Efficient state updates\n- Controlled component pattern\n\n### Styling\n- Bootstrap integration\n- Custom CSS classes\n- Responsive containers\n- Dynamic icon rendering\n\n### Data Handling\n- External data file\n- Mapped rendering\n- Unique key implementation\n- Props distribution\n\n## 🔧 Installation Requirements\n\n- Node.js\n- npm or yarn\n- React 16.8+\n- Bootstrap 5+\n\n## 🚀 Quick Start\n\n1. Install dependencies:\n```bash\nnpm install\n```\n\n2. Start development server:\n```bash\nnpm start\n```\n\n3. Build for production:\n```bash\nnpm run build\n```\n\n## 📫 Contact\n\nCaner Yesiltas - caneryesiltas1@gmail.com\n\nProject Link: [https://react-interview-questions-assigment.vercel.app/](https://react-interview-questions-assigment.vercel.app/)\n\n---\nMade with 🎯 by Caner Yesiltas\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaner-yesiltas%2Freact-interview-q-a","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaner-yesiltas%2Freact-interview-q-a","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaner-yesiltas%2Freact-interview-q-a/lists"}