Frontend React Developer Assessment

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.

---

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.

8. 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:

   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:

     git commit -m "Added ... functionality to the ..."

5. Push Your Branch:

   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!