/aif-monorepo

Primary LanguageTypeScript

Apra Image Finder (AIF)

Overview

Prerequisite

Your machine must have:

  • NodeJS 18.16+

Tech stacks

  • Typescript
  • ReactJS
  • Bootstrap
  • NodeJS
  • ExpressJS
  • Vite
  • Jest

Recommending IDE

  • Visual Studio Code with ESLint and Prettier - Code formatter extension

Browser support

  • Chrome (Latest)

Getting Started

Run the below at root:

  1. npm install
  2. npm run start-server
  3. At separated terminal: npm run start-web, then open the URL by Chrome

Project Structure

This is a monorepo, managed by NPM Workspace. The workspaces are directories defined in packages.json#workspaces :

  • aif-server: The Node server that access to the GraphQL data souce
  • aif-web: The React app of AIF, initially generated by Vite.
  • aif-packages/*: contain multiple packages which are shared between aif-web and aif-server.

aif-web

  • src/assets SVGs, icons, fonts, etc.
  • src/modules Each modules are corresponding to separated pages or business logic. In each module, the structure should be like below:
    • components React Components and styles
    • hooks React hooks
    • services Service that are specifically used ony inside the module, if they are used by other module, then place them in src/services
    • ... And other files/directory that are specifically used only inside the module.
  • src/services Services that are re-used accross aif-web
  • src/utils Utils functions that are re-used across aif-web
  • App.tsx This is the root component, all setup on app start should be here.
  • Routes.tsx App routes are defined in this file.

Styling

  • This project use Bootstrap 5.3 for styling, it provide many utilities and helpers for styling.
  • Global style and helper css classes can be founded inside aif-web/src/App.css
  • Style of specific component can be found at file [component-name].css which is placed at the same directory of the component.
  • NOTE: may consider using styled-component to avoid style override unexpectedly.

aif-server

  • src/controllers App controllers
  • src/services App services, mainly for accessing external data source
  • src/utils Utils functions
  • src/types Typescript Type definitions
  • main.ts Initial setup should be placed in side here
  • routes.ts Routes or map from API URL to the controllers.

aif-packages

Each directory inside here is a package that is shared between aif-web and aif-server as well as other project if have in the future. Each package should follow the below structure:

  • package.json: Package name must have @aif-packages namespace. The main field must be pointed to the entry files.
  • src All source code are inside here.

Each package can be created manually or using command line:

npm init --workspace aif-packages/package-name

Tests

Unit test

To run unit test:

npm run test-web

Mobile

  • Search by title:

  • Show Image:

Desktop

  • Search by title:

  • Show Image: