To compile contract directly inside frontend folder add inside truffle.config.js

module.exports = {
// this
  contracts_build_directory: "../src/contracts",

  networks: {
    rinkeby: {
... 

It will create a contracts folder inside src/

Then you can import it

for example

import LotteryContract from '../../contracts/Lottery.json';
import web3 from "./web3";
const lotteryContract = new web3.eth.Contract(LotteryContract.abi, "0x41F1E33C769d5dcAFF2de7f6F8b267764E03677F");

export default lotteryContract;

You will have errors because of JSON import

add to your tsconfig file

"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,