UI Design For Users and Admin:

1. HomePage: Live (opens in a new tab) . Source Code (opens in a new tab)

2. LoginPage: Live (opens in a new tab) . Source Code (opens in a new tab)

3. RegistrationPage: Live (opens in a new tab) . Source Code (opens in a new tab)

4. QuizPage: Live (opens in a new tab) . Source Code (opens in a new tab)

5. LeaderboardPage: Live (opens in a new tab) . Source Code (opens in a new tab)

6. ResultPage: Live (opens in a new tab) . Source Code (opens in a new tab)

Admin

7. Admin Dashboard: Live (opens in a new tab) . Source Code (opens in a new tab)

8. Admin Quiz Set Page: Live (opens in a new tab) . Source Code (opens in a new tab)

9. Admin Quiz Set Entry Page: Live (opens in a new tab) . Source Code (opens in a new tab)

Step-by-Step Plan

2. Project Structure

Organize the project into components and pages:

src/
|-- components/
|   |-- Navbar.js
|   |-- Footer.js
|-- pages/
|   |-- HomePage.js
|   |-- LoginPage.js
|   |-- RegistrationPage.js
|   |-- QuizPage.js
|   |-- LeaderboardPage.js
|   |-- ResultPage.js
|   |-- admin/
|       |-- AdminDashboard.js
|       |-- AdminQuizSetPage.js
|       |-- AdminQuizSetEntryPage.js
|-- App.js
|-- index.css
|-- main.js

Feature Created by Me Step by Step

1. Login Page
2. Fake Login
3. Route and Private Route
4. JWT Authentication
5. Setting AuthProvider

Features Needed

1. Home Page

   • Display quiz cards.
   • Redirect to quiz page if logged in, otherwise to login page.
   • Show welcome section if logged in.

2. Login and Registration

   • Manual form login and registration.
   • Implement JWT token authentication.
   • Default avatar for users.

3. Private and Public Routes

   • Manage routes to ensure only logged-in users can access certain pages.

Quiz Participation

4. Quiz Page

   • Display questions one by one.
   • Randomly rotate options for each question.
   • Sidebar showing total questions, answered questions, and remaining questions.
   • Submit quiz answers and calculate results client-side.

5. Result Page

   • Show quiz results with correct and incorrect answers.
   • Display a circular progress bar showing the percentage of correct answers.
   • Detail user answers and correct answers with visual indicators.
   • Link to view the leaderboard.

Leaderboard

6. Leaderboard Page
   • Display quiz set-specific leaderboard.
   • Highlight user if in the top 5.
   • Generate leaderboard client-side based on user answers.

Admin Features

7. Admin Dashboard

   • List quizzes created by the admin.
   • Link to create a new quiz set.

8. Quiz Set Management

   • Create a new quiz set with title and description.
   • Draft quiz sets initially.
   • Add questions to quiz sets.
   • Publish and unpublish quiz sets.
   • Update and delete quiz questions.

API Interactions

9. APIs for Various Operations
   • Use appropriate APIs for login, registration, quiz fetching, quiz submission, leaderboard fetching, quiz set creation, question management, and quiz set publishing.

Additional Features

10. User Role Management
    • Ensure only admins can access admin pages.
    • Determine user roles from the API.

✓ হোম পেজে আপনারা কিছু কুইজ এর কার্ড দেখতে পারবেন । কুইজ কার্ড এ ক্লিক করলে আপনাকে "quiz_page" পেজ এ নিয়ে যাবে । তবে এক্ষেত্রে একটি জিনিস খেয়াল রাখতে হবে । আপনি যদি লগইন থাকেন, তাহলেই কুইজ পেজ এ যেতে পারবেন । অন্যথায়, আপনাকে লগইন পেজে নিয়ে যেতে হবে । হোম পেজে কুইজ নিয়ে আসার জন্যে Quiz List API ব্যবহার করতে হবে ।

