https://github.com/surajgharpankar28/react-coding-prep
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.
https://github.com/surajgharpankar28/react-coding-prep
htmlcss interview-questions interviewpreparation javascript prep react-interview-questions reactjs tailwindcss vercel
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/surajgharpankar28/react-coding-prep
- Owner: surajgharpankar28
- Created: 2025-01-28T13:05:03.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-27T13:51:08.000Z (3 months ago)
- Last Synced: 2025-02-27T17:58:31.549Z (3 months ago)
- Topics: htmlcss, interview-questions, interviewpreparation, javascript, prep, react-interview-questions, reactjs, tailwindcss, vercel
- Language: JavaScript
- Homepage: https://react-coding-prep.vercel.app/
- Size: 1.86 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 React Coding Challenge - Level Up Your React Skills!
Welcome 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.
## 🔗 [Checkout Live here](https://react-coding-prep.vercel.app/)
## 📌 Features
✅ **Dynamic Question Loading** – Questions are stored in a separate file and rendered automatically.
✅ **SEO-Friendly Dynamic Routing** – Each question has a clean, shareable URL.
✅ **Live Exploration & GitHub Integration** – Jump straight into a live preview or check the source code.
✅ **Pagination Support** – Easily navigate through multiple challenge pages.
---
## 🚀 How It Works
### 📥 Question List Import
All challenge questions are stored in a dedicated file:
```js
import questionList from "../questionList";
```
This object maps **question numbers to their respective titles**, making it easy to iterate and generate UI elements dynamically.
Adding a new challenge? **Simply update the `questionList` file**, and the UI updates automatically—no need for manual changes in the component!
### 🔗 Dynamic Routing for Each Question
Every challenge has a unique, dynamically generated route:
```js
Explore Live
```
For example, if the challenge is **"Building a Custom React Hook"**, the URL becomes:
```
/question-2-building-a-custom-react-hook
```
This approach ensures **clean, readable URLs** that improve user experience and SEO.
### 🛠 GitHub Integration
Each challenge has a **direct GitHub link** to its corresponding source code:
```js
GitHub
```
Instead of searching through a large repository, users can **jump directly** to the specific question folder.
---
## 🎨 UI Overview
The landing page is designed to be **clean, responsive, and user-friendly**:
- **Title & Subtitle**: Introduces the challenge and encourages participation.
- **Grid Layout**: Displays challenges in a visually appealing format.
- **Action Buttons**: Explore live or view source code with a single click.
- **Pagination Controls**: Navigate through multiple pages effortlessly.
---
## 📜 Folder Structure
```
📂 src
┣ 📂 pages
┃ ┣ 📂 Question_1
┃ ┣ 📂 Question_2
┃ ┗ 📂 Question_N
┣ 📜 questionList.js
┗ 📜 QuestionList.jsx
```
- **`questionList.js`** – Contains the list of questions.
- **`QuestionList.jsx`** – Renders the questions dynamically.
- **`pages/Question_X/`** – Individual question implementations.
---
## 🏗️ Setup & Installation
### 1️⃣ Clone the Repository
```sh
git clone https://github.com/surajgharpankar28/React-Coding-Prep.git
```
### 2️⃣ Install Dependencies
```sh
cd React-Coding-Prep
npm install
```
### 3️⃣ Start the Development Server
```sh
npm start
```
The app will be available at **`http://localhost:3000`**.
---
## 💡 Future Improvements
- ✅ Add filtering based on difficulty levels.
- ✅ Implement user progress tracking.
- ✅ Improve accessibility and performance optimizations.
---
## 💬 Feedback
If you have any suggestions, feel free to open an issue or contribute to the project. Let's grow together! 🚀
**[GitHub Repo](https://github.com/surajgharpankar28/React-Coding-Prep)**