📅
📌 Project Overview
Final Submission Deadline: 10th April
🔰 Introduction
The objective of this project is to develop a web application that
demonstrates your understanding of JavaScript, API integration, and UI
development.
The application should include:
● Integration of a public API (using fetch)
● Use of array HOFs for filtering, sorting, and searching
● A well-designed user interface using CSS
💡 You may use libraries such as Tailwind CSS or Bootstrap if preferred
(optional, not mandatory).
Students are encouraged to explore creative ideas and enhance their projects
with additional features and styling.
⚠️ Use of AI tools is strictly prohibited. Any violation will result in deduction
of marks.
🔍 Finding Public APIs
You can explore a wide range of public APIs for your project using the
following resources:
● [Link]
● [Link]
📅 Final Deadline: 10th April
📊 The project will be evaluated at each milestone.
🚀 Milestone 1: Project Setup and Basic
Structure
🎯 Goal
You are required to decide what you will build and plan the foundation of
your project.
✅ Tasks
● Choose a project idea for your web application
● Select a public API that you will use in your project
● Create a GitHub repository for your project
● Create a [Link] file
○ The README file should clearly describe your project, including
its purpose, the API being used, the features you plan to
implement, and the technologies involved. It should also provide
basic information on how the project can be set up and run.
💡 Important Notes
● This milestone focuses on planning and clarity of your idea, not
implementation
● Choose a project that is feasible and can be completed within the
given timeline
● Ensure your idea supports features like search, filtering, or sorting for
later milestones
📅 Final Deadline: 23rd March
🌐 Milestone 2 - API Integration
🎯 Goal
To integrate and display real-time data from a public API.
✅ Tasks
● Implement API calls using fetch
● Display the fetched data dynamically on the webpage
● Handle loading states effectively
● Ensure the website is fully responsive across devices (mobile, tablet,
desktop)
📦 Deliverables
● Successful integration and display of API data
📅 Deadline: 1st April
⚙️ Milestone 3 - Core Features
🎯 Goal
To enhance the application by adding interactivity and dynamic behavior.
✅ Tasks
Implement at least three of the following features:
● Search:
Enable users to search data based on relevant keywords
● Filtering:
Allow users to filter results based on specific criteria
● Sorting:
Provide options to arrange data (e.g., ascending, descending,
alphabetical)
● Button Interactions:
Include interactive elements such as like, favorite, or view more
● Dark Mode / Light Mode:
Implement a theme toggle for better user experience
⚠️ Important Requirement
● Searching, filtering, and sorting must be implemented using Array
Higher-Order Functions (such as map, filter, reduce, find, sort,
etc.)
● Do not use traditional loops like for or while for these operations
📦 Deliverables
● Fully functional interactive features
📅 Final Deadline: 8th April
🚀 Milestone 4 - Documentation,
Deployment, and Final Submission
🎯 Goal
To finalize, document, and deploy the project.
✅ Tasks
● Update the [Link] with final details
● Refactor and clean the codebase
● Deploy the project using a suitable platform
📅 Final Submission Deadline: 10th April
⭐ Bonus Features (Optional but
Recommended)
You can enhance your project by implementing the following features. These are optional but
will improve performance, usability, and overall user experience.
● Debouncing
👉
Limits how frequently a function is executed, especially useful for search inputs.
Can be applied to the search bar to avoid making API calls on every keystroke.
● Throttling
👉
Ensures a function runs at a controlled rate over time.
Can be used during scrolling events or repeated button clicks to improve
performance.
● Pagination
👉
Divides large sets of data into smaller, manageable pages.
Useful when displaying lists of results from APIs (e.g., products, movies,
users).
● Loading Indicators
👉
Provides visual feedback while data is being fetched.
Can be shown during API calls to indicate that content is loading.
● Local Storage
👉
Allows storing data in the browser for persistence.
Can be used to save favorites, liked items, or user preferences (e.g., dark
mode).
● Infinite Scroll
👉
Automatically loads more data as the user scrolls down.
Can replace pagination for continuous content loading in lists or feeds.
● Progressive Web App (PWA)
Enhances your web application to behave like a native app with offline support and
👉
installability.
Can be implemented by adding a service worker and manifest file to enable
features like offline access, caching API data, and allowing users to install the app on
their device.
💡 Note:
Implementing one or more of these features will strengthen your project and demonstrate
advanced JavaScript concepts.
✅ Best Practices
To ensure a smooth development process and better project quality, follow these best
practices:
● Make Regular Commits
Commit your code frequently with meaningful messages (e.g., added search
functionality, implemented API fetch).
● Follow Clean Code Practices
Write readable and maintainable code with proper indentation and formatting.
● Use Meaningful Names
Use clear and descriptive variable and function names.
● Avoid Code Repetition
Reuse functions and components wherever possible (DRY principle).
● Maintain Proper Structure
Organize your code by separating concerns (API logic, UI rendering, event
handling).
● Handle Errors Gracefully
Add basic error handling for API calls (e.g., network issues, empty data).
● Ensure Responsiveness
Continuously check your UI on different screen sizes during development.
● Keep Your README Updated
Update documentation as you progress, not just at the end.
● Write Modular Code
Break your code into smaller, reusable functions for better readability and
maintainability.
💪 Final Note
This project is a great opportunity to apply everything you’ve learned and build something
you can be proud of. Focus on understanding concepts, writing clean code, and improving
step by step with each milestone.
Don’t hesitate to experiment, make mistakes, and learn from them — that’s an important part
of the development process.
🚀 All the best! We’re excited to see the ideas you come up with and the projects you build.
Give it your best effort and make it count!