✓ যদি ইউজার লগইন অবস্থায় থাকে, তবে হোম পেজে Welcome Section দেখা যাবে । অন্যথায় হাইড থাকবে ।

✓ একজন ইউজার একটি কুইজ শুধু মাত্র একবারই অংশগ্রহণ করতে পারবে । পরবর্তীতে, কুইজ কার্ডে ক্লিক করলে রেজাল্ট পেজ (result.html) এ নিয়ে যাবে।

✓ কুইজ পেজে (quiz_page.html) গেলে আপনি একটি একটি করে প্রশ্ন দেখতে পারবেন । একটি প্রশ্নের উত্তর সিলেক্ট করার পরে Next বাটনে ক্লিক করলে পরের প্রশ্ন আসবে । তবে Get Quiz API থেকে আপনি সব গুলো কুইজের প্রশ্ন এক সাথেই পাবেন । কিন্তু আপনাকে একটি একটি করে প্রশ্ন দেখাতে হবে। Next বাটনে ক্লিক করলে যেন পরের প্রশ্ন আসে ।

✓ কুইজ পেজে প্রতিটি প্রশ্নের অপশন গুলো Randomly Rotate করবে। অর্থাৎ একই অপশন কারো জন্যে A তে পারে, আবার কারো জন্যে B হতে পারে ।

✓ কুইজ পেজ এর সাইড বার এ আপনাকে দেখাতে হবে, এই কুইজ সেট এ মোট কতটি প্রশ্ন আছে, আপনি কত গুলো প্রশ্নের উত্তর দিয়েছেন এবং মোট কত গুলো বাকি আছে ।

✓ সব গুলো কুইজ এর উত্তর দিয়ে সাবমিট করতে Submit Quiz Attempt API ব্যবহার করতে হবে । Submit Quiz Attempt API এ ইউজার এর ইনপুট গুলো সাবমিট করলে API এর রেসপন্স এ User এর Submitted Answer এবং Correct Answer এর একটি Array রেসপন্স পাবেন। আপনাকে Client সাইডে ইউজারের মার্ক ক্যাল্কুলেট করে রেজাল্ট পেজে রেজাল্ট দেখাতে হবে ।

✓ সব গুলো কুইজ এর উত্তর সিলেক্ট করে সাবমিট করার পর আপনাকে রেজাল্ট পেজে (result.html) নিয়ে যাবে । সেখানে কুইজের মার্ক দেখাতে হবে। কত গুলো ভুল উত্তর, এবং কত গুলো সঠিক উত্তর সেটি সেখানে দেখাতে হবে ।

✓ রেজাল্ট পেজ (result.html) আপনাকে একটি Cicular Progress Bar দেখাতে হবে । আমরা, আমাদের Template এ একটি ছবি দিয়ে বুঝিয়ে দিয়েছি Cicular Progress Bar টি দেখতে কেমন হবে । আপনাকে npm repository থেকে আপনার পছন্দ মত যে কোনো লাইব্রেরি ব্যাবহার করে সেটি বানাতে হবে । কুইজে অংশগ্রহণ করা ব্যাক্তি কত পার্সেন্ট উত্তর সঠিক দিয়েছে সেটি Cicular Progress Bar এ দেখাতে হবে ।

