Skip to content

Commit cba5ba5

Browse files
megoxvmegoxv
committed
Initial commit
1 parent 0247603 commit cba5ba5

37 files changed

+955
-7
lines changed

‎app/layout.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ const inter = Inter({ subsets: ['latin'] });
1010
export const metadata: Metadata = {
1111
title: 'PBL Platform - Learn Programming by Building Real Projects',
1212
description: 'Master coding through real-world projects with community-curated tutorials. Learn JavaScript, Python, React & more with hands-on guides. Start building portfolio projects today!',
13+
verification: {
14+
google: process.env.NEXT_PUBLIC_VERIFICATION_GOOGLE
15+
}
1316
};
1417

1518
export default function RootLayout({

‎app/page.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Link from "next/link";
66
import { Card } from "@/components/ui/card";
77
import { Button } from "@/components/ui/button";
88
import { Skeleton } from "@/components/ui/skeleton";
9+
import Image from "next/image";
910

1011
interface Language {
1112
name: string;
@@ -113,14 +114,19 @@ export default function Home() {
113114
<Card className="p-6 hover:shadow-lg transition-shadow">
114115
<div className="flex items-center space-x-4">
115116
<div className="w-12 h-12 flex items-center justify-center rounded-lg bg-primary/10">
116-
<img
117+
<Image
118+
width={32}
119+
height={32}
117120
src={language.icon}
118121
alt={language.name}
119122
className="w-8 h-8"
123+
loading="lazy"
120124
/>
121125
</div>
122126
<div>
123-
<h3 className="text-xl font-semibold">{language.name}</h3>
127+
<h3 className="text-xl font-semibold">
128+
{language.name.charAt(0).toUpperCase() + language.name.slice(1).replace(/-/g, ' ')}
129+
</h3>
124130
<p className="text-sm text-muted-foreground">
125131
{language.count} {language.count === 1 ? "Project" : "Projects"}
126132
</p>

‎app/tutorials/[language]/[slug]/page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ export default async function TutorialPage({ params }: { params: Promise<{ langu
109109
src={data.image}
110110
alt={data.title}
111111
className="w-full rounded-lg mb-8 aspect-video object-cover"
112+
loading="lazy"
112113
/>
113114
)}
114115
<div className="prose dark:prose-invert max-w-none">

‎app/tutorials/[language]/tutorial-list.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ export default function TutorialList({ language }: { language: string }) {
165165
src={tutorial.frontmatter.image}
166166
alt={tutorial.frontmatter.title}
167167
className="object-cover w-full h-full"
168+
loading="lazy"
168169
/>
169170
<Badge
170171
className="absolute top-2 right-2"

‎content/flutter/collaborative-rich-text-editing-flutter-appwrite.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: "Create a Collaborative Rich Text Editing Experience with Flutter Web and Appwrite"
3+
description: "Learn how to build a collaborative rich text editing application using Flutter for the frontend and Appwrite for the backend. This tutorial covers real-time collaboration, user authentication, and rich text editing features."
4+
technologies: Flutter, Appwrite, Real-time Collaboration, Rich Text Editing, Fullstack Development
5+
difficulty: "intermediate"
6+
url: "https://youtu.be/0_GJ1w_iG44?si=6o6NlH_S9p0na8ys"
7+
image: "https://img.youtube.com/vi/0_GJ1w_iG44/maxresdefault.jpg"
8+
---
9+
10+
## Tutorial Content
11+
12+
In this tutorial, you'll learn how to build a collaborative rich text editing application using Flutter for the frontend and Appwrite for the backend. Here's what we'll cover:
13+
14+
1. **Setting Up the Project**:
15+
- Initialize a Flutter project for the frontend.
16+
- Set up Appwrite for backend services, including real-time database and user authentication.
17+
2. **Building the Frontend**:
18+
- Create a responsive and user-friendly interface for rich text editing.
19+
- Implement features like text formatting, collaboration, and user authentication.
20+
3. **Implementing Backend Functionality**:
21+
- Set up real-time database functionality in Appwrite for collaborative editing.
22+
- Implement user authentication to secure the application.
23+
4. **Adding Key Features**:
24+
- Enable real-time collaboration so multiple users can edit the same document simultaneously.
25+
- Add rich text editing features like bold, italics, underline, and more.
26+
- Implement user authentication for secure login and signup.
27+
5. **Deploying the Application**:
28+
- Deploy the Flutter app to a platform like Google Play Store, Apple App Store, or web.
29+
- Configure Appwrite for production use.
30+
6. **Enhancing the App**: Add features like document sharing, version history, or integration with third-party services.
31+
32+
By the end of this tutorial, you'll have a fully functional collaborative rich text editing application with real-time collaboration and user authentication, ready for production. This project is perfect for intermediate developers looking to explore full-stack development and real-time collaboration features.

‎content/flutter/flutter-3-10-master-class-ticket-booking-app.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: "Flutter 3.10.0 Master Class for Beginners to Advanced | Ticket Booking App Development Tutorial"
3+
description: "Learn how to build a ticket booking app using Flutter 3.10.0. This tutorial covers everything from basic Flutter concepts to advanced features like state management, API integration, and responsive design."
4+
technologies: Flutter 3.10.0, Dart, API Integration, State Management, Responsive Design
5+
difficulty: "beginner to advanced"
6+
url: "https://youtu.be/71AsYo2q_0Y?si=6XUP-zfxW3ci15jN"
7+
image: "https://img.youtube.com/vi/71AsYo2q_0Y/maxresdefault.jpg"
8+
---
9+
10+
## Tutorial Content
11+
12+
In this tutorial, you'll learn how to build a ticket booking app using Flutter 3.10.0. Here's what we'll cover:
13+
14+
1. **Setting Up the Project**:
15+
- Initialize a Flutter project.
16+
- Set up the project structure and dependencies.
17+
2. **Building the Frontend**:
18+
- Create a responsive and user-friendly interface for browsing events, selecting seats, and booking tickets.
19+
- Implement features like event listings, seat selection, and booking confirmation.
20+
3. **Implementing Backend Functionality**:
21+
- Set up API routes for handling event data, seat availability, and booking requests.
22+
- Use a backend service (e.g., Firebase or a custom backend) for storing and retrieving data.
23+
4. **Adding Key Features**:
24+
- Enable user authentication for secure access to the app.
25+
- Implement state management to handle app state and user interactions.
26+
- Add features like booking history, event search, and notifications.
27+
5. **Deploying the Application**:
28+
- Deploy the Flutter app to a platform like Google Play Store or Apple App Store.
29+
- Configure the backend for production use.
30+
6. **Enhancing the App**: Add features like payment integration, push notifications, or integration with third-party services.
31+
32+
By the end of this tutorial, you'll have a fully functional ticket booking app with a sleek design and advanced features, ready for production. This project is perfect for developers of all levels looking to explore Flutter development and build real-world applications.

‎content/flutter/flutter-ecommerce-app-food-delivery.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: "Flutter E-commerce App With Backend | Food Delivery App"
3+
description: "Learn how to build a full-stack food delivery app using Flutter for the frontend and a backend service. This tutorial covers e-commerce features, user authentication, and order management."
4+
technologies: Flutter, Backend Integration, ECommerce, Food Delivery, Fullstack Development
5+
difficulty: "intermediate"
6+
url: "https://youtu.be/7dAt-JMSCVQ?si=sBBwOxgzXKMpbSvT"
7+
image: "https://img.youtube.com/vi/7dAt-JMSCVQ/maxresdefault.jpg"
8+
---
9+
10+
## Tutorial Content
11+
12+
In this tutorial, you'll learn how to build a full-stack food delivery app using Flutter for the frontend and a backend service. Here's what we'll cover:
13+
14+
1. **Setting Up the Project**:
15+
- Initialize a Flutter project for the frontend.
16+
- Set up a backend service (e.g., Firebase or Node.js) for handling data and authentication.
17+
2. **Building the Frontend**:
18+
- Create a responsive and user-friendly interface for browsing restaurants and menu items.
19+
- Implement features like user authentication, cart management, and order tracking.
20+
3. **Implementing Backend Functionality**:
21+
- Set up API routes for handling restaurant data, user authentication, and order management.
22+
- Use a database to store restaurant, menu, and user information.
23+
4. **Adding Key Features**:
24+
- Implement user authentication for secure login and signup.
25+
- Add cart functionality for users to add and remove items.
26+
- Enable order tracking and history for users.
27+
5. **Deploying the Application**:
28+
- Deploy the Flutter app to a platform like Google Play Store or Apple App Store.
29+
- Deploy the backend service to a platform like Firebase or Heroku.
30+
6. **Enhancing the App**: Add features like payment integration, push notifications, or integration with third-party services.
31+
32+
By the end of this tutorial, you'll have a fully functional food delivery app with a backend, ready for production. This project is perfect for intermediate developers looking to explore full-stack development and e-commerce applications.

‎content/flutter/flutter-firebase-instagram-clone.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: "Flutter & Firebase Course - Build a Full Stack Instagram Clone"
3+
description: "Learn how to build a full-stack Instagram clone using Flutter for the frontend and Firebase for the backend. This tutorial covers user authentication, post creation, real-time updates, and more."
4+
technologies: Flutter, Firebase, User Authentication, Real-time Updates, Fullstack Development
5+
difficulty: "intermediate"
6+
url: "https://youtu.be/mEPm9w5QlJM?si=DawFXX7_endUfn6v"
7+
image: "https://img.youtube.com/vi/mEPm9w5QlJM/maxresdefault.jpg"
8+
---
9+
10+
## Tutorial Content
11+
12+
In this tutorial, you'll learn how to build a full-stack Instagram clone using Flutter for the frontend and Firebase for the backend. Here's what we'll cover:
13+
14+
1. **Setting Up the Project**:
15+
- Initialize a Flutter project for the frontend.
16+
- Set up Firebase for backend services, including authentication, Firestore, and storage.
17+
2. **Building the Frontend**:
18+
- Create a responsive and user-friendly interface for browsing posts, uploading images, and interacting with other users.
19+
- Implement features like user authentication, post creation, and real-time updates.
20+
3. **Implementing Backend Functionality**:
21+
- Set up Firebase Authentication for secure login and signup.
22+
- Use Firestore for storing and retrieving posts, comments, and user data.
23+
- Implement Firebase Storage for handling image uploads.
24+
4. **Adding Key Features**:
25+
- Enable user authentication for secure access to the app.
26+
- Implement post creation and real-time updates for new posts and comments.
27+
- Add features like liking posts, following users, and viewing user profiles.
28+
5. **Deploying the Application**:
29+
- Deploy the Flutter app to a platform like Google Play Store or Apple App Store.
30+
- Configure Firebase for production use.
31+
6. **Enhancing the App**: Add features like push notifications, direct messaging, or integration with third-party services.
32+
33+
By the end of this tutorial, you'll have a fully functional Instagram clone with user authentication, post creation, and real-time updates, ready for production. This project is perfect for intermediate developers looking to explore full-stack development and social media applications.

‎content/flutter/flutter-firebase-tiktok-clone-getx.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: "Flutter with Firebase Backend Project - Full Stack Tiktok Clone App | GetX"
3+
description: "Learn how to build a full-stack TikTok clone using Flutter for the frontend and Firebase for the backend. This tutorial covers video uploading, real-time feeds, user authentication, and state management with GetX."
4+
technologies: Flutter, Firebase, GetX, Video Streaming, User Authentication, Fullstack Development
5+
difficulty: "intermediate"
6+
url: "https://youtu.be/4E4V9F3cbp4?si=3pypvKWBQVuLJ1g9"
7+
image: "https://img.youtube.com/vi/4E4V9F3cbp4/maxresdefault.jpg"
8+
---
9+
10+
## Tutorial Content
11+
12+
In this tutorial, you'll learn how to build a full-stack TikTok clone using Flutter for the frontend and Firebase for the backend. Here's what we'll cover:
13+
14+
1. **Setting Up the Project**:
15+
- Initialize a Flutter project for the frontend.
16+
- Set up Firebase for backend services, including authentication, Firestore, and storage.
17+
- Integrate GetX for state management and navigation.
18+
2. **Building the Frontend**:
19+
- Create a responsive and user-friendly interface for browsing videos, uploading content, and interacting with other users.
20+
- Implement features like video playback, likes, comments, and user profiles.
21+
3. **Implementing Backend Functionality**:
22+
- Set up Firebase Authentication for secure login and signup.
23+
- Use Firestore for storing and retrieving video metadata, comments, and user data.
24+
- Implement Firebase Storage for handling video uploads and streaming.
25+
4. **Adding Key Features**:
26+
- Enable user authentication for secure access to the app.
27+
- Implement video uploading and real-time video feeds.
28+
- Add features like liking videos, commenting, and following users.
29+
5. **Deploying the Application**:
30+
- Deploy the Flutter app to a platform like Google Play Store or Apple App Store.
31+
- Configure Firebase for production use.
32+
6. **Enhancing the App**: Add features like push notifications, direct messaging, or integration with third-party services.
33+
34+
By the end of this tutorial, you'll have a fully functional TikTok clone with user authentication, video uploading, and real-time feeds, ready for production. This project is perfect for intermediate developers looking to explore full-stack development and social media applications.

‎content/flutter/flutter-firebase-zoom-clone-tutorial.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: "Flutter Firebase Backend Course for Beginners - Zoom Clone | Video Conferencing App"
3+
description: "Learn how to build a Zoom-like video conferencing app using Flutter and Firebase. This tutorial covers video calling, user authentication, and real-time communication for beginners."
4+
technologies: Flutter, Firebase, Video Conferencing, User Authentication, Real-time Communication
5+
difficulty: "beginner"
6+
url: "https://youtu.be/sMA1dKbv33Y?si=eQdl6zIgGTFQOrJR"
7+
image: "https://img.youtube.com/vi/sMA1dKbv33Y/maxresdefault.jpg"
8+
---
9+
10+
# Tutorial Content
11+
12+
In this tutorial, you'll learn how to build a Zoom-like video conferencing app using Flutter and Firebase. Here's what we'll cover:
13+
14+
1. **Setting Up the Project**:
15+
- Initialize a Flutter project for the frontend.
16+
- Set up Firebase for backend services, including authentication and real-time database.
17+
2. **Building the Frontend**:
18+
- Create a responsive and user-friendly interface for video conferencing.
19+
- Implement features like video calling, user authentication, and meeting scheduling.
20+
3. **Implementing Backend Functionality**:
21+
- Set up Firebase Authentication for secure login and signup.
22+
- Use Firebase Firestore for storing and retrieving meeting data and user information.
23+
- Integrate a video SDK (e.g., Agora or Jitsi) for real-time video communication.
24+
4. **Adding Key Features**:
25+
- Enable user authentication for secure access to the app.
26+
- Implement video calling functionality with real-time audio and video.
27+
- Add features like meeting invitations, chat functionality, and screen sharing.
28+
5. **Deploying the Application**:
29+
- Deploy the Flutter app to a platform like Google Play Store or Apple App Store.
30+
- Configure Firebase for production use.
31+
6. **Enhancing the App**: Add features like recording meetings, push notifications, or integration with third-party services.
32+
33+
By the end of this tutorial, you'll have a fully functional video conferencing app with user authentication and real-time communication, ready for production. This project is perfect for beginners looking to explore Flutter and Firebase for building real-world applications.

‎content/flutter/flutter-master-class-travel-app-cubit.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: "Flutter Master Class Travel App | Flutter 3.13.0 for Beginners to Advanced | iOS & Android Cubit"
3+
description: "Learn how to build a travel app using Flutter 3.13.0. This tutorial covers everything from basic Flutter concepts to advanced features like state management with Cubit, API integration, and responsive design."
4+
technologies: Flutter 3.13.0, Dart, Cubit (State Management), API Integration, Responsive Design
5+
difficulty: "beginner to advanced"
6+
url: "https://youtu.be/x4DydJKVvQk?si=ZHYxgpD6SraC8ddu"
7+
image: "https://img.youtube.com/vi/x4DydJKVvQk/maxresdefault.jpg"
8+
---
9+
10+
## Tutorial Content
11+
12+
In this tutorial, you'll learn how to build a travel app using Flutter 3.13.0. Here's what we'll cover:
13+
14+
1. **Setting Up the Project**:
15+
- Initialize a Flutter project.
16+
- Set up the project structure and dependencies.
17+
2. **Building the Frontend**:
18+
- Create a responsive and user-friendly interface for browsing travel destinations, booking trips, and viewing itineraries.
19+
- Implement features like destination listings, trip booking, and itinerary management.
20+
3. **Implementing Backend Functionality**:
21+
- Set up API routes for handling destination data, booking requests, and user profiles.
22+
- Use a backend service (e.g., Firebase or a custom backend) for storing and retrieving data.
23+
4. **Adding Key Features**:
24+
- Enable user authentication for secure access to the app.
25+
- Implement state management with Cubit to handle app state and user interactions.
26+
- Add features like booking history, destination search, and notifications.
27+
5. **Deploying the Application**:
28+
- Deploy the Flutter app to a platform like Google Play Store or Apple App Store.
29+
- Configure the backend for production use.
30+
6. **Enhancing the App**: Add features like payment integration, push notifications, or integration with third-party services.
31+
32+
By the end of this tutorial, you'll have a fully functional travel app with a sleek design and advanced features, ready for production. This project is perfect for developers of all levels looking to explore Flutter development and build real-world applications.

0 commit comments

Comments
 (0)