---

ELLOTALES

This is a book assignment admin-facing UI for a teacher to assign books to students and manage the reading list.

Table of Contents

• ELLOTALES
• Table of Contents
• Features
• Getting Started
  • Prerequisites
  • Steps
• Usage
• Technology Stack
  • Frontend Stack
  • Backend Stack
  • Root Directory Technology
• Building and running in Docker Compose
• Screenshots
  • Home view
  • With Read list View
• License
• Contact

Features

• A search bar that allows users to search for books by title.
• A list of search results that displays the book title, author, and a button to add the book to the students reading list.
• A reading list that displays all the books that the teacher has added.
• A button to remove a book from the reading list.

Getting Started

Prerequisites

• Node.js (preferably the latest LTS version)
• npm or yarn (Node Package Manager or Yarn Package Manager)

Steps

1. Clone the repository:

   git clone https://github.com/Ianodad/ElloTales.git
   cd ElloTales

2. Install dependencies: Install the root directory dependency

   npm install

3. Install dependencies for all the frontend and backend dependencies

   npm run install:all

Usage

Run both the frontend and backend simultaneously with one command

npm run start:both

The frontend will be available at http://localhost:3000 The backend will be available at http://localhost:4000

Technology Stack

Frontend Stack

• React: JavaScript library for building user interfaces.
• React Router: Declarative routing for React applications.
• Apollo Client: State management library for managing local and remote data with GraphQL.
• Emotion: Library for writing CSS styles with JavaScript.
• Material UI: UI framework for building responsive and accessible design systems.
• GraphQL: Query language for APIs and a runtime for executing those queries.
• Immer: Library for working with immutable state.
• Zustand: State management solution using simplified Flux principles.
• Vite: Build tool that provides a faster and leaner development experience for modern web projects.
• TypeScript: Superset of JavaScript that adds static types.
• ESLint: Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
• Prettier: Opinionated code formatter.
• Tailwind CSS: Utility-first CSS framework for rapidly building custom designs.

Backend Stack

• Apollo Server: A fully-featured GraphQL server.
• GraphQL: Query language for APIs and a runtime for executing those queries.

Root Directory Technology

• Concurrently: Run multiple commands concurrently.

Building and running in Docker Compose

docker-compose up --build

Screenshots

Home view

With Read list View

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

• Author: Ian Adera
• Email: ianodad@gmail.com
• GitHub: ianodad

---