Assignment la Assignment Ideas @ Phase 1: Spider-Man Setar Meola (eric Cielo eee eh eRe kur ee ea Me acy and contact information. Oe een et Mm es tet Ree NCR UBS ag interactive elements (e.g., a working contact form) © Skills Covered: HTML structure, semantic elements, forms, flexbox, media queries, EUR esas 2. Responsive Landing Page ‘Objective: Design a responsive landing page for a product or service Oe ees Gn une EMA ea ne er Mea ead ECACC et es ne eee se ace * Skills Covered: Flexbox, CSS Grid, media queries, and responsive design principles. 3. Interactive Quiz Application © Objective: Build an interactive quiz with multiple-choice questions. Oe eu cee ee SCM uM eee eee a correct/incorrect answers. Show the final score at the end Pi eee He ura Yeu nau CRE Hie ad la Pee Tae AC cect) Objective: Create an app that allows users to search for recipes by ingredient (using an external recipe API) Cen Sa se Oh eek ae Cir ue rey Dees ReM eal a Sas 7eat2a2000Assignment la Pc ncn muh nso Reouemi een Ea Ce aCe ae omy) Peat ee Me een RCo Maeno eens att Oe ai Ot (ole SOLE eR ORT RC RIEL CMM 1e (Aero) Ona CoA Sas * Skills Covered: Event handling, localStorage API, basic JavaScript logic 6. Image Gallery with Lightbox Effect Piel ent dere es en ues ter WAC e ea RMU Peco Pees ue Malm nee seu Meee ar) ken mene ed Skills Covered: CSS Grid, Flexbox, JavaScript DOM manipulation, and modal window Peery 7. Weather App (API Integration) Oe) rah ase RD Ue) eee RRR CL re Re user-entered location. Oe essen Mere Ran acceso nat ENaCUe ACU pe Sar © Skills Covered: API consumption, DOM manipulation, and handling JSON data EAN eta ae le eed Oe) ye Mer eR CMIMUT ae ec ona a Caco aero em I Ieee) (ORS Cue} «Requirements: Provide feedback for incorrect inputs and disable the submit button until all fields are valid Pe Tee Sen aU emanate nee ee ad Sas 7eat2a2000Assignment la 9. E-Commerce Product Page * Objective: Design an e-commerce product page that includes an image carousel product description, and price. Seas ea eh este Sure eM EU Rie ied Eeeiteue er itaa cl OM keel ML eS el POE CRE Mca La 10. Multi-Page Website * Objective: Build a multi-page website with navigation links that connect the homepage, about page, and contact page. OS eae Ce aia Meee MRM Ben yam rat elements like a contact form © Skills Covered: Navigation, forms, link management, and CSS styling ieee Leste Sec} o-oo LOM ALi aee) ode ela) Peele ee ace ne ae URC eet ne Re eek ss enc Ose uae BEN Nad oO Ce RC ale ol ole (ood RU Cd geese ee cicrt) Oe a ere earn Ye SOc ee Rae Tar ee murs 2. Interactive Countdown Timer Oe) rah Mek Reel e MUR mur eek: oR MEET sel aR Ale SRC aan a IT OR ees Us een tate eee ON Ch eet secon Ene CEM Rene * Skills Covered: Timer functions, JavaScript timing events, DOM updates. 3. Fetch Data from an API and Display Sas 7eat2a2000Assignment la ioc tuo ret aed eee RN le Rana eles Oe SCR OS eeome ee CEO reno MCR aa ERuMaCi oR ora (xem Reem co (2) «Skills Covered: Asynchronous JavaScript, fetch API, handling JSON data, DOM Dealer Cee yale) Cee nat ESCM amu aur Cun ele ReUt AC IR PU et see Tey Requirements: Use JavaScript to check if the input fields are filled correctly, and display error messages if validation fails. «Skills Covered: Form validation, regular expressions, event handling, DOM Tet Meloy 5. Build a Modal Dialog Seen eM Rep oa eeu ee cue eu Rec Ry JavaScript. Pe ee HOSE arl ta hore Race or megane en R en ka Go) Reena Rec aol Pen OM Cee uae ire GSR Colas OM eure ane B EN a at Ciel ene ee cen id garage eee nantes functionality. Seen ee Maren On muy. tec tcaati nas ser stops typing for a specified amount of time: Skills Covered: Debouncing, event handling, asynchronous JavaScript, API integration 7. Implement Throttling in JavaScript Sas 7eat2a2000508 PM © Objective: Create a button that logs the number cf clicks in a set period of time een ert ae OSCR a Rute Ree RM ae cana can be triggered, ensuring the function only executes at regular intervals. «Skills Covered: Throttling, event handling, performance optimization 8. JavaScript Calculator Oe ee Eat mee eae eum cy multiplication, and division See a ewer a Ona ere ee no as ae dynamically, and manage button clicks. Ce ke i OE ea ue gree Tse oe ca an) de Te Oe) tah eo eR CM UR oe ee user can click on any item to remove it. Use event delegation to handle events STs OSM eae tee enn Or cme ine Cn cam ne eC m ce Re mie NU au Oe a ee Hee ee UNO MUR rune eater Te 10. Build a Simple Weather App * Objective: Create a weather application that fetches weather data from a public API (e.g., OpenWeatherMap API) based on the users location or city input. Cee ae Seta once Mn h eg eRe aud current temperature, humidity, and other details in a user-friendly format Skills Covered: API integration, asynchronous JavaScript, geolocation, DOM Eee Phase 3: Node Ninja = Sas 7eat2a2000Assignment la 1. Build a Simple REST API with Node.js and Express © Objective: Create a basic REST API to manage a collection of items (e.g., products, coo) Oe se seer aM ce ome Rare Express and store data in a simple array or in-memory database. Oe ee ast es ae CR ae Reon PRU Te Nien ee) OTOL BU Me) on) OMe reas raat Ma Ce OMEN eB Reece Tele RU eU eC sursals Oe eee ee Meg iene ane eeu east aU tokens, and protect routes that require authentication. Skills Covered: Authentication, JWT, hashing passwords with berypt, middleware, Reeves 3. File Upload with Node.js ‘Objective: Create an API that allows users to upload files (e.g,, profile pictures) to SUL a OS a een S a ete ROLE see eee rears Peng Ric Pie ees a Me Tem en ew Uo Me eT Seca (eg, AWS $3), multer. 4. Create a Blog API with Database Integration (MongoDB/PostgreSQL) Oe ya ct eer ee net eC ce au e pened Oe eae ec eM ee( Reg aera sel les ciel se data, use Mongoose or Sequelize ORM, and implement basic CRUD operations. Oe ea ees arcsec commen en euros Me te) Eee OME ee eTeDy Sas 7eat2a2000Assignment la 5. Create a URL Shortener with Node,js * Objective: Build a URL shortener service that takes long URLs and generates short, unique URLs. Oe ae OMe n ommetRe ce ea ona arena original URLs to shortened URLs, and implement a reditection feature. SR eee AU meateet el eee Rena Met MR LCs Frclele once tre) 6. Build a Chat Application with WebSockets (Socket.io) * Objective: Implement a real-time chat application where users can send and receive Deere Sc «Requirements: Use socket.io to set up WebSockets for real-time communication and build a simple messaging interface OS ENN A estole cl Meo A eon oreo MONS ere CTIA} 7. Create a Task Management API with Role-Based Access Control (GUT Ne) Ciel renew eRe aie ene Use une ee ores roles, and control access based on user roles (Admin, User) Oe eer Gs uence Seat ales aoe cach aCe EES eRe oa este cues ie) Oa ke ee fe en Ment 2 nee ee routing 8. Implement API Rate Limiting with Redis Objective: Implement rate limiting in a Node.js API using Redis to prevent abuse. Oe eee easel Oe Oe tote eI Rue eee mi Pee eu hu eed See Cc «Skills Covered: Redis, rate limiting, performance optimization, middleware. Sas 7eat2a2000Assignment la PV Tretoaee UCa nL rate CML Cole Ciel retest een aie Wa Menu eres es Om Ren Na crore Tie handles a specific part of the application (e.g, user service, product service) OM ee acs GS nas Ma eco e an te eMC Pete aun SO eee M en cues OR ee AM ce Rem LM Re Reel eeu Pee Col NA Leb} 10. Implement Logging and Monitoring in Node.js (Winston, Morgan, PM2) * Objective: Set up logging and monitoring in a Nodejs application to track requests and errors in production Oe ete calc een Ua Ce Geen Mea RO ae tea and errors. Integrate PM2 for process management and monitoring, Oe Tee Re Rem nL eMac nu nora Pao Morgan Phase 4: React Alchemist 1. Build a Responsive Portfolio Website Using React * Objective: Create a personal portfolio website using React that showcases your Pa core Rot eycates ‘Requirements: Implement a responsive design using React, including sections like nae sec ee Kee aaUe stad ot momen oy ORS Ke Aa eol eMCe ea Cm Ae Tem aoe ene aeey 2. Create a To-Do List App with React and Local Storage Pel eee [eee ey eae ee ee oe mark tasks as complet Sas 7eat2a2000Assignment la Se ule eee RCAC Ue eR came Ra Presid teeelcl| Oe Ane eae a ees Mss (aa ese en aU oder rtory 3. Build a Movie Search App with React and The Movie Database rN Oey ran ec eRe Ra eta cn mM tte Ma enc se PIO ne ‘¢ Requirements: Fetch data from the TMDb API based on user input and display movie details (e.g,, title, poster, ratings). Oe eee nec UM Ciencias eee management, and conditional rendering 4. Develop a React Calculator App Cee at ete tee eta ncsa est cara arithmetic operations. Oe a es Ue ua Cad er RO oe ee and design a user-friendly interface. CR ee Bees ecu ae nae u eRe Me Cut 5. Create a Real-Time Weather App with React and OpenWeather rN Piel renee eRe ura Reach or eae nace Pee Rate a a cr) Oe ae er en ea mee ge eas aan oon read format (temperature, humidity, etc, Skills Covered: API integration, asynchronous data fetching, React state DEO Osa eer 6. Implement React Context for Global State Management Sas 7eat2a2000Assignment ideas ea Cen kee ure globally using React Context APL Requirements: Use Context API to share the shopping cart’s state across multiple components (e.g., product list, cart) Pe ee Ace oie Melee ane en set Paucar VGC MONS MUNN ie CeO MC) Ceol) Oe yan NOR ei nana rece Ce Came Crag input fields and validate the inputs. Pena es sae Cnn ean M CCR eee a ee dynamic inputs that change based on user selection Pe eA MCU ARC CCM cn Maa) ernie ss Reel oS 8. Build a Blog Dashboard with React and Firebase Cee) ) (tah Poo eRe Rea ee eR CR e-em oleae Relic (oe} Peo ee R ees Ones cele egies eee Men ec RE Meee eet uncer eae MICU eh ec} CS Modo le eV A eo Ma oto o om Lem eo OL NOB) ce 9. Create an E-commerce Product Listing Page with Pagination * Objective: Build a product listing page for an e-commerce app that allows users to. filter products by category and paginate through results. Requirements: Use React to create dynamic product listings, implement filtering Perera Cele VA Ue Me eRe a ed OM eee) a ee T Cu lam leone MeL cL oles Cm ara UTe Iia Sas 7eat2a2000Assignment la 10. Build a Social Media Feed with Infinite Scroll and Lazy Loading Oe ee) eer aes he Mate eee kee soe new posts are loaded lazily as they reach the bottom ‘Requirements: Implement infinite scrolling using the Intersection Observer API or a Teg aaeeert heer eee an Se eee aM Mm ee Cen meter Phase 5: Deploy Squad #” 1. Deploy a Node.js API on AWS EC2 Oe) ye ea a le Ue omen aera g Eel caos Oe eS se eee ee Cone ence meee ey groups, and make the API accessible publicly. * Skills Covered: AWS EC2, SSH, security groups, basic deployment process. PART 0) oe B Rel Le MTom lmao NCC oA A ‘* Objective: Deploy a Nodejs application on multiple EC2 instances and configure an Elastic Load Balancer (ELB) to distribute traffic evenly. ‘¢ Requirements: Set up multiple EC2 instances running your app and configure AWS Elastic Load Balancer to ensure high availability * Skills Covered: AWS Load Balancer, EC2 instances, auto-scaling, high availability, 3. Implement AWS CloudFront for CDN * Objective: Set up CloudFront to cache static assets of a React application (e.g. images, JavaScript, CSS) and reduce latency for global users. ‘© Requirements: Configure AWS CloudFront to point to an $3 bucket containing your cla leat) Sas 7eat2a2000Assignment la OM eee) ess R ool gion ek ola Poa urea (PN) Ecole yaa 4. Create Dockerized Node.js API and Push to AWS ECR Oe arate ren eee tee Ue ake cae Registry (ECR) Oe ec eee Omg Ce em Rye ees nian Naess OS Kel Pe SE eo el LWT UT 5. Deploy Dockerized Application with AWS ECS * Objective: Deploy a Dockerized application on AWS Elastic Container Service (ECS). Oe Seat ee Nae ee MCU Rec ae| Eee cca ee) Oe eee Ne Mire cece eRe Neca Ues nae 6. Configure AWS Security Groups and IAM Roles OMe yeaa Stee ee Peo aOR Ra Altre ensuring least-privilege access for both EC2 and $3 ‘Requirements: Create and configure security groups and IAM roles to secure access to EC2 instances, cad balancers, and $3 buckets. OR Tee Et ACrol ai oe econ urea Pelee tacts PASS aU) Meo elem P19) Co) AAMC dO oe NeleCoa a LaCe WANS) Pie) ra a UR ae Ret Cea eet onaU Io ROU aC ne OSM aN eT eaten Me UE eS ha ord SC EOC Ru acd Se eo ACH aM eater Ta a o>) er Eta Sas 7eat2a2000Assignment la met CMV ELL ee PSM LOMB al le) * Objective: Set up an AWS RDS database (e.g,, PostgreSQL or MySQL) and connect it PoN Ma oe asic ton ‘¢ Requirements: Launch an RDS instance, connect your application to it, and Tene eta Recon BS a eae DOM eS Cue ua oe cie UMaine Reed 9. Implement Docker Compose for Multi-container App Deployment Pesan lee mec eel EMU Rec eae aetna) No ect Re Moe Peco SM ete hea aes Sess anor file to configure and run multiple EN ce ken PM TER Miele Reel CMU eels] ee ells oN ad environment configuration. 10. Set Up Target Groups and Auto-scaling in AWS * Objective: Set up Auto Scaling groups in AWS to ensure your application can handle increased traffic, while distributing it across multiple EC2 instances using ae eCracrat ey OMe neo Mee Re eRe Mea ele aco eed otic traffic, and test the scaling behavior. * Skills Covered: AWS Auto Scaling, Elastic Load Balancer, Target Groups, monitoring traffic. Sas 7eat2a2000