Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added 2026-04-04 16-49-36.mp4
Binary file not shown.
114 changes: 1 addition & 113 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,113 +1 @@
# Development Sprint: 2-Hour Challenge

Welcome to the Development Sprint. In this 2-hour team-based event, you will build a fully functional, responsive, and visually appealing frontend application from scratch.

This challenge evaluates your team's ability to rapidly prototype, effectively utilize a modern JavaScript/React ecosystem, and seamlessly integrate external APIs to build a compelling user interface.

**Below are listed libraries and Public APIs you can use.**
**You must only use the given libraries, however you can use additional APIs for more functionality.**

## 🏆 Judging Criteria

Submissions will be evaluated on the following metrics:
1. **Library Integration:** The quantity and quality of external libraries successfully implemented. We are looking for meaningful usage of these tools to solve frontend challenges.
2. **Implementation & UX/UI:** The overall aesthetic, responsiveness, and usability of the application. Clean design and smooth user experiences will be highly rewarded.
3. **Version Control:** Proper use of Git, including clear, descriptive commit messages and logical branching.

## 🚀 Submission Guidelines

Please follow these steps carefully to ensure your project is evaluated:

1. **Fork** this repository.
2. **Clone** your forked repository to your local machines.
3. Create a new directory named after your team (e.g., `team-horizon` or `team-byte`).
4. Initialize your project within this directory.
5. **Showcase Video:** Record a 1-2 minute screen recording demonstrating your working project. Highlight the specific APIs and UI components you implemented.
6. **Commit & Push:** Add your project files and the showcase video (`.mp4` or a hosted link in your project's README) to your directory.
7. Open a **Pull Request (PR)** to this main repository before the 2-hour deadline.

### Version Control Best Practices
* Utilize feature branches for development (e.g., `feature/authentication`, `fix/layout-shift`).
* Use conventional commit messages to maintain a clean history (e.g., `feat: added Recharts for data visualization` or `fix: resolved API CORS issue`).

---

## 🛠️ Approved Libraries & Tools

You are encouraged to utilize tools from the following categories to accelerate your development process and enhance your application's capabilities.

### UI Components & Design Systems
* **[shadcn/ui](https://ui.shadcn.com/)** - Beautifully designed, accessible components.
* **[Chakra UI](https://chakra-ui.com/)** - Simple, modular, and accessible component library.
* **[NextUI](https://nextui.org/)** - Fast and modern React UI library.
* **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible components for building design systems.
* **[Mantine](https://mantine.dev/)** - A fully featured React components library.

### Icons & Typography
* **[Lucide React](https://lucide.dev/)** - Consistent, clean icon toolkit.
* **[React Icons](https://react-icons.github.io/react-icons/)** - Comprehensive library of popular icon sets.
* **[Heroicons](https://heroicons.com/)** - Hand-crafted SVG icons by the Tailwind CSS team.

### Animation & 3D Graphics
* **[Framer Motion](https://www.framer.com/motion/)** - Production-ready motion library for React.
* **[AutoAnimate](https://auto-animate.formkit.com/)** - Zero-config, drop-in animations.
* **[GSAP](https://gsap.com/)** - Advanced, professional-grade web animation.
* **[Three.js](https://threejs.org/) & [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)** - Tools for building 3D scenes in React.

### Data Fetching & State Management
* **[React Query (TanStack Query)](https://tanstack.com/query/latest)** - Robust asynchronous state management.
* **[Zustand](https://zustand-demo.pmnd.rs/)** - Fast, scalable, and minimalistic state management.
* **[Axios](https://axios-http.com/)** - Promise-based HTTP client.

### Forms, Validation & Editors
* **[React Hook Form](https://react-hook-form.com/)** - Performant and flexible form handling.
* **[Zod](https://zod.dev/)** - TypeScript-first schema validation.
* **[TipTap](https://tiptap.dev/)** - Headless, highly extensible rich text editor.

### Maps, Charts & Data Visualization
* **[Recharts](https://recharts.org/)** - Composable charting library built on React components.
* **[Chart.js](https://www.chartjs.org/) & [react-chartjs-2](https://react-chartjs-2.js.org/)** - Flexible JavaScript charting.
* **[React Leaflet](https://react-leaflet.js.org/)** - Interactive maps integration for React.

### Advanced Utilities
* **[dnd-kit](https://dndkit.com/)** - Modern drag-and-drop toolkit for React.
* **[date-fns](https://date-fns.org/)** - Comprehensive date utility library.
* **[Wagmi](https://wagmi.sh/) & [viem](https://viem.sh/)** - React Hooks for Ethereum/Web3 integration.
* **[Sonner](https://sonner.emilkowal.ski/)** - Opinionated toast notification component.

---

## 📡 Public APIs

You must integrate at least one of the following APIs to populate your application with dynamic data.

### Finance & Crypto
* **[CoinGecko API](https://www.coingecko.com/en/api)**: Cryptocurrency data, live prices, and historical charts.
* **[Alpha Vantage](https://www.alphavantage.co/)**: *(Free key required)* Real-time and historical stock market data.

### E-commerce & Mock Data
* **[DummyJSON](https://dummyjson.com/)**: Mock data for products, recipes, users, and carts.
* **[Fake Store API](https://fakestoreapi.com/)**: E-commerce prototype data including products and categories.

### Entertainment & Media
* **[The Movie Database (TMDB) API](https://developer.themoviedb.org/docs)**: *(Free key required)* Comprehensive data on movies, TV shows, and cast members.
* **[Spotify Web API](https://developer.spotify.com/documentation/web-api)**: *(Authentication required)* Metadata for artists, albums, and tracks.
* **[PokeAPI](https://pokeapi.co/)**: Extensive Pokémon database.
* **[Jikan API](https://jikan.moe/)**: Unofficial MyAnimeList API for anime and manga data.

### Science & Geography
* **[NASA Open APIs](https://api.nasa.gov/)**: *(Free key required)* Astronomy Picture of the Day, Mars Rover photos, and near-Earth object data.
* **[REST Countries](https://restcountries.com/)**: RESTful API for global country data (population, demographics, flags).
* **[OpenWeatherMap](https://openweathermap.org/api)**: *(Free key required)* Current weather data and forecasts.

### Sports
* **[TheSportsDB](https://www.thesportsdb.com/api.php)**: Crowd-sourced sports data, team information, and artwork.
* **[balldontlie](https://www.balldontlie.io/)**: NBA statistics and game data.

---

## ⚠️ Rules of Engagement

* **No Pre-built Templates:** Utilizing standard initializers (like Vite, Create React App, or Next.js) is permitted. However, cloning a full boilerplate containing pre-built application features or routing architectures is strictly prohibited.
* **AI Assistance:** AI tooling (e.g., GitHub Copilot, Gemini, ChatGPT) may be used for debugging, syntax, and scaffolding. The core architectural decisions and library integrations must remain your team's own work.
* **Time Limits:** All Pull Requests must be opened before the 120-minute mark. Late submissions will be subject to point deductions.
video link:-https://drive.google.com/file/d/1S1RyVJGSX_a4oN-iVQ-kc-IZJ5DMNrkc/view?usp=drivesdk
24 changes: 24 additions & 0 deletions my-react-app/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
16 changes: 16 additions & 0 deletions my-react-app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
29 changes: 29 additions & 0 deletions my-react-app/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
13 changes: 13 additions & 0 deletions my-react-app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-react-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading