ITEX Information Technology Services
Course Objective
To equip students with the practical skills to build a full-stack, portfolio-ready
Management Information System (MIS). This course provides a comprehensive
understanding of modern front-end development by guiding students through the
entire project lifecycle—from initial setup and UI design with Tailwind CSS, through state
management and animations with Framer Motion, to backend integration with [Link]
API Routes and final deployment on Vercel.
Course Overview
This is an intensive, project-based course where students will build a functional
Management Information System (MIS) from the ground up. Over eight weeks, you will
develop a dynamic web application that allows for managing core business data entities,
such as clients and transactions. The curriculum is designed to simulate a real-world
development environment, emphasizing hands-on coding, version control with Git &
GitHub, and the integration of a modern tech stack including [Link], Tailwind CSS, and
Framer Motion.
Technologies Used
• Framework: [Link] (App Router, API Routes)
• Styling: Tailwind CSS
• Animation: Framer Motion
• Language: JavaScript (ES6+)
• Version Control: Git & GitHub
• Deployment: Vercel
• Development: [Link], VS Code
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 1
ITEX Information Technology Services
Course Roadmap
Week 1: Project Kickoff & Modern Development Setup
Topics:
This week focuses on laying the groundwork for a successful project. We will define the
scope of our MIS, covering core features like client profiles, record tracking, and a
dashboard for analytics. You'll be introduced to the modern tech stack that powers
today's web applications. A significant portion of the week is dedicated to mastering Git
and GitHub, the essential tools for version control and collaborative coding that every
professional developer uses.
Hands-On Practice:
You will install and configure [Link] and VS Code, setting up your personal coding
environment. We will initialize a local Git repository for your project and create a
corresponding repository on GitHub. You will learn the basic Git workflow: staging
changes, writing meaningful commit messages, and pushing your code to a remote
repository.
Assignment:
Complete the setup of your local development environment. Create the project's GitHub
repository and make the initial commit with a comprehensive [Link] file that
outlines the project's purpose, features, and technology stack.
Outcome:
By the end of this week, you will have a fully configured development environment, a
clear understanding of the project's goals, and foundational proficiency in the Git and
GitHub workflow that is critical for professional development.
Final Deliverables:
A live GitHub repository for the MIS project, containing the initial project structure and
README file.
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 2
ITEX Information Technology Services
Week 2: [Link] Foundations & Project Structure
Topics:
We dive into [Link], the powerful React framework you'll use to build the MIS. You'll
learn how to bootstrap a new project using the modern App Router, understanding the
purpose of key files like [Link] for creating routes and [Link] for shared UI. The
core concept of file-based routing will be covered, demonstrating how to create and
navigate between pages like Dashboard, Clients, and Records effortlessly.
Hands-On Practice:
You will run npx create-next-app@latest to generate your project foundation. Then,
you'll build the main page routes and construct a foundational layout component that
includes a navigation menu, ensuring a consistent user interface across the entire
application.
Assignment:
Build the skeletal structure of the MIS with three main pages (Dashboard, Clients,
Records) and a consistent layout that includes a header and navigation sidebar.
Outcome:
You will gain the ability to create and structure a [Link] project using the App Router,
understand how file-based routing works, and be able to build reusable layout
components to maintain consistency.
Final Deliverables:
A locally running [Link] application with basic routing and a unified layout structure.
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 3
ITEX Information Technology Services
Week 3: Styling with Tailwind CSS
Topics:
This week is dedicated to crafting a beautiful and responsive user interface with Tailwind
CSS. We will explore the utility-first CSS methodology, which allows for rapid and
consistent UI development. You'll learn essential utilities for controlling spacing,
typography, colors, and flexbox/grid layouts. We will also cover how to configure
Tailwind in a [Link] project and use its built-in responsive breakpoints to ensure your
MIS looks great on all devices.
Hands-On Practice:
You will style the layout components built in Week 2, creating a professional-looking
header, footer, and sidebar. You'll build a responsive dashboard using CSS Grid to create
a stat card layout and style the data tables on the Clients and Records pages for optimal
readability.
Assignment:
Apply Tailwind CSS comprehensively to transform the skeletal application from Week 2
into a fully styled, polished, and responsive UI.
Outcome:
You will master the utility-first workflow for rapid UI development and be able to build
fully responsive, visually consistent interfaces without writing custom CSS.
Final Deliverables:
A fully styled, responsive front-end for the MIS that is ready for dynamic functionality.
Week 4: Building Dynamic UI Components
Topics:
Now we bring the application to life with interactivity. We'll introduce
React's useState Hook to manage component state, which is crucial for handling user
input. You will learn how to build controlled forms for adding new data entities, such as
clients, and how to handle form submissions. The week concludes with rendering
dynamic lists of data, a fundamental pattern for displaying information from an array.
Hands-On Practice:
You will build an "Add New Client" form with relevant input fields (e.g., name, email,
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 4
ITEX Information Technology Services
contact info). You'll manage the list of clients in state and create a function to add new
clients to that list. Finally, you will dynamically display the list of clients in a styled table
on the Clients page.
Assignment:
Implement the core client management feature, allowing users to add new clients and
view the entire client list in a dynamic table.
Outcome:
You will achieve proficiency in managing component state and handling user input in
React/[Link], and be able to create dynamic UIs that render from data arrays.
Final Deliverables:
A functional client management interface within the MIS, complete with a form and a
dynamic data table.
Week 5: Data Management & State
Topics:
We expand the application's data layer by introducing a second entity: business records
(e.g., projects, orders, transactions). You will learn to design a more complex state
structure that can handle relationships between data, such as linking a record to a
specific client. We'll cover the concept of "lifting state up" to share it between
components and how to build forms that include dynamic data, like a dropdown of
existing clients.
Hands-On Practice:
You will build an "Add New Record" form that includes a dropdown menu to select an
existing client. You'll implement the logic to correctly associate a new record with a
client and display all records in a table that shows related client information, creating a
true relational data view.
Assignment:
Build the complete record management system, ensuring it is fully integrated with the
existing client data.
Outcome:
You will develop the ability to design and manage complex application state, handle
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 5
ITEX Information Technology Services
relational data within a front-end application, and create sophisticated user interfaces
for data entry.
Final Deliverables:
A fully integrated record management interface that demonstrates a relationship
between two data entities.
Week 6: Animations & Interactivity with Framer Motion
Topics:
A great user experience is not just about functionality but also feel. This week, you'll
learn to use Framer Motion to add smooth animations and micro-interactions. We'll
cover the basics of the motion component, how to create page transitions, and how to
add interactive animations that respond to user actions like hovering and tapping. You'll
also learn how to stagger animations for list items to create a more polished feel.
Hands-On Practice:
You will add smooth page transitions between the Dashboard, Clients, and Records
pages. The stat cards on the dashboard will be animated to fade in on page load, and
you'll apply subtle but effective hover effects to buttons and table rows to enhance
interactivity and provide user feedback.
Assignment:
Integrate a suite of animations across the application to significantly improve the user
experience and professional polish.
Outcome:
You will be capable of using Framer Motion to create smooth, engaging, and
professional animations that elevate the perceived quality of your application.
Final Deliverables:
An animated and highly interactive user interface that provides a dynamic and engaging
user experience.
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 6
ITEX Information Technology Services
Week 7: Data Persistence & Full-Stack Integration
Topics:
We transition from a front-end-only application to a full-stack solution. You will learn
about [Link] API Routes, which allow you to build a backend directly within your [Link]
project. We'll create CRUD (Create, Read, Update, Delete) endpoints for our clients and
records. Finally, we will refactor the frontend to fetch data from these API routes and
submit form data to them, replacing the temporary client-side state.
Hands-On Practice:
You will create /api/clients and /api/records API routes with endpoints for fetching
data and creating new entries. You will then refactor your frontend components to use
the useEffect Hook and fetch to load data from the API when the component mounts,
and update your forms to submit data to the API.
Assignment:
Replace the application's client-side state with a persistent backend using [Link] API
Routes, making the data persistent across browser sessions.
Outcome:
You will gain a practical understanding of full-stack development within [Link] and the
ability to create a backend API and connect it to a frontend React application.
Final Deliverables:
A full-stack application with persistent data, where all client and record information is
managed through a custom backend API.
Week 8: Final Polish, Deployment & Demo Day
Topics:
In the final week, we focus on polishing the application and preparing it for the real
world. We'll cover code cleanup and review best practices. You'll learn to implement
essential UX features like loading states and error handling to make the app more
robust. Finally, we will walk through the process of deploying the application to Vercel, a
platform built by the creators of [Link], for seamless global deployment.
Hands-On Practice:
You will add loading spinners to forms and data-fetching operations, and implement
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 7
ITEX Information Technology Services
user-friendly error messages. You'll perform a final review of the UI and responsiveness.
The culmination of the course will be connecting your GitHub repository to Vercel to
trigger automatic deployments whenever you push changes.
Assignment:
Prepare the final application for deployment, implement key polish features, and create
a short presentation to demo your finished MIS.
Outcome:
You will acquire the skills to polish a project to a production-ready standard and gain
the experience of deploying a full-stack [Link] application to a global CDN.
Final Deliverables:
A live, publicly accessible Management Information System deployed on Vercel, and a
final demo presentation showcasing the complete, full-stack project.
Address: Kart-e-3, Pul-e-Surkh Square, Mili Market, 3rd Floor Office #S-45 8