React + TS + Vite Example Project

Configuration

• React
• Vite
• TS
• Eslint
• React Testing Library & Vitest with Code Coverage
• Material UI
• Environment Variables
• Optional Git Hook
• Build Script
• Custom package.json scripts
• Examples of various react concepts
  • React state
  • React context
  • React router
  • Http with axios
  • Static Typing
  • Local Storage Manipulation
  • Responsive Design

Running the app

• pull the repository
• run npm install
• run npm run start

Working with ENVs in React with Vite

• vite env docs

1. create a .env file in the root directory
2. Add the following line
3. Never expose or git push your API key!

VITE_CIVICS_API_KEY=[Your API key goes here]

• env must be prepended with VITE, or it will not be picked up.

3. Use it in the application

Features

• Responsive/Advanced design
• React router with different pages
• Api querying, data mapping and error handling
• React state/context handling to share data with different components
• Chart integration
• Complete linter, hosting, build scripts and testing libraries with typescript
• Git repo using user stories/issue and trunk based development