Zendesk Coding Challenge - Wilson Le

Demo link:

Access my site at https://zcc-wilsonle.web.app

Table of Content:

• Zendesk Coding Challenge
  • Demo link:
  • Table of Content:
  • About The App
  • Screenshots
  • Technologies
  • Get Started

About The App

• A web application that is use to view tickets from ZenDesk, using ZenDesk API.
• Backend has 2 endpoint that is consumed by Frontend:
  • getTickets: get 10 tickets at a time
  • getTicket: get details of one ticket at a time
• Frontend features:
  • Loading component when data is not fetched from Backend
  • Friendly Error Modal when an error occurs:
    • Internal Server Error (from the app's server)
    • Unexpected Error (from the users)
    • Network Error (I actually implement this because there was an actual network outage in my university while I'm doing this)
• Notable features:
  • CI/CD
  • Hosting
  • Testing
  • Linting
  • Code Formatting
  • Pre-commit hooks

Screenshots

Technologies

• Frontend: React, Tailwind CSS, Typescript

• Backend: Firebase, Typescript

• CI/CD: Github Actions

• Testing: Jest, Testing Library

• Linter: ESLint

• Formatter: Prettier

Get Started

• Install dependencies in all project folders

yarn install

• Create Firebase project from the Firebase Console, enable Hosting and Functions
• Initialize Firebase Hosting, Functions, Emulators

firebase init

• Create functions/src/secrets.json and frontend/src/secrets.json from example found in functions/src and frontend/src

• Create .env at root from example found in root. The passphrase will encrypt/decrypt secret files

• To encrypt file:

yarn encrypt

• Concurrently start React app and emulators

yarn start