Praise idise assessment

.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,118 +1,8 @@
-# Frontend React Developer Assessment
+# React + Vite
 
-![Dilivva Logo](./assets/dilivva-logo.png)
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Welcome to the **Frontend React Developer Assessment** for Send24 (Dilivva Int'l Tech Inc). This test is designed to evaluate mid-level React developers' skills in building modern frontend applications, implementing best practices, and using Git workflows effectively.
+Currently, two official plugins are available:
 
----
-
-## Objective
-
-The goal of this assessment is to:
-- Test your knowledge of **React** and related modern frontend development practices.
-- Evaluate your proficiency with **state management**, **API integration**, and **UI/UX best practices**.
-- Assess your ability to use **Git** and collaborate via **GitHub** (branching, commits, and pull requests).
-
----
-
-## Task Overview
-
-You will create a small React application based on the requirements provided below. The application should demonstrate your understanding of key React concepts and your ability to work with external APIs.
-
----
-
-## Requirements
-
-### Features to Implement
-1. **User Interface:**
-   - Create a responsive user interface with a simple, clean design.
-   - Include a header and a footer.
-
-2. **Routing:**
-   - Implement basic routing using `react-router`.
-   - Include at least two pages: a **home /Landing page** and a **details page (or etc)** for individual items from the list.
-
-3. **State Management:**
-   - Use React hooks (e.g., `useState`, `useEffect`) for state management.
-
-4. **Data Fetching:**
-   - Fetch any data from any opened API endpoint and display it in a list, graph, or table format (surprise us).
-   - Handle loading states, pagination and API errors gracefully.
-
-5. **Search Functionality:**
-   - Add a search bar to filter the displayed data in real-time.\
-
-6. **Styling:**
-   - Use a CSS framework (e.g., TailwindCSS or Bootstrap) or write custom CSS to style the app.
-
-7. **Package:**
-   - Use at least one extra package while working on No 1-6.
-   - Wow us technically with your code structure, organization, code structiure, commenting and resuability.
-
-9. **Git Workflow:**
-   - Your branch is named `firstname-lastname-assessment`.
-   - Commit your changes incrementally with meaningful messages.
-   - Commit a minimum of 3 to a maximum of 6 commits.
-   - Push and open a Pull Request from your branch to the branch named `submit`.
-
----
-
-## Instructions
-
-1. **Access the Repository:**
-   - You have been granted access to this repository for the duration of the assessment.
-
-2. **Clone the Repository:**
-   ```bash
-   git clone <repository-url>
-   cd frontend-react-assessment
-   ```
-
-3. **Switch to your work Branch:**
-
-
-4. **Implement the Features:**
-   - Follow the requirements outlined above.
-   - Commit your changes with clear and concise messages:
-     ```bash
-     git commit -m "Added ... functionality to the ..."
-     ```
-
-5. **Push Your Branch:**
-   ```bash
-   git push origin firstname-lastname-assessment
-   ```
-
-6. **Optional - Create a Pull Request (PR):**
-   - If instructed, open a pull request from your branch to the `submit` branch.
-   - Add a description summarizing your work, or stating extra information for the review committee 
-
----
-
-## Evaluation Criteria
-
-Your submission will be evaluated on the following:
-- **Code Quality:** Readability, organization, and adherence to best practices.
-- **Functionality:** Completeness of features and bug-free implementation.
-- **UI/UX:** Visual appeal and user experience.
-- **Git Usage:** Proper use of branches, commits, and pull requests.
-- **Error Handling:** Graceful handling of API errors and edge cases.
-- **Timeliness:** Timeliness is key, even if you are not able to finish it up.
-
----
-
-## Additional Notes
-
-- You can use any external libraries that you find helpful, but be free to explain your choices.
-- Ensure your application runs without errors before submitting, its ok if it doesnt though 🤪🤪.
-- If you have any questions, feel free to reach out to the Head of the Technical Assessment committee `enochoyerinde(at)send24(dot)co` .
-
----
-
-## Submission Deadline
-
-All branches must be pushed 2Hhrs 30Min upon recieving the assessment email.
-
----
-
-We look forward to reviewing your work! Good luck!
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SportHub</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>