| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
2.0 [2025/10/29 11:43] 20.171.207.2 old revision restored (2025/10/29 11:20) |
2.0 [2025/10/29 13:32] (current) 20.171.207.2 old revision restored (2025/10/29 11:22) |
| ==== App Structure Overview ==== | ==== App Structure Overview ==== |
| |
| The frontend (The visuals you see in your internet browser) is made in React, which is programmed in Typescript; Typescript is a type safe, and more structured varient of the javascript lanugage (ES6/ES12-ES2021). | Both the frontend and backend are programmed in [[https://www.typescriptlang.org/docs/handbook/intro.html |Typescript]] which is executed by the [[https://www.npmjs.com/package/ts-node |ts-node]] package; Typescript is a type safe, and more structured superset of the [[https://www.freecodecamp.org/news/the-complete-javascript-handbook-f26b2c71719c/ |Javascript]] lanugage (ES6/ES12-ES2021). We use [[https://classic.yarnpkg.com/lang/en/docs/ |Yarn]] on the frontend and backend also, to install packages (like ts-node) and run a local development server. |
| |
| The backend is also programmed in Typescript, and runs on a Node.JS server. The backend is responsible for calculations and data processing, in order to provide the frontend with data it can use immediately. A GraphQL server is used in the backend, to provide structured and secure access to the data in our Database. | |
| | A GraphQL server is used in the backend, to provide structured and secure interface to interact with the database. TypeORM is the database adapter which connects to the database allowing us to manipulated the tables and data within it; graphql uses the TypeORM adapter in order to access the data. We've not currently chosen a server to serve the backend code to the client, therefore, the project only works locally from development enviroments. |
| |
| Our database is implemented in Postgres, which is a relational database that uses SQL. | Our database is implemented in Postgres, which is a relational database that uses SQL. |
| |
| ===Frontend=== | ====Frontend==== |
| |
| ===Backend=== | ====Backend==== |
| | |
| | === Packages === |
| | |
| | == ts-node == |
| | |
| | [[https://www.npmjs.com/package/ts-node |ts-node]] is a typescript execution engine that allows us to write this project as typescript instead of javascript. ts-node is essentially a `source-to-source compiler` / `transpiler`, as it turns one language into another, i.e. typescript into javascript. |
| |
| == GraphQL (Apollo) == | == GraphQL (Apollo) == |
| ([[https://odyssey.apollographql.com/ |Tutorial here]]) | ([[https://odyssey.apollographql.com/ |Tutorial here]]) |
| |
| ===Database=== | == cross-env == |
| |
| | [[https://www.npmjs.com/package/cross-env |cross-env]] is used for setting the environment mode the project is run in, in a OS independant way. It is used in the package.json file. |
| |
| ===== Project setup and Build ===== | [[https://www.npmjs.com/package/blipp |blipp]] is a simple hapi plugin to display the routes table to console at startup. |
| | |
| | ====Database==== |
| | |
| | We're Using a postgress database |
| | |
| | === ERD cardinality key === |
| |
| TBA | TBA |
| | |
| | === Database ERD === |
| | |
| | TBA |
| | |
| | ===== Project setup and Build ===== |
| | |
| | ==== Run the project locally ==== |
| | |
| | Using the [[https://docs.npmjs.com/cli/v8/using-npm/scripts |scripts]] in the package.json file in the backend directory, use Yarn to run the 'dev' script, e.g. |
| | <code>yarn run dev</code> |
| | which is the same as running: |
| | <code>yarn run cross-env NODE_ENV=development ts-node-dev --files -- ./src/index.ts</code> |
| | * 'Yarn' is our package manager, but also its acting as our server as this is a command for local development |
| | * 'run' tells yarn to execute something |
| | * 'cross-env' is a package used to set the programmign enviroment variables in a OS independant way |
| | * 'NODE_ENV=development' is a cross-env option to set the enviroment to development |
| | * 'ts-node-dev' is our typescript execution engine as we want our typescript files to be executed with a typescript engine |
| | * '- -files' is a ts-node option, to tell ts-node to load files specified in the `tsconfig.json` file. We do this as the `blipp` package doesn't import correctly unless this happens, as ts-node can't see the blipp file in `backend/type/blipp.d.ts` |
| | * '- -' is used to stop options being passed to ts-node (i.e. we passed ts-node '- -files', we don't want to pass anything else) |
| | * './src/index.ts' is the first file we are running as it's the root |
| | |
| |
| === Potential build issues, and their fixes === | === Potential build issues, and their fixes === |