https://github.com/emmanuelallan/ello-engineering-challenge

https://github.com/emmanuelallan/ello-engineering-challenge

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/emmanuelallan/ello-engineering-challenge
• Owner: emmanuelallan
• Created: 2024-06-10T14:29:34.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-10T15:30:02.000Z (about 1 year ago)
• Last Synced: 2025-01-14T21:11:00.960Z (6 months ago)
• Language: TypeScript
• Size: 5.21 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 ![svgviewer-output](https://github.com/ElloTechnology/backend_takehome/assets/3518127/561bc8d4-bffc-4360-b9ea-61e876bcec93)

# Ello Engineering Challenge

👋 Hello Ello Team,

I have successfully implemented the required frontend for the challenge and integrated it with the backend. Below are the details of my implementation and the additional features I included:

- **React and Vite:** Used React as the frontend framework with Vite for fast development and build process.

- **MUI Joy:** Utilized MUI Joy for consistent and attractive UI components.

- **React Hooks:** Effectively used React hooks for state management and side effects.

- **Search Bar**: A search bar component that allows users to search for books by title.

- **Book List**: A component that displays search results, showing the book title, author, and a button to add the book to the reading list.

- **Reading List**: A component that displays the list of books added by the teacher, with a button to remove each book.

## Additional Features

- **Figma Design:** Created a design prototype using Figma. You can view the design [here](https://www.figma.com/design/9qaALwuYKxcM6t2GJjcn60/ello?node-id=0-1&t=RAYEGf2NEhLlZY9Q-1)

- **Local Storage Integration:** Implemented local storage to persist the reading list across page reloads.

- **Improved UX:** Enhanced user experience with smooth interactions and responsive design.

## Screenshot

![alt text](https://github.com/emmanuelallan/Ello-Engineering-Challenge/blob/main/frontend/public/ui.png)

### Frontend Setup

To run the frontend, follow these steps:

1. **Install dependencies**:

    ```bash

    npm install

    ```

2. **Project Structure**: Ensure your project has the following structure:

    ```css

        frontend/

    ├── src/

    │   ├── assets/

    │   ├── components/

    │   ├── App.jsx

    │   └── main.jsx

    ├── index.html

    ├── package.json

    └── vite.config.js

    ```

3. **Run**: Run the project:

    ```bash

        npm run dev

    ```

I look forward to discussing my implementation and the additional features in more detail. Thank you for the opportunity!

_This project was enjoyable!_