WEBDEVS ASSEMBLE

CODE LIKE A HERO

FOR THE ULTIMATE MARVEL CHALLENGE

Join the most thrilling Marvel-themed web dev battle of the year. Build. Design. Defend your code universe.

INNOVATE

DESIGN

BUILD

INNOVATE

DESIGN

BUILD

Unleash your inner Tony Stark or Shuri as you craft web experiences worthy of Marvel legends.

img1

Easy 1: Loki's Multiversal Chronicles

Easy

After Loki Season 2, Loki, guardian of the multiverse's timelines, collaborates with The Watcher to chronicle epic characters. He seeks a system to craft and manage these stories. Create a webpage to help Loki with his stories.

Description and Features:

  • Character Form:
    • Inputs: Name, Backstory (e.g., "Born on Asgard, betrayed by kin"), Powers (e.g., "Illusion magic"), Weaknesses (e.g., "Arrogance"), Fights (e.g., "Battled Thor on Midgard").
    • The form should be simple, user-friendly and should have validation (e.g., required fields).
  • AI Story Generation:
    • Use an AI API (e.g., OpenAI or Gemini) to generate a narrative based on the character's details.
    • Display the story in a styled format.

CRUD Operations:

  • Create: Submit a new character and generate their story.
  • Read: View a list of all characters and their stories, with search/filter by name or universe.
  • Update: Edit existing character details and regenerate the story.
  • Delete: Remove a character and their story.

Storage:

  • Store character data and stories in a backend database.

Bonus Features:

  • Responsive UI:
    • Ensure the UI is responsive and works well on both desktop and mobile devices.
  • Authentication:
    • Implement user login/signup using Firebase or Clerk for secure access.
    • Only authenticated users can create, update, or delete characters.
  • Character Image Upload:
    • Allow users to upload an image for the character via a file input in the form.
    • Store images in a service like Cloudinary and display them with the character's story.

Easy 2: Peter's Victory Diaries

Easy

Post-Spider-Man: No Way Home, Peter, forgotten by the world, continues his solo Spider-Man journey. He wants a digital diary to log missions and their vivid details. Develop a web app for Peter to enter mission details with form validation and display missions in a card/grid format.

Features We Expect:

  • Mission Form:
    • Inputs: Mission Title (e.g., "Night Patrol"), Details (e.g., "Stopped a gang in Queens"), Location (e.g., "Queens Rooftop"), Date.
    • Simple form with validation (e.g., required fields).
  • Mission Display:
    • List all missions in a card or grid format, showing Title, Date, and a short description.
    • Click a mission to view full details and redirect to the mission page with all information.
  • Checkpoint Pins:
    • On the mission page, display a map with 2-3 pins dropped onto locations.
    • On hovering these pins, display tooltips with task details (e.g., "Used web-shooters at 10 PM").
    • Pins can be hard-coded to preferred map locations.

Database:

  • Store missions (Title, Details, Location, Date, AI Summary, Image URL) in a database.

Bonus Features:

  • Responsive UI: Ensure the UI is responsive and works well on both desktop and mobile devices.
  • Map Integration: Add a map (e.g., Google Maps or Leaflet) to show mission locations as clickable pins.
  • Cloudinary Integration: Upload mission images to Cloudinary for storage and optimization.

Intermediate: Captain's Ledger

Intermediate

As Captain America in The Falcon and the Winter Soldier, Sam leads the Avengers with precision. He needs a centralized platform to streamline team management. A full-stack website for Sam to oversee payments, attendance, missions, and communication.

What to Build:

  • User Features:
    • Send money to other Avengers (up to ₹10,000 per transfer).
    • See a list of all money sent or received.
    • Submit feedback via a form.
    • Able to view the assigned mission, and teammates.
    • Implement trial version of Payment Gateway for real feel of transactions.
  • Admin Features:
    • Send salaries to Avengers and receive feedback through mail.
    • Assign missions, add members, select status (ongoing, completed, failed, martyred).
    • Check list of Avengers and their payment records.
    • Post content on the platform viewable by everyone.
    • See the received feedback through mail.
    • Implement trial version of Payment Gateway for real feel of transactions.
  • Attendance System:
    • Admin starts "Take Attendance," creating a 6-digit code that lasts 1 minute.
    • Avengers get a pop-up to enter the code and mark themselves present.
  • Stats Page:
    • View attendance percentage of each Avenger.
    • Add graphs (bar chart, line chart for attendance).

Extra Ideas:

  • Add a calendar to see attendance history for users.
  • Admin can send money to multiple members at once.
  • Admin can send money at Advanced money mode ( e.g: Total mission money: 5000 rs- (1000 rs in advanced and rest 4000 after mission completion. The admin will transfer 5000 rs with setting advanced money to 1000 rs. Then reciever should get 1000 rs instant but 4000 rs after admin’s approval.
  • If admin post is marked "Important," send to all users via email.

Advanced: Doom's BattleWorld Recruitment

Advanced

Doom rules BattleWorld, a chaotic arena for multiversal clashes. He seeks a sleek platform to find and engage heroes and villains. A website for candidates to submit profiles and apply to job openings, with Doom posting jobs, swiping through candidates, and managing communications.

What to Build:

  • Two Roles:
    • Interviewee (Candidate): Creates/manages profile, applies to job openings with resume, views chat history, responds to messages.
    • Interviewer (Doom): Posts job openings, reviews applicant profiles, swipes to accept/reject/save, initiates chats, schedules calls.
  • Interviewee Profile:
    • Inputs: Name, Backstory (e.g., "Exiled Asgardian warrior"), Powers (e.g., "Energy manipulation"), Weaknesses, Key Battles, Preferred Role.
    • Form validation with required fields.
  • Job Openings (Doom):
    • Doom posts job openings with a title (e.g., “BattleWorld Tactician”) and description (e.g., “Lead assaults against multiversal threats”).
    • Stored in the backend, visible to candidates on a job board.
  • Application Process:
    • Candidates apply to job openings, submitting resume (text input or file upload).
    • Doom views card-based feed of applicants per job opening, showing profile and resume.
  • Swipe Mechanism:
    • Left swipe to reject, right swipe to shortlist for interview (enables chat).
    • Save profiles for later review, like profiles to highlight top candidates.
  • Chat System:
    • Real-time chat between Doom and shortlisted candidates, stored in database.
    • Accessible only after Doom accepts (right-swipes) an applicant.
  • Call or Email:
    • Doom schedules a video call meeting. He should also be able to send an email (via Nodemailer/SendGrid), e.g., “You’re summoned to Latveria for an interview.”
    • Website should have a feature of video calling between Interviewer and Interviewee.

    • Authentication & Backend:

    • Secure login/signup for both roles (custom-built or Firebase/Clerk).
    • Store profiles, job openings, applications, resumes, chat logs, likes, and call/email data.

    Bonus Features:

    • Matching Percentage: Display compatibility score based on job requirements and candidate profile using AI API or custom formula.
    • Interviewee Calendar: Candidates set interview availability via a calendar interface.