Welcome to React Rumble – the ultimate coding duel where innovation meets adrenaline! Step into the arena where your React mastery will be tested in electrifying 1v1 showdowns. In Round 1, harness the power of GPT to quickly craft simple components and build a strong foundation. But when Round 2 arrives, the challenge intensifies: you must rely solely on your own skills to construct intricate components—no AI assistance allowed. Every second counts as you outpace your opponent in a battle of precision, creativity, and sheer coding speed. Gear up, let your React prowess shine, and seize your title as the champion of React Rumble! 🚀
Once you've completed your tasks, you'll be submitting your work using GitHub. Below are the details of the components you need to create, along with instructions on how to submit your work.
Create a functional modal that:
- ✨ Appears as an overlay with a semi-transparent background
- 🏷️ Contains a header, body, and close button
- 🚪 Implements open/close functionality
- 🎨 Uses CSS for styling
Build a theme switcher button on a multipage website that:
- 🔁 Persists across page navigation
- 🌑 Toggles between dark/light modes globally
- 🛠️ Uses CSS or styled-components
Create a table component that:
- ⚡ Import data from CSV file into the table
- 📊 Button for sorting data (default ascending)
- 🔄 Updates displayed rows without page refresh
- 📥 Includes a search input field
Create an interactive accordion component that:
- 📌 Expands/collapses content when clicked
- 📂 Supports multiple collapsible items
- 🔄 Allows one or multiple items open at once
Create a placeholder loading component that:
- 🎨 Displays animated skeleton loaders
- ⏳ Enhances UX while fetching API data
- ⚡ Supports different shapes (text, images, cards)
First, fork this repository to your own GitHub account by clicking the Fork button in the top right corner of the repo page.
Fire up your Git Bash/Terminal and steal clone the repo:
git clone https://github.com/<YourGitHubUsername>/FunctionalComponents.gitOnce you’ve successfully acquired the repo, create a new branch named after your Roll No. (We know you're special, so make it unique!):
git checkout -b <YourRollNumber>After completing the tasks, stage changes + write a commit message that’s better than "idk lol":
git add .
git commit -m "idk lol"Time to send your masterpiece into the wild! Push your branch to the remote repository
git push origin <YourRollNumber>- Go to the GitHub repo.
- Click “Compare & Pull Request”.
- Title: [YourRollNumber] I did the thing!
- Hit send.
Congrats! Your assignment is now someone else’s problem (mine🙂).
Your components will be judged on several key aspects: functionality, code quality, user experience, and innovation. The evaluation will consider how effectively your components perform their intended tasks, the clarity and maintainability of your code, and your adherence to best practices in React development. Special attention will be given to the efficiency of state management and API integration, as well as robust error handling.
Good luck!