This modern web app provides you with an interactive trend radar. It is used to visualise and manage potential threats and opportunities across Political, Economic, Social and Technological dimensions. These strategic points are displayed in a concentric circle diagram.

1. The outer ring represents trends with the lowest likelihood of occurrence, whereas the inner rings represent trends with increasing likelihood.
2. The size of a point represents its potential impact, with larger points indicating a higher impact.
3. The colour of a point indicates the preparedness level, ranging from red (low preparedness) to green (high preparedness).

The app was built with Next.js, React, and TypeScript, featuring a responsive design with TailwindCSS.

• Interactive ring diagram (concentric circles) visualization
• Dynamic control panel for trend management
• Real-time trend table updates
• Responsive design that works on both desktop and mobile
• Light and Dark mode support (based on system preference)

• Framework: Next.js (React)
• Language: TypeScript
• Styling: TailwindCSS
• State Management: Zustand
• Testing: Jest with React Testing Library
• Code Quality: ESLint

1. Click the "Code" button on the repository
2. Select "Create codespace on main"
3. Wait for the codespace to initialize
4. Once the codespace is ready, it will automatically install dependencies using npm install.
5. Start the development server with npm run dev

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:3000 in your browser

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run test - Run tests
• npm run lint - Run ESLint

The project uses Jest and React Testing Library for testing. Tests are located in __tests__ directories next to the components they test. To run tests:

npm run test        # Run tests

Test coverage reports are generated in the coverage directory.

• /src/components - React components
• /src/store - State management (Zustand)
• /src/types - TypeScript types and interfaces
• /src/constants - Application constants
• /..directory/__tests__ - Test files for a given directory.

This project is configured for static exports via Next.js. To deploy:

1. Build the project:

   npm run build

2. The static output will be in the out directory
3. Deploy the contents of out to any static hosting service

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

Please make sure to update tests as appropriate and adhere to the existing code style.