✓ রেজাল্ট পেজ (result.html) এর ডান পাশে যেই অংশ আছে সেখানে আপনাকে কুইজের উত্তর গুলো দেখাতে হবে । ইউজার যেই ইনপুট দিয়েছে, সেই ইনপুট এর মধ্যে কোন গুলো সঠিক, কোন গুলো ভুল, কোন গুলো ইউজার সিলেক্ট করেছিল, কোন গুলো ইউজার সিলেক্ট করেছিল কিন্তু ভুল সেগুলো বিভিন্ন রঙ বা আইকন দিয়ে চিহ্নিত করে দিতে হবে। এক্ষেত্রে আপনি আপনার মন মত DOM বা ডিজাইন পরিবর্তন করতে পারবেন । কিন্তু উদ্দেশ্য হবে ইউজার এর ইনপুট, সঠিক উত্তর, ভুল উত্তর যেন আমরা সহজেই বুঝতে পারি । Get Quiz Attempts API থেকে আপনারা, ইউজার কোন গুলো ইনপুট দিয়েছে, সেগুলোর একটি Array তে পাবেন । এবং প্রত্যেক প্রশ্নের সঠিক উত্তর কোন গুলো সেটি অন্য একটি Array তে পাবেন । এই দুই Array কে কম্বাইন করে আপনাকে ইউজার এর কোন উত্তর সঠিক এবং কোন গুলো ভুল এটি বের করতে হবে । এই কাজটি আপনাকে ক্লায়েন্ট সাইডেই করতে হবে । যদিও এটি সাধারণত সার্ভার সাইডে করা হয়, তবে যেহেতু এটি একটি ফ্রন্টএন্ড এসাইনমেন্ট সেহেতু আপনাকে ক্লায়েন্ট সাইডে কাজটি করতে হবে ।

✓ রেজাল্ট পেজ এ "View Leaderboard" নামে একটি লিংক দেখতে পারবেন । সেখানে ক্লিক করলে আপনাকে লিডারবোর্ড পেজ (leaderboard_page.html) এ নিয়ে যাবে । সেখানে আপনাকে সেই কুইজ সেট এর লিডার্বোড দেখাতে হবে । Participant এর পজিশন, Correct, Wrong Answer এর সংখ্যা দেখাতে হবে, যেভাবে Template এ দেয়া আছে । ডান পাশে Top 5 এর একটি লিস্ট দেখাতে হবে । তবে খেয়াল রাখবেন, Leaderboard কুইজ সেট Specific অর্থাৎ, ইউজার যেই কুইজ সেট এ অংশ গ্রহণ করেছে, শুধু মাত্র সেই কুইজ সেট এরই Leaderboard দেখাবে। প্রতিটি কুইজ সেট এর জন্যে আলাদা আলাদা লিডার বোর্ড থাকবে ।

✓ লিডারবোর্ড পেজ (leaderboard_page.html) এ যদি Top 5 এর মধ্যে নিজের নাম থাকে, সেক্ষেত্রে সেটি highlight করে দেখাতে হবে ।

✓ কুইজ সেট এর লিডার্বোড এর ডেটা দেখাতে Get Quiz Attempts API ব্যবহার করতে হবে । API থেকে আপনারা লিডারবোর্ড এর Sorted Data পাবেন না । আমরা API থেকে শুধু মাত্র যারা যারা অংশগ্রহণ করেছে তাদের সিলেক্ট করা উত্তর গুলো গুলোর একটি List পাঠিয়ে দিবো, আপনাদের ক্লায়েন্ট ইউজারের সিলেক্ট করা উত্তর গুলোর মধ্যে কোন গুলো সঠিক ভুল নির্নয় করে, মার্কসীট তৈরি করে, লিডারবোর্ড জেনারেট করতে হবে । যদিও লিডারবোর্ড সার্ভার সাইডে জেনারেট করতে হয়, যেহেতু এটি একটি এসাইনমেন্ট সেহেতু আপনাকে ক্লায়েন্ট সাইডে লিডারবোর্ড জেনারেট করতে হবে ।

✓ ইউজার লগইন এবং রেজিস্টার এর ক্ষেত্রে ম্যানুয়াল ফর্ম লগইন ইমপ্লিমেন্ট করতে হবে। এবং পুরো এপ্লিকেশনে JWT টোকেন এর মাধ্যমে Authentication ইমপ্লিমেন্ট করতে হবে । ইউজার এর Avater এর ক্ষেত্রে যেকোনো Default Avater দিয়ে দিতে পারেন । Login, Registration এবং Refresh Token এর জন্যে যথাযত API দেয়া হয়েছে সেগুলো ব্যবহার করে করতে হবে ।

