Set up Frontend and Backend Infrastructure

[AkashSDas]

In the backend:

• set up Express w/ TypeScript
• add testing w/ Jest, Swagger
• add Husky
• add useful middleware like morgan, Express File Upload, and add a logger w/ Winston
• set up with auth w/ Passport.js for JWT auth and Google OAuth

In the frontend:

• set up project w/ React, Vite, TypeScript, React Router
• add Redux toolkit, React Query, React Hook Form, Zod
• add ChakraUI
• set up Jest, React Testing Library, and Storybook

[AkashSDas]

Set up for frontend and backend has been done in this PR. While setting up the front end, I faced the following issues:

• Running ChakraCLI was giving an error related to fontsource.
• Typescript

ChakraCLI and fontsource

When generating theme types using the ChakraCLI else it gives the following error:

Chakra UI CLI  v2.4.1 by Chakra UI
Generate theme typings for autocomplete
✘ [ERROR] No loader is configured for ".woff2" files: node_modules/.pnpm/@[email protected]/node_modules/@fontsource-variable/nunito/files/nunito-latin-wght-normal.woff2
     node_modules/.pnpm/@[email protected]/node_modules/@fontsource-variable/nunito/index.css:47:7:
       47 │   src: url(./files/nunito-latin-wght-normal.woff2) format('woff2-variations');

I've tried using unplugin-fonts/vite but it didn't work. Also, to make ChakraCLI work with ppm I had to install @chakra-ui/styled-system as a dev dependency. chakra-ui/chakra-ui#5919

All of this is done to use ChakraCLI for custom types in colors, ... but it isn't as beneficial as to go and look for the above issues.

Typescript

In some places, Typescript was giving errors. This happened for Redux Toolkit and React Router.

The following issues provide more context on the issue faced:

• The inferred type of "X" cannot be named without a reference to "Y". This is likely not portable. A type annotation is necessary. microsoft/TypeScript#42873
• Type error: The inferred type of 'configureStore' cannot be named without a reference to '@reduxjs/toolkit/node_modules/redux'. This is likely not portable. A type annotation is necessary. reduxjs/redux-toolkit#3962

In place of Redux, the issue was solved by this:

// Here this issue is faced by `useAppDispatch`
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type * as _Redux from "@reduxjs/toolkit";

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch = () => useDispatch<AppDispatch>();

The best way to solve this issue is to provide an explicit type hint to the variable for which you're facing this issue. For React Router I created frontend/lib/routes.ts and exported the route variable. For this, I was getting this error, but when I directly used it in App.tsx then I wasn't getting this error. If a variable is exported then this error arises for a few identifiers.