WebWiz Induction Task Details Induction Process Overview: The task is divided into three progressive levels to ensure a structured and fair induction for WebWiz. Each level focuses on specific skills and carries corresponding points. Participants are expected to complete their tasks within 15 days from the date of assignment. Level 1: Layout and Design Focus: Basic structure and design of the website. Key Requirements: © Structure: © Navbar Header © Body © Footer © Design Elements: © Alignment and spacing © Font selection and readability © Color scheme consistency and aesthetics © Purpose: © Evaluate participants’ ability to create a visually appealing and well-organized website layout Points: Maximum points for clean and creative designs. Level 2: Responsiveness and Tailwind CSS. Focus: Adapting the website for different screen sizes and leveraging Tailwind CSS for styling. Key Requirements: Responsiveness: © Navbar design for both desktop and mobile views© Footer adjustment and responsiveness © Adaptation of the body layout for various screen sizes « Tailwind CSS Usage: © Participants who use Tallwind CSS for styling will receive additional points. © Demonstrate knowledge of utllty-first classes in Tailwind CSS. Purpose: ‘¢ Test participants’ understanding of responsiveness and their ability to optimize designs for various devices. Points: Additional points for Tailwind CSS usage and effective responsiveness implementation. Level 3: API Data Fetching and Mapping Focus: Integration of public APIs and mapping the data dynamically Key Requirements: © API Integration: © Fetch data using a simple GET request. © Use any public API (default suggestion: movie-related API) © Data Mapping: © Display data dynamically on the website (e.g., movie titles, posters, descriptions), Purpose: ‘© Assess participants’ ability to work with APIs and integrate data into their projects, Points: Maximum points for successful data fetching and effective mapping functionality. Submission Guidelines: 1, Alltasks must be submitted within the 15-day timeframe. 2, Participants must ensure their code is properly structured and commented. 3. Submissions will be evaluated based on creativity, functionality, and adherence to the level-specific requirements. Best of Luck! Let's see your creativity and coding skills shine!Design Team Induction Task Task 1 (Web Design): Clone one of the following websites: © E-commerce Website on Behance © ICS NIT Rourkela Official Website Task 2 (Poster Design): Redesign the given poster according to your creativity. ASE EY | / IT: HO4 —aodsns 10 seo x _A HACKODISHA - &@.© isInstructions: * Both tasks should be completed in a single Figma file. * Once completed, share the Figma file link for evaluation. Best of Luck to the Design Team! Let's see your design skills shine! Sophomore’s Induction Task Task Instructions for Developing a Basic Full Stack To-Do App This project involves creating a Basic To-Do App using a modem full-stack approach. It is designed to familiarize with the practical implementation of frontend and backend technologies, focusing on CRUD (Create, Read, Update, Delete) operations. Project Overview The app will have three pages: 1. Dashboard: To view, review, and delete tasks, 2. Create To-Do: A form for creating new tasks. 3, Update To-Do: A form for editing existing tasks. The project should be built using: Frontend: React with Tailwind CSS for styling © Backend: Express js for handling API requests. * Database: Any database (MongoDB) is preferred for storage.Instructions and Approach Frontend Development © Pages: © Dashboard Page: = Display all To-Do items fetched from the backend. Include buttons for deleting tasks and navigating to the Update To-Do Page. © Create To-Do Page: = A form to accept input for new To-Do tasks. a Use useState for controlled inputs and a POST API call to send data to the backend © Update To-Do Page: = A form pre-filled with the selected task’s details. a Use React Router to pass the task ID and populate the form via an API call m= Send updated data to the backend. © Styling: © Use Tailwind CSS for layout and responsive design © Create reusable components © Hook: © Use appropriate hooks to fetch data from the backend, manage local component states, and React Router for navigation. Backend Development © Express Server: © Create an Express,js server to handle API requests. © Define routes for CRUD operations: 1. GET: Fetch all To-Do items. 2. POST: Add a new To-Do. 3, PUT: Update an existing To-Do. 4, DELETE: Delete a To-Do. «Database Integration © Choose a database (e.g., MongoDB for NoSQL or PostgreSQL for relational). © Define a schema for To-Do tasks.Connecting Frontend and Backend 1. API Integration: © Use fetch or Axios to make API calls from the React app. 2. Testing: © Test the API endpoints using tools like Postman or Hoppscotch. Deployment © Frontend: © Deploy the React app using platforms like Vercel or Netty © Backend: © Deploy the Express server using services like Render or Heroku. © Database: © Host the database on cloud services like MongoDB Atlas or ElephantSQL. This project will give you hands-on experience with: Building a responsive user interface with React and Tailwind CSS. Managing application state using hooks. Handling API requests and integrating a backend. Deploying a full-stack application.