Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sarkartanmay393/wingman-coding-challenge
This project implements a responsive and pixel-perfect UI based on the provided Figma design. It leverages the foundational structure generated with Next.js, Tailwind CSS, and shadcn/ui.
https://github.com/sarkartanmay393/wingman-coding-challenge
Last synced: 19 days ago
JSON representation
This project implements a responsive and pixel-perfect UI based on the provided Figma design. It leverages the foundational structure generated with Next.js, Tailwind CSS, and shadcn/ui.
- Host: GitHub
- URL: https://github.com/sarkartanmay393/wingman-coding-challenge
- Owner: sarkartanmay393
- Created: 2024-12-18T11:53:29.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-18T18:54:45.000Z (about 1 month ago)
- Last Synced: 2025-01-01T04:47:45.730Z (22 days ago)
- Language: TypeScript
- Homepage: https://wingmann.vercel.app
- Size: 625 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wingman UI Coding Challenge
This project implements a **responsive** and **pixel-perfect** UI based on the provided Figma design. It leverages the foundational structure generated with **Next.js**, **Tailwind CSS**, and **shadcn/ui**.
---
## Tools & Libraries Used
- **Tailwind CSS**: Responsive utility classes for styling.
- **shadcn/ui**: For building modular UI components.
- **Chart.js or Recharts** *(optional)*: For rendering dynamic graphs.
- **Next.js**: For server-side rendering and routing.
---
## Project Structure
```bash
src/
├── app/ # Next.js app directory
├── components/ # Reusable components
└── utils/ # Helper functions
```
---
## Setup Instructions
1. **Clone the repository**:
```bash
git clone https://github.com/sarkartanmay393/wingman-coding-challenge
cd wingman-coding-challenge
```
2. **Install dependencies**:
```bash
npm install
```
3. **Run the development server**:
```bash
npm run dev
```
4. **View the application**:
Open [http://localhost:3000](http://localhost:3000) in your browser.
---
## Design Requirements
- **Pixel Perfect**: The UI must closely match the provided Figma design.
- **Responsiveness**: Ensure all elements are responsive and optimized for both mobile and desktop views.
- **Interactions**:
- Dropdown menus
- Hover states
- Charts and Insights visualization.
---
## Features
- Dashboard UI with summary metrics
- Insights charts (responsive and dynamic)
- Orders list with commission details
- Forecast indicators for KPIs
---
## Responsive Considerations
The layout should adapt seamlessly to all screen sizes:
- **Mobile**: Single-column layout.
- **Tablet/Desktop**: Multi-column grid layout.
---
## Development Notes
--
---
## Deployment
Deploy using platforms like: **Vercel**
Run:
```bash
npm run build
npm start
```
---
## License
This project is for demonstration purposes.