{"id":24782335,"url":"https://github.com/surajgharpankar28/react-coding-prep","last_synced_at":"2026-04-09T11:42:47.613Z","repository":{"id":274645690,"uuid":"923552089","full_name":"surajgharpankar28/React-Coding-Prep","owner":"surajgharpankar28","description":"A beautifully designed React Coding Interview Preparation platform that provides common React interview questions with detailed answers. This project is built with React, React Router, and Tailwind CSS, featuring a sleek UI with Glassmorphism effects.","archived":false,"fork":false,"pushed_at":"2025-02-27T13:51:08.000Z","size":1948,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T17:58:31.549Z","etag":null,"topics":["htmlcss","interview-questions","interviewpreparation","javascript","prep","react-interview-questions","reactjs","tailwindcss","vercel"],"latest_commit_sha":null,"homepage":"https://react-coding-prep.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/surajgharpankar28.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":"2025-01-28T13:05:03.000Z","updated_at":"2025-02-27T13:51:12.000Z","dependencies_parsed_at":"2025-02-20T17:27:16.787Z","dependency_job_id":"cadf04f9-b5b2-4300-8474-dd9c0f8d5c0e","html_url":"https://github.com/surajgharpankar28/React-Coding-Prep","commit_stats":null,"previous_names":["surajgharpankar28/react-interview-coding-question","surajgharpankar28/react-coding-prep"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FReact-Coding-Prep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FReact-Coding-Prep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FReact-Coding-Prep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FReact-Coding-Prep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surajgharpankar28","download_url":"https://codeload.github.com/surajgharpankar28/React-Coding-Prep/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245215251,"owners_count":20578932,"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":["htmlcss","interview-questions","interviewpreparation","javascript","prep","react-interview-questions","reactjs","tailwindcss","vercel"],"created_at":"2025-01-29T11:16:50.181Z","updated_at":"2025-12-30T23:28:03.221Z","avatar_url":"https://github.com/surajgharpankar28.png","language":"JavaScript","readme":"# 🚀 React Coding Challenge - Level Up Your React Skills!\n\nWelcome to my **28 Days React Coding Challenge**! This project is designed to enhance your React skills with daily hands-on challenges. Each question is dynamically loaded, providing an interactive and seamless developer experience.\n\n## 🔗 [Checkout Live here](https://react-coding-prep.vercel.app/)\n\n## 📌 Features\n\n✅ **Dynamic Question Loading** – Questions are stored in a separate file and rendered automatically.  \n✅ **SEO-Friendly Dynamic Routing** – Each question has a clean, shareable URL.  \n✅ **Live Exploration \u0026 GitHub Integration** – Jump straight into a live preview or check the source code.  \n✅ **Pagination Support** – Easily navigate through multiple challenge pages.  \n\n---\n\n## 🚀 How It Works\n\n### 📥 Question List Import\nAll challenge questions are stored in a dedicated file:\n```js\nimport questionList from \"../questionList\";\n```\nThis object maps **question numbers to their respective titles**, making it easy to iterate and generate UI elements dynamically.\n\nAdding a new challenge? **Simply update the `questionList` file**, and the UI updates automatically—no need for manual changes in the component!\n\n### 🔗 Dynamic Routing for Each Question\nEvery challenge has a unique, dynamically generated route:\n```js\n\u003cLink to={`/question-${id}-${title.toLowerCase().replace(/\\s+/g, \"-\")}`}\u003e\n  Explore Live\n\u003c/Link\u003e\n```\nFor example, if the challenge is **\"Building a Custom React Hook\"**, the URL becomes:\n```\n/question-2-building-a-custom-react-hook\n```\nThis approach ensures **clean, readable URLs** that improve user experience and SEO.\n\n### 🛠 GitHub Integration\nEach challenge has a **direct GitHub link** to its corresponding source code:\n```js\n\u003cLink\n  to={`https://github.com/surajgharpankar28/React-Coding-Prep/tree/main/src/pages/Question_${id}`}\n\u003e\n  GitHub\n\u003c/Link\u003e\n```\nInstead of searching through a large repository, users can **jump directly** to the specific question folder.\n\n---\n\n## 🎨 UI Overview\nThe landing page is designed to be **clean, responsive, and user-friendly**:\n- **Title \u0026 Subtitle**: Introduces the challenge and encourages participation.\n- **Grid Layout**: Displays challenges in a visually appealing format.\n- **Action Buttons**: Explore live or view source code with a single click.\n- **Pagination Controls**: Navigate through multiple pages effortlessly.\n\n---\n\n## 📜 Folder Structure\n```\n📂 src\n ┣ 📂 pages\n ┃ ┣ 📂 Question_1\n ┃ ┣ 📂 Question_2\n ┃ ┗ 📂 Question_N\n ┣ 📜 questionList.js\n ┗ 📜 QuestionList.jsx\n```\n- **`questionList.js`** – Contains the list of questions.\n- **`QuestionList.jsx`** – Renders the questions dynamically.\n- **`pages/Question_X/`** – Individual question implementations.\n\n---\n\n## 🏗️ Setup \u0026 Installation\n### 1️⃣ Clone the Repository\n```sh\ngit clone https://github.com/surajgharpankar28/React-Coding-Prep.git\n```\n\n### 2️⃣ Install Dependencies\n```sh\ncd React-Coding-Prep\nnpm install\n```\n\n### 3️⃣ Start the Development Server\n```sh\nnpm start\n```\n\nThe app will be available at **`http://localhost:3000`**.\n\n---\n\n## 💡 Future Improvements\n- ✅ Add filtering based on difficulty levels.\n- ✅ Implement user progress tracking.\n- ✅ Improve accessibility and performance optimizations.\n\n---\n\n## 💬 Feedback\nIf you have any suggestions, feel free to open an issue or contribute to the project. Let's grow together! 🚀\n\n**[GitHub Repo](https://github.com/surajgharpankar28/React-Coding-Prep)**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurajgharpankar28%2Freact-coding-prep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurajgharpankar28%2Freact-coding-prep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurajgharpankar28%2Freact-coding-prep/lists"}