✓ প্রাইভেট রাউট এবং পাবলিক রাউট ম্যানেজ করতে হবে । অর্থাৎ যেই রাউট গুলো প্রাইভেট করা দরকার সেগুলোতে যেন লগইন ছাড়া কেউ যেতে না পারে। কোন কোন পেজ গুলো প্রাইভেট রাউট করতে হবে, সেগুলো আমরা বলে দিবো না । আপনাকে আপনার বিচক্ষণতার সাথে সিদ্ধান্ত নিয়ে কাজটি করতে হবে ।

✓ "dist" ফোল্ডার এর ভেতরে "admin" নামে আরো একটি ফোল্ডার রয়েছে। সেই পেজ গুলো শুধু মাত্র এডমিন ভিউ করতে পারবে । আমাদের দেয়া API তে ইউজার এর "role" নামে একটি প্রোপার্টি থাকবে, সেটি দিয়ে ইউজার Admin নাকি User সেটি সিদ্ধান্ত নিতে পারবেন ।

✓ ** dashboard.html ** এ গেলে আপনারা খুব সিম্পল একটি ড্যাসবোর্ড দেখতে পারবেন । সেখানে সেই এডমিন কি কি কুইজ তৈরি করেছে, তার লিস্ট থাকবে । Quiz Set List থেকে লিস্ট ড্যাসবোর্ড এ কুইজ গুলো নিয়ে এসে দেখাতে হবে ।

✓ ড্যাসবোর্ড পেজ থেকে "Create a new quiz" কার্ডে ক্লিক করলে, নতুন কুইজ তৈরি করার জন্যে quiz_set_page.html পেজে নিয়ে যেতে হবে ।

✓ সেখানে কুইজ সেট এর Title, Description সেট করে Next বাটনে ক্লিক করলে পরের পেজে যাবেন । নতুন কুইজ সেট তৈরি করতে আপনাকে Create Quiz Set API ব্যবহার করতে হবে । প্রাথমিক অবস্থায়, কুইজ সেট Draft হিসেবে থাকবে।

✓ কুইজ সেট পেজ থেকে Next বাটনে ক্লিক করলে কুইজ এন্ট্রি পেজে নিয়ে যাবে (quiz_set_entry_page.html) । সেখানে নতুন কুইজ তৈরি করার জন্যে Create Quiz সেকশন দেখতে পারবেন । সেখানে থেকে কুইজ এর টাইটেল এবং অপশন দিয়ে "Save Quiz" বাটনে ক্লিক করলে নতুন কুইজ তৈরি হবে । এবং সেটি ডান পাশের লিস্ট এ দেখাবে । প্রতিটি প্রশ্ন এড করার জন্যে আপনাকে Add Question API ব্যবহার করতে হবে ।

✓ এটি খেয়াল রাখতে হবে, একটি কুইজের শুধু মাত্র একটি মাত্র সঠিক উত্তর হতে পারবে ।

✓ কুইজ এন্ট্রি পেজে অর্থাৎ quiz_set_entry_page.html পেজে আপনাদের একটি বাটন তৈরি করতে হবে, যেটি দিয়ে Admin একটি কুইজ সেট কে Publish এবং Unpublish করে রাখতে পারবে । যেহেতু, কুইজ সেট তৈরির পরে স্বাভাবিক ভাবেই কুইজ সেটটি draft অবস্থায় থাকবে। সেহেতু সেটিকে পাবলিশ করার ব্যবস্থা করতে হবে । এবং সেটির জন্যে Update Quiz API ব্যবহার করতে হবে ।

✓ আপনাদের এক একটি Quiz Question ডিলিট এবং আপডেট করার ব্যবস্থা করতে হবে । এক্ষত্রে Delete Question এবং Update Question API ব্যবহার করতে হবে ।