AndrewJBateman / angular-tailwind-dataportal

:clipboard: Angular used with Tailwind to create simple frontend to display backend data

⚡ Angular Tailwind Data Portal

• Angular app using TailwindCSS components & Angular Signals to display backend data
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Tailwind Data Portal
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Data shown on a grid of Tailwind-styled cards
• Angular Signals used to track the state of changing backend data so rendering can be optimised.
• Any JSON data object made available on localhost:3000 can be displayed on the Angular frontend. It is easy to modify the frontend Typescript model and HTML markup to match the JSON object on the backend. I used drug product JSON data as test data - see db.json

📷 Screenshots

📶 Technologies

• Angular framework v17
• Angular Signals
• TailwindCSS v3 CSS framework
• JSON server used to serve a fake REST API backend on port localhost:3000 to test frontend

💾 Setup

• Run npm i to install dependencies.
• This frontend requires a backend data source - see /models/pharma.data.ts for format, on port http://localhost:3000
• npm run server to run fake backend. Navigate to http://localhost:3000/api to see data object.
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

🔧 Testing

• Fake databse data in db.json used to test frontend.

💻 Code Examples

• 'data.service.ts' function to return data array Observable with fetch status and catch errors

loadData(): Observable<State<Array<IPharmaData>> | State<null>> {
    return this.http.get<Array<IPharmaData>>(`${environment.API_URL}/api`).pipe(
      share(),
      map((data) => {
        return new State<Array<IPharmaData>>(
          StatusNotification.OK,
          data,
          null
        );
      }),
      catchError((error: HttpErrorResponse) => {
        return throwError(
          new State<Array<IPharmaData>>(
            StatusNotification.ERROR,
            undefined,
            error
          )
        );
      })
    );
  }

🆒 Features

• Tailwind build for production CSS purge results in a very small styles bundle (about 7kB)

📋 Status & To-Do List

• Status: working
• To-Do: Nothing

👏 Inspiration

• Gouv of Canada API: Drug Product Database - All Files - Drug Product

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]