Frontend Task Submission - alihatemramadan5@gmail.com

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,51 +1,90 @@
-# Frontend Task 2 – React Quiz App
+# Quiz Application
 
-Welcome to Task 2 of the frontend assessment. This task focuses on your ability to build a functional React app using proper state management and API integration.
+A modern quiz application built with React, TypeScript, and Vite. This application allows users to take interactive quizzes with multiple-choice questions.
 
-## 🎯 Objective
+## Features
 
-Build a **Quiz Page** using **React** that:
+- Interactive quiz interface
+- Multiple-choice questions
+- Real-time score tracking
+- Responsive design
+- Fallback questions if API is unavailable
+- Beautiful UI with Tailwind CSS and shadcn-ui
 
-- Fetches quiz questions from a JSON API or file.
-- Displays one question at a time.
-- Lets the user select answers.
-- Calculates and displays the final score.
-- Uses a state management solution beyond just `useState`.
+## Technologies Used
 
----
+- React
+- TypeScript
+- Vite
+- Tailwind CSS
+- shadcn-ui
+- Zustand (State Management)
 
-## 🔧 Requirements
+## Getting Started
 
-- ✅ Use **React** (with or without a framework like Next.js or Vite).
-- ✅ Fetch quiz data from an API or local JSON file.
-- ✅ Show one question at a time with multiple choices.
-- ✅ Show the user's score at the end.
-- ✅ Use one of the following for state management:
-  - React Context
-  - Redux Toolkit
-  - Zustand
-  - Jotai
-  - Or any modern alternative
+### Prerequisites
 
----
+- Node.js & npm installed
 
-## 🔗 Sample API
+### Installation
 
-Use this public JSON URL: https://s3.vclasses.net/dev-alsamerre/quiz 
+1. Clone the repository:
+```sh
+git clone <YOUR_GIT_URL>
+```
 
-## 📬 Submission
+2. Navigate to the project directory:
+```sh
+cd <PROJECT_NAME>
+```
 
-- Fork this repository.
-- Complete the task in your forked repository.
-- Push your solution to your fork.
-- Open a Pull Request to this original repository.
-- Include your email in the title of the Pull Request.
+3. Install dependencies:
+```sh
+npm install
+```
 
-  **Example title**: Frontend Task Submission - john.doe@example.com
+4. Start the development server:
+```sh
+npm run dev
+```
 
+## Project Structure
 
-## ⏱ Deadline
+- `src/components/` - Contains reusable UI components
+- `src/pages/` - Contains page components
+- `src/lib/` - Contains store and utility functions
+- `src/hooks/` - Contains custom React hooks
+- `public/` - Contains static assets
+
+## API Integration
+
+The application fetches quiz questions from an external API endpoint:
+```
+https://s3.vclasses.net/dev-alsamerre/quiz
+```
+
+If the API is unavailable, the application uses a set of default questions about Egypt.
+
+## Development
+
+You can edit this project in several ways:
+
+1. **Local Development**
+   - Clone the repository
+   - Make changes using your preferred IDE
+   - Push changes to the repository
+
+2. **GitHub**
+   - Edit files directly on GitHub
+   - Use GitHub Codespaces for online development
+
+## Deployment
+
+To deploy this project:
+1. Build the project:
+```sh
+npm run build
+```
+2. Deploy the contents of the `dist` folder to your preferred hosting service.
 
-The last Date for this task is 10/04/2025
 
-Good luck!

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

eslint.config.js

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  }
+);

index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quiz Application</title>
+    <meta name="description" content="A modern quiz application built with React and TypeScript" />
+    <meta name="author" content="Quiz App Team" />
+    <meta property="og:title" content="Quiz Application" />
+    <meta property="og:description" content="A modern quiz application built with React and TypeScript" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Quiz Application" />
+    <meta name="twitter:description" content="A modern quiz application built with React and TypeScript" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
+    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>