Acesoftech Academy – Full Next.js + TypeScript Project Documentation
This project is a modern, responsive web application developed using Next.js with TypeScript and Tailwind CSS, tailored for Acesoftech Academy, a leading IT training institute. The website serves as both a promotional platform and a learning portal, showcasing various professional courses such as Web Development, Full Stack Development, and Digital Marketing.
The project follows a structured and scalable architecture under the src directory, adhering to best practices in component organization and data management. It includes a Home page with a dynamic course grid, built from a centralized JSON data source, and a course detail page that leverages Next.js’s dynamic routing capabilities to display specific information upon user interaction.
Additionally, the application contains static informational pages such as About, Services, Blog, and Contact, each styled consistently using Tailwind CSS. A reusable layout component can be implemented to maintain a consistent header, footer, and navigation bar across all pages.
TypeScript interfaces are used to enforce type safety for course data, improving code reliability and maintainability. Tailwind CSS ensures mobile responsiveness and streamlined styling without the need for complex CSS files. The inclusion of a detailed project structure, reusable components, and static assets makes this application both beginner-friendly and production-ready.
This project serves as a real-world example of combining a modern tech stack for an educational brand, providing both performance and developer productivity. It is ideal for training institutes, educational startups, or developers learning full-stack web development.
📁 Project Structure
src/
├── components/
│ └── Layout.tsx
├── data/
│ └── courses.json
├── pages/
│ ├── about.tsx
│ ├── blog.tsx
│ ├── contact.tsx
│ ├── courses/
│ │ └── [id].tsx
│ ├── index.tsx
│ └── services.tsx
├── styles/
│ └── globals.css
├── types/
│ └── course.ts
📘 Setup & Development Tutorial
1. Create a Next.js project with TypeScript:
npx create-next-app@latest acesoftech –typescript
2. Move all source files into the /src directory.
3. Setup Tailwind CSS using:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
4. Configure Tailwind in tailwind.config.js and import it in styles/globals.css.
5. Create reusable Layout.tsx and include header/footer here.
6. Build static pages: About, Services, Blog, Contact.
7. Display course data from a JSON file in index.tsx.
8. Create dynamic route pages/courses/[id].tsx for course details.
9. Use TypeScript interfaces for type safety.
10. Run your app: npm run dev
src/types/course.ts
export interface Course {
id: string;
name: string;
image: string;
price: string;
duration: string;
}
src/data/courses.json
[
{
“id”: “1”,
“name”: “4 MONTHS COURSE”,
“image”: “/images/boxes.jpg”,
“price”: “$200”,
“duration”: “4 Months”
},
{
“id”: “2”,
“name”: “6 MONTHS COURSE”,
“image”: “/images/boxes.jpg”,
“price”: “$300”,
“duration”: “6 Months”
},
{
“id”: “3”,
“name”: “1 YEAR COURSE”,
“image”: “/images/boxes.jpg”,
“price”: “$500”,
“duration”: “1 Year”
},
{
“id”: “4”,
“name”: “ADVANCED COURSE”,
“image”: “/images/boxes.jpg”,
“price”: “$700”,
“duration”: “4 Months”
}
]
src/pages/index.tsx
import Link from ‘next/link’;
import courses from ‘../data/courses.json’;
import { Course } from ‘../types/course’;
export default function Home() {
return (
<div className=”px-6 py-6″>
<h2 className=”text-xl bg-blue-600 text-white py-2 w-fit mx-auto px-4 rounded-md”>Our courses</h2>
<div className=”grid grid-cols-1 md:grid-cols-4 gap-6 mt-6″>
{courses.map((course: Course) => (
<Link key={course.id} href={`/courses/${course.id}`}>
<div className=”border rounded shadow hover:scale-105 transition-transform cursor-pointer”>
<img src={course.image} alt={course.name} className=”w-full” />
<p className=”bg-yellow-400 text-black font-bold py-2 text-center”>{course.name}</p>
</div>
</Link>
))}
</div>
</div>
);
}
src/pages/courses/[id].tsx
import { useRouter } from ‘next/router’;
import courses from ‘../../data/courses.json’;
import { Course } from ‘../../types/course’;
export default function CourseDetail() {
const router = useRouter();
const { id } = router.query;
const course = courses.find((c: Course) => c.id === id);
if (!course) return <div className=”p-6″>Course not found.</div>;
return (
<div className=”p-6″>
<h1 className=”text-2xl font-bold mb-4″>{course.name}</h1>
<img src={course.image} alt={course.name} className=”mb-4″ />
<p className=”mb-2 font-semibold”>Duration: {course.duration}</p>
<p className=”mb-2 font-semibold”>Price: {course.price}</p>
</div>
);
}
src/pages/about.tsx
export default function About() {
return (
<div className=”p-6″>
<h1 className=”text-2xl font-bold mb-4″>About Us</h1>
<p className=”text-gray-700″>Acesoftech Academy is a premier IT training institute based in Kolkata, India…</p>
</div>
);
}
src/pages/services.tsx
export default function Services() {
return (
<div className=”p-6″>
<h1 className=”text-2xl font-bold mb-4″>Our Services</h1>
<ul className=”list-disc ml-6 text-gray-700″>
<li>Web Development Training</li>
<li>Digital Marketing Courses</li>
<li>Full Stack Development</li>
</ul>
</div>
);
}
src/pages/blog.tsx
export default function Blog() {
return (
<div className=”p-6″>
<h1 className=”text-2xl font-bold mb-4″>Our Blog</h1>
<p className=”text-gray-700″>Stay tuned for articles and updates from Acesoftech Academy!</p>
</div>
);
}
src/pages/contact.tsx
export default function Contact() {
return (
<div className=”p-6″>
<h1 className=”text-2xl font-bold mb-4″>Contact Us</h1>
<p className=”text-gray-700″>Phone: +91 8583959528</p>
<p className=”text-gray-700″>Email: info@acesoftech.com</p>
</div>
);
}
Download Source Code: Github
Summary:
The Acesoftech Academy project is a fully functional web application built using Next.js, TypeScript, and Tailwind CSS. Designed with scalability and responsiveness in mind, it features a dynamic homepage listing various courses and static pages like About, Services, Blog, and Contact. Course data is stored in a JSON file and displayed dynamically using Next.js routing and TypeScript interfaces for strong typing.
Each course links to its own detail page, where users can view pricing, duration, and a course image. Tailwind CSS provides a clean, mobile-friendly UI without writing custom CSS. The use of a clear folder structure under the src directory, combined with reusable components and global styles, makes the project easy to maintain and extend.
Whether for educational institutions or as a learning template for developers, this project exemplifies how to build a real-world application using a modern front-end tech stack.
