[ENGINEERING] Frontend setup

[yxli001]

What is the issue?
Basic project structure set up

• Make sure you have Node.js version >= 20
• Initialize React project in a folder named frontend (highly recommend using vite), make sure TypeScript is used
• Set up eslint and Prettier configs to ensure consistent code style across different developers
• Set up a .gitignore to make sure secrets don't get pushed to GitHub
• Set up a module path alias to avoid importing using relative paths like ../../../../../assets/picture.jpg
• Create folders inside src/ for file organization (below are some common patterns, but feel free to use whatever feels most organized to you)
  • src/pages to put page components
  • src/components to put other smaller components
  • src/api for API calls
  • src/utils for miscellaneous utility functions
  • ...maybe more
• Set up React Router in App.tsx, which should only route to a temporary home page at / for now
  • Potentially create a Layout component that renders general structures like navbars and footers on all routes nested under the same group

Additional resources

• HIGHLY RECOMMEND referencing the TSE Onboarding Repo's config files and folder structure
• Vite Setup Guide
  • Notice how Vite CLI can help you set up TypeScript and React Router!!!!
• ESLint Docs
• Prettier Docs
• React Router Docs
• Module Aliases Guide