Course Outline For Applied Software Development
Course Outline For Applied Software Development
2025
COURSE OUTLINE
HTML5 AND CSS3 MODULE
HTML5 Topics
1. HTML5 Basics
• Introduction to HTML5
• Basic HTML tags: <html>, <head>, <body>, <title>, <h1>–<h6>, <p>, <a>, <img>, etc.
• New HTML5 input types: email, tel, url, date, datetime-local, number, range, color,
search, file
• Form validation: required, pattern, min, max, step
4. Multimedia in HTML5
• Geolocation API
• Notifications API
• Drag-and-Drop API
• Fullscreen API
1. CSS3 Basics
• Element selectors
• Flexbox Layout:
o Flex container and items
o Nested Flexboxes
• Grid Layout:
• CSS Transitions:
• CSS Animations:
• Media Queries:
• Shadows:
o Using filter property for effects like blur(), grayscale(), brightness(), sepia()
o Creating complex and adaptive layouts using both CSS Grid and Flexbox
BOOTSTRAP 5 MODULE
1. Introduction to Bootstrap 5
• Responsive grid: Breakpoints for various screen sizes (xs, sm, md, lg, xl, xxl)
• Nesting columns
• Grid alignment: .align-items-start, .align-items-center, .align-items-end
3. Bootstrap 5 Layouts
4. Typography
• Text alignment: .text-left, .text-center, .text-right
• Typography classes: .display-1, .display-2, .lead, .h1, .h2, .h3, .h4, .h5, .h6
5. Bootstrap 5 Components
• Buttons:
• Cards:
• Alerts:
o Basic alert usage
• Modals:
• Navbar:
• Forms:
• Tables:
• List Groups:
• Progress Bars:
• Spacing: Margin and padding utilities (m-2, p-3, mt-4, pt-5, etc.)
7. Bootstrap 5 Responsiveness
8. Bootstrap 5 Customization
9. JavaScript Plugins
• What is JavaScript?
• How JavaScript works in browsers (JS engines, event loop)
• Including JavaScript in HTML: <script> tag, src attribute, inline vs. external scripts
• Higher-order functions
• Immediately Invoked Function Expressions (IIFE)
• Function binding and this keyword
• Recursion in JavaScript
5. Objects
• Introduction to objects: Creating objects, Object constructor
• Object destructuring
• this in objects
• Prototype-based inheritance
6. Arrays
• Iterating over arrays: for, forEach, map, filter, reduce, some, every
• Array destructuring
• Multidimensional arrays
• Array sorting and searching (sort(), find(), indexOf(), includes())
7. ES6+ Features
8. Asynchronous JavaScript
• Event delegation
• Handling user input: mouse events, keyboard events, focus, and blur events
• Currying functions
• Memoization techniques
• Methods in classes
• Static methods
• Encapsulation and access modifiers (private, public)
• Module pattern
• Singleton pattern
• Factory pattern
• Observer pattern
• Prototype pattern
• Decorator pattern
• MVC (Model-View-Controller) architecture
• Working with third-party APIs (example: weather API, Google Maps API)
15. JavaScript and Web Storage
• Geolocation API
PYTHON MODULE
1. Introduction to Python
• What is Python?
• Variables and data types: int, float, str, bool, list, tuple, dict, set
3. Operators
4. Control Flow
• Nested conditionals
5. Functions
• Recursion in Python
6. Data Structures
• Lists:
o Nested lists
o List comprehensions
• Tuples:
o Tuple immutability
o Nested tuples
• Dictionaries:
• Sets:
7. File Handling
8. Exception Handling
• Try-except blocks
• Standard library: os, sys, math, random, datetime, re, json, collections
• Installing external packages using pip
• Generator expressions
12. Decorators
• Function decorators
• Chainable decorators
• Threading vs Multiprocessing
• Amortized Analysis
• Recursion and its relation to algorithms
2. Arrays
o Finding duplicates
o Rotating arrays
o Reverse an array
o Find the missing number (Sum formula vs XOR)
• Applications:
3. Linked Lists
• Introduction to Linked Lists: Singly Linked List, Doubly Linked List, Circular Linked
List
4. Stacks
o Parenthesis matching
• Problems:
5. Queues
• Types of Queues:
o Simple Queue
o Circular Queue
o Priority Queue (Min-Heap and Max-Heap)
• Applications:
o Job scheduling
• Queue Problems:
o Implement a queue using stacks
o Circular queue implementation
6. Hashing
• Collision Resolution:
o Chaining
• Applications of Hashing:
o Finding duplicates
• Problems:
o Group anagrams
7. Trees
• Problems:
o Diameter of a tree
8. Graphs
• Graph Representation:
• Graph Traversal:
o Bellman-Ford Algorithm
o Prim’s Algorithm
o Kruskal’s Algorithm
• Topological Sort (for DAGs)
• Graph Algorithms:
• Problems:
9. Searching Algorithms
o Ternary Search
o Exponential Search
• Problems:
o Searching in rotated sorted array
o Bubble Sort
o Selection Sort
o Insertion Sort
o Merge Sort
o Quick Sort
o Heap Sort
o Counting Sort
o Radix Sort
o Bucket Sort
• Sorting Complexity Analysis: Time and space complexity for different algorithms
• Problems:
o Finding kth smallest/largest element
• DP on Arrays:
o Fibonacci sequence
• DP on Strings:
o Palindromic Substrings
• DP on 2D grids:
o Unique paths
• Advanced DP Problems:
o Partition problem
o Maximum subarray sum with at most two non-overlapping subarrays
12. Greedy Algorithms
o Huffman coding
• Backtracking vs Recursion
• Common Backtracking Problems:
o N-Queens problem
o Sudoku Solver
o Rat in a maze
• Binary Search
o Rabin-Karp algorithm
o Boyer-Moore algorithm
• String Manipulation Algorithms:
o Palindrome detection
o Z algorithm
• Bit Manipulation:
o Bitwise tricks
REACT MODULE
1. Introduction to React
• What is React?
• Lists and Keys: Rendering lists of data and using keys for efficient updates
5. React Router
• Introduction to React Router
6. State Management
• Redux:
• useEffect: Performing side effects like data fetching, subscriptions, DOM manipulation
• Custom Hook for Data Fetching: Making HTTP requests with fetch or axios
• React Query: A library for fetching, caching, and syncing data in React apps
• What is Git?
• Git Terminology: Repository, Commit, Branch, Merge, Remote, Clone, Push, Pull
• git diff: Viewing differences between working directory and staged changes
• git revert: Reverting a commit (creating a new commit that undoes changes)
• git remote: Viewing and managing remotes (e.g., git remote -v)
5. Git Workflow
• Basic Git Workflow:
• Continuous Integration (CI) with Git: Automating testing and deployment pipelines
• git bisect: Binary search for finding the commit that introduced a bug
• Rebasing and Pull Requests: Using rebase to keep commits clean in PRs
• Collaborative workflows:
o Creating a repository
o Making commits
• GitHub Issues and Labels: Managing issues, bugs, and feature requests in open-source
projects
• Recovering Lost Commits: Using git reflog and git fsck to recover lost data
• Fixing Broken Repositories: Using git fsck, git fsck --full, and git gc
• Git Branching Strategy: Git Flow, GitHub Flow, Feature Branch Workflow, Trunk-
based development
• Git and Large Files: Using Git LFS (Large File Storage) for large files
are critical for becoming proficient in Git.
2. Database Basics
• Database Tables: Structure, Rows, and Columns
• Database Constraints:
o NOT NULL
o UNIQUE
o CHECK
o DEFAULT
o FOREIGN KEY
• Data Types: Choosing the right data types for fields (integer, varchar, date, etc.)
• Aggregation:
• Joins:
o INNER JOIN
o CROSS JOIN
o Self JOIN
• Subqueries:
o IN, NOT IN
• Transactions:
• Triggers: Setting up triggers for automatic actions (before and after INSERT, UPDATE,
DELETE)
• Prepared Statements: Using parameterized queries for security (SQL injection
prevention)
• Temporary Tables: Creating and using temporary tables
• Normalization:
o First Normal Form (1NF), Second Normal Form (2NF), Third Normal Form
(3NF)
• Relationships:
7. Data Import/Export
• Data Import:
• User Management: Creating and managing database users, roles, and permissions
• Database Monitoring: Using tools like pgAdmin, MySQL Workbench, Oracle
Enterprise Manager
• Query Performance Tuning:
• Replication and Failover: Setting up and managing replication for redundancy and load
balancing
• What is Django?
2. Django Basics
• Views:
• Templates:
o Using Django’s template language
o Template inheritance
• Models:
3. Django Forms
• Model Relationships:
o One-to-one, one-to-many, and many-to-many relationships
9. Django Middleware
• What is middleware?
• Use cases for signals (e.g., sending emails after saving a model)
• Setting up the development environment (Node.js, NPM, Expo CLI, React Native CLI)
• Creating the first React Native app (npx react-native init or expo init)
• Running the app on emulators, simulators, and real devices (iOS and Android)
• React Native components and how they differ from web components
• Event Handling:
• Stack Navigation:
• Drawer Navigation:
4. State Management
• React Query: Optimizing data fetching and caching with React Query
• Writing unit tests with Jest and React Native Testing Library
• Using detox for end-to-end testing
• Debugging in React Native (using React Native Debugger, Flipper, or Chrome DevTools)
• Performance profiling and memory leak detection using Flipper and Xcode Instruments
• Debugging React Native apps (Remote Debugging, Flipper, React Native Debugger)
• Understanding and fixing common React Native errors (red screens, network errors)
o Building APKs and AABs for Android and IPAs for iOS
• Over-the-Air (OTA) Updates: Using Expo or CodePush for pushing updates to your app
without app store releases
• App Store and Google Play Store: Preparing your app for submission, guidelines, and
best practices
• CI/CD: Setting up Continuous Integration and Deployment for React Native apps
(Fastlane, CircleCI, GitHub Actions)
• App Store Optimization (ASO): Strategies for app visibility and user acquisition
PROJECTS SECTION
WEBSITE DESIGNING PROJECT
Overview:
Create an advanced personal portfolio website that showcases your skills, experience, projects,
and contact information. The website will feature several interactive and dynamic elements such
as a responsive grid layout, animated transitions, sticky navigation, hover effects, and a contact
form with validation.
Features to Implement:
1. Responsive Design
• Responsive Grid Layout: Use CSS Grid for the layout of the portfolio sections, ensuring
that sections rearrange dynamically based on the viewport size.
• Media Queries: Implement media queries to handle changes in layout, font sizes, and
component arrangements for different devices (mobile, tablet, desktop).
2. Navigation
• Sticky Navigation Bar: The top navigation should remain fixed at the top of the screen
when the user scrolls down.
• Smooth Scroll: Implement smooth scrolling when navigating to different sections of the
page.
3. Sections of the Portfolio
• About Section: A section where you describe your skills, experience, and background,
including a short biography.
• Projects Section: Showcase your projects in a grid or card layout. Each project should
include:
o Project name
o Short description
o Skills or tools used
• Testimonials Section: Display feedback or quotes from people you’ve worked with,
using a responsive carousel or grid of testimonials.
• Contact Form Section: Create a form with fields for the user’s name, email, message,
and a CAPTCHA. The form should have validation for each field (using HTML5
validation attributes such as required, pattern, etc.).
• CSS Flexbox: Use Flexbox for the layout of smaller components like the navigation,
footer, and project cards.
• CSS Grid: Use CSS Grid for the layout of the main sections such as the About, Projects,
and Testimonials sections to create a modern and flexible layout.
• Hover Effects: Apply hover effects to project cards and buttons (e.g., scaling, color
changes, shadow effects) to make the site more interactive.
o Use CSS transitions for smooth hover effects (for example, smooth transitions
when hovering over buttons or images).
o Add animations for elements entering the screen (e.g., fading in or sliding up as
the user scrolls).
o Create an animated loading screen for when the page first loads.
• Custom Fonts and Icons: Use Google Fonts for typography and Font Awesome or
custom SVG icons for visual enhancements.
5. Accessibility Features
• Semantic HTML5 Tags: Use proper HTML5 semantic elements such as <header>,
<main>, <footer>, <section>, <article>, <nav>, <form>, etc., for better SEO and
accessibility.
• Keyboard Navigation: Ensure the navigation and form elements are accessible by
keyboard and follow proper focus management.
• Color Contrast: Use high-contrast text and background colors for readability and
accessibility (especially for users with visual impairments).
• Alt Text for Images: Include descriptive alt attributes for all images for screen readers.
6. Forms and Validation
• Submit Button Animation: Animate the form submit button on hover, and show a
loading spinner when the form is submitted.
• CSS Variables: Use CSS variables for easier color and spacing management.
• Custom Scrollbar: Style the scrollbar to make it visually appealing and consistent with
the site’s design.
• Lazy Loading Images: Implement lazy loading for images to improve performance on
long pages with many visuals.
• Minification and Compression: Minify your CSS, HTML, and JavaScript files to
reduce the page load time.
• Image Optimization: Compress images without losing quality, ensuring fast loading
times, especially for large background images.
Project Structure:
/portfolio-project
/index.html
/assets
/images
- project1.jpg
- hero.jpg
- logo.svg
/css
- styles.css
/js
- script.js
/fonts
- OpenSans-Regular.ttf
- Lato-Bold.ttf
Steps to Build:
o Start by setting up the basic HTML5 structure for your project. Ensure you're
using appropriate semantic HTML5 elements.
o Build the responsive grid layout for each section using CSS Grid for larger
screens and Flexbox for smaller components.
o Make sure each section (hero, about, projects, testimonials, contact) is clearly
defined and styled.
3. Add Navigation:
o Create the sticky top navigation bar and implement the hamburger menu for
mobile view.
o Design each section using CSS and ensure that content is readable and
appropriately spaced.
o Implement hover effects and transitions for interactive elements.
5. Form Implementation:
o Create the contact form and add HTML5 validation for required fields, email
format, etc.
o Style the form and create custom validation error messages.
6. Apply Animations and Transitions:
o Add animations to elements as they enter the viewport (e.g., fade-in, slide-up,
etc.).
7. Test Responsiveness:
o Test the responsiveness of the site on various screen sizes using media queries.
9. Deploy:
o Once the website is finished, deploy it using a platform like GitHub Pages,
Netlify, or Vercel.
• Progressive Web App (PWA): Turn your portfolio into a Progressive Web App that can
be installed on mobile devices and works offline.
• Dark Mode Toggle: Implement a dark/light mode toggle that switches between two color
schemes.
• SVG Animations: Use SVG animations for logos or icons to make the site more
dynamic.
JAVASCRIPT PROJECT
1. Basic Task Management Features
• Add Task: Users should be able to add new tasks by entering text in an input field.
• Task Description: Allow users to add additional details to tasks, like due date or
description.
• Task Due Date: Add functionality to specify a due date for each task.
• Store the tasks in the browser's local storage so that tasks persist even when the page is
refreshed.
• When the page loads, retrieve the tasks from local storage and render them on the page.
3. Dynamic Rendering
• Render tasks dynamically on the web page as they are added, edited, or deleted.
• Use JavaScript to manipulate the DOM and update the list without refreshing the page.
• Filter Tasks: Allow users to filter tasks based on completion status (All, Active,
Completed).
• Sort Tasks: Allow users to sort tasks by priority, due date, or alphabetical order.
5. Search Functionality
• Add a search bar that allows users to search through tasks by title or description.
• Use JavaScript or CSS transitions to animate task addition, deletion, and reordering.
• Add subtle animations when tasks are marked as complete or incomplete (e.g., crossing
out completed tasks).
8. Task Validation
• Implement input validation to ensure that the task title is not empty before adding it to the
list.
• Show an error message if the user tries to add an empty task.
• Event Delegation: Use event delegation for handling multiple dynamic event listeners,
such as task delete or mark as complete.
• Promises and Async/Await: If your app fetches tasks from an API (e.g., from a mock
API), use async/await to handle asynchronous operations.
• Custom Events: Use custom events to trigger certain actions, such as marking all tasks
as completed.
• Priority Levels: Add a dropdown for users to set task priority (e.g., Low, Medium,
High).
• Notification System: Display notifications when a task is approaching its due date or is
overdue.
• Task Categories: Allow users to categorize tasks (e.g., Work, Personal, Study) and filter
by category.
• Dark Mode: Implement a dark mode toggle using JavaScript and store the user
preference in local storage.
Project Structure:
/task-manager
/index.html
/assets
/css
- styles.css
/js
- script.js
/images
2. CSS Styling:
o Design the layout of the task list using Flexbox or CSS Grid.
o Style each task with a different background color or priority indicator based on its
status (active, completed, high priority).
3. JavaScript Logic:
o DOM Manipulation: Use JavaScript to manipulate the DOM based on user
actions:
▪ Add tasks dynamically to the list.
o Drag and Drop: Use the dragstart, dragover, and drop events to implement drag-
and-drop reordering of tasks.
o If you're using an external API (mock API), use fetch or axios with async/await to
load tasks from a server or simulate an API call to fetch tasks.
6. Advanced Features:
o If implementing dark mode, store the mode preference in localStorage and apply
the corresponding styles dynamically when the app loads.
o Implement drag-and-drop reordering and ensure that the new order is saved in
localStorage.
7. Testing:
o Test all functionalities (add, edit, delete, mark complete, search, filter, sort, drag-
and-drop) to ensure everything works smoothly.
o Check browser compatibility (make sure to handle edge cases like localStorage
availability).
addButton.addEventListener("click", function() {
taskItem.textContent = taskText;
taskList.appendChild(taskItem);
taskInput.value = "";
saveTasks();
}
});
function saveTasks() {
window.onload = function() {
if (tasks) {
tasks.forEach(task => {
taskList.appendChild(taskItem);
});
};
taskList.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id);
});
taskList.addEventListener("dragover", function(event) {
event.preventDefault();
});
taskList.addEventListener("drop", function(event) {
event.preventDefault();
taskList.insertBefore(draggedTask, targetTask);
});
PYTHON PROJECT
Overview:
Build an Event Management System that allows users to register for events, manage event
details, send notifications to users, and track event registrations. The system should include
features for creating, updating, and deleting events, managing user registrations, sending email
notifications about upcoming events, and integrating an external API to fetch weather data for
each event.
• User Registration: Allow users to create an account with a username, email, and
password.
• Authentication: Protect certain API endpoints (e.g., registering for an event) with token-
based authentication (using JWT - JSON Web Tokens).
2. Event Management
• Create Events: Allow users to create events by providing details such as event name,
date, location, description, etc.
• Event List: Display a list of events with details (name, date, location, description, etc.).
• Register for Events: Allow users to register for events by providing their name and
email.
• Event Registrations: Display the list of users who have registered for a particular event.
• Event Capacity: Set a maximum capacity for each event and prevent further registrations
once the event is full.
4. Email Notifications
• Send Registration Confirmation: Send a confirmation email when a user successfully
registers for an event.
• Event Reminder: Send a reminder email to registered users a few days before the event.
• Send Notifications for Event Updates: Send an email notification when event details
(date, location, etc.) are updated.
• Weather API: Integrate an external weather API (e.g., OpenWeatherMap) to fetch the
weather forecast for the location of each event.
• Display Weather: Show the weather forecast for the event’s location on the event details
page.
6. API Endpoints
Project Structure:
/event_manager
/app
/templates
/static
/css
- styles.css
/requirements.txt # Project dependencies (Flask, SQLAlchemy, etc.)
Steps to Build:
4. Event Management:
• Create routes for creating, updating, and deleting events (e.g., /events, /events/{id}).
• Ensure that users can only edit or delete their own events.
5. API Endpoints:
• Implement API endpoints to handle CRUD operations for events and registrations:
• Use smtplib or an external email API (e.g., SendGrid, Mailgun) to send registration
confirmation emails.
• Use a cron job or a scheduled task to send email reminders a few days before an event.
• Use an API like OpenWeatherMap to fetch the weather data for the event’s location.
• Show the weather forecast (e.g., temperature, conditions) on the event details page.
• Ensure that all sensitive data (e.g., passwords) is securely hashed and stored.
• Validate inputs for events and registrations (e.g., date format, email format).
• Write unit tests for the app (e.g., testing user registration, event creation, API endpoints).
• Test email sending functionality and verify that users are correctly notified.
10. Deployment:
• Deploy the app to a cloud platform like Heroku, AWS, or DigitalOcean.
• Configure the production environment (e.g., use MySQL in production, secure API keys,
etc.).
import jwt
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] =
'mysql://username:password@localhost/db_name'
db = SQLAlchemy(app)
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
@app.route('/register', methods=['POST'])
def register():
data = request.get_json()
db.session.commit()
@app.route('/login', methods=['POST'])
def login():
data = request.get_json()
user = User.query.filter_by(username=data['username']).first()
return jsonify(token=token)
if __name__ == '__main__':
app.run(debug=True)
import smtplib
msg = MIMEMultipart()
msg['From'] = 'your_email@example.com'
msg['To'] = to_email
msg['Subject'] = subject
msg.attach(MIMEText(body, 'plain'))
server.starttls()
server.login('your_email@example.com', 'your_password')
body = f"Dear User,\n\nYou have successfully registered for the event: {event_name}."
import requests
def get_weather(location):
api_key = "your_openweathermap_api_key"
url =
f"http://api.openweathermap.org/data/2.5/weather?q={location}&appid={api_key}&units=metri
c"
response = requests.get(url)
data = response.json()
return {
"temperature": data['main']['temp'],
"conditions": data['weather'][0]['description']
Outcome:
By completing this project, you will have built an Event Management System with the
following advanced features:
Project: Task Management System with Optimized Search and Sorting Algorithms
Overview:
Build a Task Management System where users can add, delete, update, and sort tasks.
Implement various data structures (like linked lists, hash maps, trees, etc.) and algorithms
(sorting, searching, graph traversal) to enhance the functionality of the system. The system
should be capable of handling large data sets efficiently and allow users to perform different
operations with optimized time and space complexities.
1. Task Management
• Add Tasks: Add tasks with attributes like task name, priority, status, due date, etc.
• Sort Tasks: Implement sorting algorithms like Quick Sort, Merge Sort, or Heap Sort to
sort tasks based on priority, due date, etc.
• Implement graph traversal (like DFS or BFS) to handle task dependencies. For
example, if Task A depends on Task B, ensure that Task B is completed before Task A.
• Implement Advanced Sorting Algorithms like Quick Sort, Merge Sort, or Heap Sort
to sort tasks by different attributes such as deadlines, priority, etc.
• Optimize all the operations (add, delete, update, sort, search) with respect to time
complexity using appropriate data structures and algorithms.
• Integrate the task manager with a database like MySQL or SQLite to persist tasks and
allow users to retrieve their tasks even after the program is restarted.
3. Linked List: If you need to implement a queue-like structure to maintain task order.
5. Binary Search Tree (BST): For storing tasks in a way that allows efficient searching,
insertion, and deletion of tasks based on a specific attribute (e.g., task deadline).
Algorithms to Implement:
1. Sorting Algorithms:
o Quick Sort
o Merge Sort
o Heap Sort
2. Searching Algorithms:
o Binary Search (if tasks are stored in sorted order)
3. Graph Algorithms:
o Implement the heap data structure for efficiently retrieving the highest or lowest
priority tasks.
Project Structure:
/task_manager
/task.py # Task model (attributes: name, priority, status, due date, etc.)
/task_manager.py # Task manager with methods for adding, deleting, updating tasks
/tests
• Define a Task class with attributes such as name, priority, due date, and status.
• Implement methods in the TaskManager class to add, delete, update, and view tasks.
class Task:
self.task_id = task_id
self.name = name
self.priority = priority
self.due_date = due_date
self.status = status
class TaskManager:
def __init__(self):
self.tasks = {}
self.tasks[task.task_id] = task
if task_id in self.tasks:
del self.tasks[task_id]
def view_tasks(self):
return list(self.tasks.values())
• Implement sorting algorithms like Quick Sort or Merge Sort to allow users to sort tasks
based on priority, due date, or other attributes.
if len(tasks) <= 1:
return tasks
pivot = tasks[0]
less_than_pivot = [task for task in tasks[1:] if getattr(task, key) < getattr(pivot, key)]
greater_than_pivot = [task for task in tasks[1:] if getattr(task, key) >= getattr(pivot, key)]
• Implement Binary Search (if tasks are sorted) or Hash Map based search for efficient
lookups.
if tasks[mid].name == target_name:
return tasks[mid]
elif tasks[mid].name < target_name:
low = mid + 1
else:
high = mid - 1
return None
4. Implement Graph Traversal for Task Dependencies:
• Use DFS or BFS for handling task dependencies. For instance, if a task depends on other
tasks, ensure those tasks are completed first.
def dfs(task, task_graph, visited):
visited.add(task.task_id)
for dependency in task_graph.get(task.task_id, []):
• Implement a min-heap (or max-heap) to allow for priority-based task handling. Higher
priority tasks can be processed first.
import heapq
class TaskPriorityQueue:
def __init__(self):
self.priority_queue = []
def get_highest_priority_task(self):
import sqlite3
def create_database():
connection = sqlite3.connect('task_manager.db')
cursor = connection.cursor()
cursor.execute('''
name TEXT,
priority INTEGER,
status TEXT,
due_date TEXT
)
''')
connection.commit()
connection.close()
• Write unit tests to validate the correctness of sorting, searching, and CRUD operations.
• Optimize the performance for large task sets (e.g., using binary search, hash maps, or
efficient sorting algorithms).
Outcome:
By completing this project, you will have built a Task Management System that incorporates
various data structures and algorithms:
• Efficient Task Retrieval using hash maps.
• Sorting and Searching tasks using different algorithms (e.g., Quick Sort, Binary
Search).
This project will not only help you test your understanding of data structures and algorithms but
will also enhance your skills in problem-solving, optimization, and implementation.
Overview:
Build a React Native Expense Tracker App where users can track their expenses by
categorizing them (e.g., Food, Transport, Entertainment, etc.). The app will allow users to:
• Sync the data with a cloud database (like Firebase or a custom API) to allow data
persistence across devices.
• Use Firebase Authentication or JWT to implement user login and sign-up functionality.
2. Expense Management
• Add Expense: Users can add a new expense with details like name, amount, category,
date, and description.
3. Expense Filters
• Show a chart or graph representing the total expenses by category using a library like
react-native-chart-kit or victory-native.
• Use AsyncStorage or SQLite to store expense data locally on the user's device.
7. UI/UX Design
• Use React Navigation for app navigation (e.g., StackNavigator for navigating between
screens).
• Use Push Notifications (Firebase or another service) to notify users about their spending
(e.g., "You have exceeded your budget for the week!").
• React Hook Form or Formik: For managing form inputs and validations.
• Axios/Fetch API: For integrating APIs (if using a custom backend for syncing).
• Push Notifications: Use Firebase Cloud Messaging or another service to send push
notifications.
Project Structure:
/expense-tracker-app
/src
/components
/screens
/HomeScreen.js # Display a list of expenses with filters
/services
/storage.js # For interacting with AsyncStorage or SQLite
/firebase.js # Firebase setup for authentication and data syncing
/context
1. Set Up Navigation:
• Install React Navigation for navigating between different screens (Home, Add/Edit
Expense, Expense Details, Summary).
npm install @react-navigation/native @react-navigation/stack
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
2. Expense Form (Add/Edit Expense):
• Use React Hook Form to manage form inputs and validation for adding and editing
expenses.
defaultValues: expense || { name: '', amount: '', category: '', date: '' },
});
return (
<View>
<Controller
name="name"
control={control}
render={({ field: { onChange, value } }) => (
<TextInput
value={value}
onChangeText={onChange}
placeholder="Expense Name"
/>
)}
/>
<Controller
name="amount"
control={control}
<TextInput
value={value}
onChangeText={onChange}
placeholder="Amount"
keyboardType="numeric"
/>
)}
/>
<Controller
name="category"
control={control}
render={({ field: { onChange, value } }) => (
<TextInput
value={value}
onChangeText={onChange}
placeholder="Category"
/>
)}
/>
</View>
);
};
<View>
<FlatList
<View>
<Text>{item.name}</Text>
<Text>{item.amount}</Text>
<Button
title="View Details"
/>
</View>
)}
/>
</View>
);
};
• Optionally, implement Firebase integration for cloud storage and real-time syncing.
npm install @react-native-async-storage/async-storage
5. Expense Summary with Charts:
return (
<BarChart
data={{
},
],
}}
width={320}
height={220}
yAxisLabel="$"
/>
);
};
This Expense Tracker App project will give you a good understanding of React Native's core
features such as navigation, state management, forms, local storage, and data syncing. You'll
also gain experience in integrating third-party libraries and optimizing your app for real-world
use.
FINAL PROJECT
Overview:
Create a Job Board Platform that allows companies to post job openings and candidates to
apply for these jobs. The platform will have several features, including:
• Company Profile Management: Companies can manage their profiles, including listing
job openings.
• Job Listings: Users (job seekers) can browse and filter job listings.
• User Profiles: Job seekers can create and update their profiles (including resume
uploads).
• Application System: Job seekers can apply for jobs directly through the platform.
• Real-time Notifications: Job seekers will be notified in real-time when a job is posted
that matches their profile and skill set.
• Admin Panel: Admins can manage users, job postings, and applications through the
Django admin panel.
• Authentication: Users (both companies and job seekers) will need to sign up and log in
to access the platform.
• Search and Filters: Job seekers can filter jobs by category, location, and other criteria.
This project will demonstrate your ability to work with Django REST Framework for the
backend and React for the frontend, as well as your ability to implement real-time notifications,
user authentication, file uploads, search functionality, and complex relationships (jobs,
applications, users).
Key Features to Implement:
• User Types: Separate user roles for companies and job seekers.
• Use JWT (JSON Web Tokens) for user authentication.
2. Job Postings
• Each job posting will have a title, description, requirements, company info, salary range,
and location.
• Job Search and Filtering: Implement search functionality by job title, company,
location, and skill set.
• Resume Upload: Job seekers can upload resumes, which will be stored in the backend.
• Skills Set: Job seekers can add a list of skills to their profile, which will be matched
against job postings.
4. Application System
• Job seekers can apply for jobs.
• Application Status: Companies can change the status of applications (e.g., "Under
Review", "Accepted", "Rejected").
5. Real-Time Notifications
• When a job that matches a job seeker's profile is posted, a real-time notification will be
sent to the job seeker.
• Notifications for application status changes (e.g., "Your application was accepted").
6. Admin Panel
• Admin users can manage job listings, users, and applications via Django's built-in Admin
Interface.
7. Database Design
• Models: Use Django ORM to create models for User, Company, JobPost, Application,
and Notification.
• Relationships:
• Celery: For background tasks such as sending email notifications and handling time-
consuming operations.
• Pillow: For image handling (profile picture uploads).
• React-Redux: For managing the global state (e.g., user authentication, notifications, job
listings).
• React-Bootstrap or Material-UI: For UI components.
• Formik or React Hook Form: For managing forms (e.g., user profiles, job applications).
class User(AbstractUser):
class Company(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
company_name = models.CharField(max_length=255)
location = models.CharField(max_length=255)
class JobPost(models.Model):
company = models.ForeignKey(Company, on_delete=models.CASCADE)
title = models.CharField(max_length=255)
description = models.TextField()
salary_range = models.CharField(max_length=100)
location = models.CharField(max_length=255)
posted_at = models.DateTimeField(auto_now_add=True)
class JobSeekerProfile(models.Model):
skills = models.CharField(max_length=255)
resume = models.FileField(upload_to='resumes/')
class Application(models.Model):
applied_at = models.DateTimeField(auto_now_add=True)
class Notification(models.Model):
created_at = models.DateTimeField(auto_now_add=True)
is_read = models.BooleanField(default=False)
Frontend (React)
Pages / Components:
1. Homepage:
4. Company Dashboard:
6. Real-time Notifications:
o A notification component that listens for real-time updates from the backend.
} catch (error) {
setMessage("There was an error submitting your application.");
} finally {
setLoading(false);
};
return (
<div>
<button onClick={handleApply} disabled={loading}>
</button>
</div>
);
};
Conclusion:
This Job Board Platform will showcase your ability to work with React, Django, Django
REST Framework, WebSockets, and real-time notifications. This project will highlight your
full-stack development skills, making it an excellent addition to your portfolio