Module 10: Final Project – Full-Stack App - Next.js සිංහල පාඨමාලාව

ව්‍යාපෘති දළ විශ්ලේෂණය: Full-Stack Blog හෝ Notes යෙදුම

මෙම ව්‍යාපෘතියේ අරමුණ වන්නේ, ඔබ පෙර modules 9 පුරාවටම ඉගෙනගත් සංකල්ප ප්‍රායෝගිකව යොදාගැනීමයි. ඔබට කැමති මාතෘකාවක් තෝරාගත හැක - සරල Blog එකක්, To-Do List එකක්, නැතහොත් ব্যক্তিগত Notes තබාගැනීමේ යෙදුමක්. ප්‍රධානම දේ වන්නේ පහත සඳහන් තාක්ෂණයන් සහ features එහි අඩංගු වීමයි.

මෙය ඔබගේ portfolio එකට එකතු කරගත හැකි, ඔබගේ Next.js ችሎታ පෙන්වන කදිම නිර්මාණයක් වනු ඇත.

අනිවාර්ය Features (Core Requirements)

Module 7 Authentication: පරිශීලකයින්ට register වීමට සහ login/logout වීමට හැකි විය යුතුය. අපි මේ සඳහා NextAuth.js භාවිතා කරමු.
Module 6 CRUD API Routes: Login වූ පරිශීලකයින්ට Posts/Notes නිර්මාණය කිරීමට (Create), බැලීමට (Read), යාවත්කාලීන කිරීමට (Update), සහ මැකීමට (Delete) හැකි විය යුතුය. මේ සඳහා අපි Next.js API Routes ගොඩනගමු.
Module 4, 5 Database Integration: දත්ත ස්ථිරව තැන්පත් කිරීමට database එකක් භාවිතා කළ යුතුය. MongoDB Atlas (Mongoose සමග), Supabase (PostgreSQL), හෝ PlanetScale (MySQL) වැනි නොමිලේ ලබා දෙන cloud database එකක් භාවිතා කිරීම වඩාත් සුදුසුය.
Module 3 Styling: යෙදුමේ UI එක Tailwind CSS භාවිතයෙන් අලංකාරවත්ව නිර්මාණය කළ යුතුය. Responsive design (mobile-friendly) بودن අනිවාර්ය වේ.
Module 2 Routing: සියලුම posts පෙන්වන පිටුවක් (`/posts`), එක් post එකක් පෙන්වන dynamic පිටුවක් (`/posts/[id]`), සහ නව post එකක් සාදන පිටුවක් (`/posts/new`) වැනි routes තිබිය යුතුය.
Module 9 Deployment: අවසන් යෙදුම Vercel වෙත deploy කර, සජීවී URL එකක් ලබා ගත යුතුය.

ව්‍යාපෘතිය නිම කිරීමට යෝජිත පියවර (Suggested Steps)

Project Setup:
`npx create-next-app@latest my-final-project --typescript --tailwind --eslint` command එක භාවිතයෙන් Tailwind CSS සමඟ නව Next.js project එකක් සාදාගන්න. ඉන්පසු එය GitHub repository එකකට push කරන්න.
Database සහ Schema Setup:
ඔබ තෝරාගත් cloud database provider (උදා: MongoDB Atlas) හි account එකක් සාදා, database එකක් නිර්මාණය කරගන්න. Prisma වැනි ORM (Object-Relational Mapper) එකක් භාවිතා කර `User` සහ `Post` (or `Note`) සඳහා schema (models) නිර්මාණය කරගන්න. Prisma මගින් database migrations සහ type-safe queries සිදු කිරීම ඉතා පහසු කරයි.
Authentication (NextAuth.js):
NextAuth.js install කර, `[...nextauth].js` file එක සකසන්න. Credentials Provider (email/password) සහ GitHub/Google වැනි OAuth provider එකක් හෝ දෙකක් එකතු කරන්න. Register/Login UI එක නිර්මාණය කරන්න.
API Routes (CRUD):
`/api/posts` සහ `/api/posts/[id]` වැනි API endpoints නිර්මාණය කරන්න. එක් එක් endpoint එකේදී, අදාළ HTTP method එකට (`GET`, `POST`, `PUT`, `DELETE`) අනුව database එක සමඟ communicate කිරීමට Prisma Client එක භාවිතා කරන්න. API routes, `getSession` භාවිතයෙන් ආරක්ෂා කිරීමට අමතක නොකරන්න.
Frontend Pages සහ Components:
UI එක ගොඩනගන්න.
- Layout: Navbar සහ Footer සහිත ප්‍රධාන layout එකක් සාදන්න. Navbar එකේ login status එකට අනුව "Login" හෝ "Logout" button එකක් පෙන්වන්න.
- Post List Page (`/posts`): `getServerSideProps` හෝ `getStaticProps` භාවිතයෙන් සියලුම posts fetch කර පෙන්වන්න.
- Single Post Page (`/posts/[id]`): අදාළ post එකේ සම්පූර්ණ විස්තර පෙන්වන්න. Post එකේ හිමිකරුට පමණක් "Edit" සහ "Delete" buttons පෙනෙන සේ සකසන්න.
- New/Edit Post Form: Post එකක් සෑදීමට සහ edit කිරීමට form එකක් සහිත component එකක් සාදන්න. Form submission එකේදී, `fetch` API එක භාවිතයෙන් අපේ backend API routes වලට `POST` හෝ `PUT` requests යවන්න.
Deployment:
GitHub repository එක Vercel වෙත import කරන්න. Database connection string සහ NextAuth secret වැනි Environment Variables ටික Vercel project settings වලට එකතු කරන්න. Deploy කර, ඔබේ සජීවී යෙදුම ලෝකය සමඟ බෙදාගන්න!

ඔබට සුභ පැතුම්!

මෙම පාඨමාලාව සාර්ථකව නිම කිරීම ගැන ඔබට අපගේ උණුසුම් සුභ පැතුම්! ඔබ දැන් React සහ Next.js හි මූලික සිද්ධාන්ත වල සිට, full-stack යෙදුමක් ගොඩනගා, එය deploy කරන මට්ටම දක්වා විශාල දැනුමක් ලබාගෙන ඇත.

මෙම ව්‍යාපෘතිය අභියෝගයක් ලෙස සලකා, නිර්මාණශීලීව සිතා, ඔබ ඉගෙනගත් සියලු දේ යොදාගනිමින් එය නිම කරන්න. මතක තබා ගන්න, හොඳම ඉගෙනුම ලැබෙන්නේ ප්‍රායෝගිකව යමක් ගොඩනැගීමෙනි.

Keep building, keep learning!

« Module 9: Deployment & Optimization පාඨමාලාව අවසන් » මුල් පිටුවට

මෙම ව්‍යාපෘතිය අවසානයේ, ඔබට මෙවැනි පෙනුමක් ඇති, සම්පූර්ණයෙන්ම ක්‍රියාත්මක වන යෙදුමක් ලැබෙනු ඇත:

1 ಪೂರ್ವ-අවශ්‍යතා සහ Setup

ව්‍යාපෘතිය ආරම්භ කිරීමට පෙර, ඔබේ පරිගණකයේ පහත දෑ install කර ඇති බවට වග බලා ගන්න:

Node.js (v18.17 or higher)
MySQL Server: ඔබට local MySQL server එකක් හෝ PlanetScale වැනි නොමිලේ cloud-based MySQL database එකක් භාවිතා කළ හැක.
VS Code (Recommended Code Editor)

Project එක ආරම්භ කිරීම

පළමුව, Tailwind CSS සමඟ නව Next.js project එකක් සාදාගන්න.

npx create-next-app@latest pizza-app --tailwind --eslint

Project directory එකට ගොස්, Prisma install කරගන්න.

cd pizza-app
npm install prisma --save-dev
npx prisma init

මෙමගින් `prisma` නමින් folder එකක් සහ `.env` file එකක් හැදෙනවා. දැන් `.env` file එක open කර, ඔබේ MySQL database connection string එක `DATABASE_URL` එකට ලබා දෙන්න.

# .env file
DATABASE_URL="mysql://USER:PASSWORD@HOST:PORT/DATABASE"

2 Database Schema (Prisma සමඟ)

දැන් `prisma/schema.prisma` file එක open කර, අපේ Pizza සහ Order models සඳහා schema එක නිර්මාණය කරමු.

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model Pizza {
  id          Int     @id @default(autoincrement())
  name        String  @unique
  description String
  price       Float
  imageUrl    String
}

model Order {
  id           Int      @id @default(autoincrement())
  customerName String
  totalPrice   Float
  items        Json // Storing pizza details as JSON
  createdAt    DateTime @default(now())
}

Schema එක නිර්මාණය කළ පසු, පහත command එක run කර database එකේ අදාළ tables ටික හදාගන්න. මෙය Prisma Client එකද generate කරයි.

npx prisma migrate dev --name init

3 Backend: API Routes නිර්මාණය

දැන් අපේ frontend එකට data ලබා දීමට සහ orders භාර ගැනීමට අවශ්‍ය API endpoints ටික හදමු.

සියලුම Pizzas ලබාගැනීමේ API (`/api/pizzas`)

`pages/api/pizzas.js` file එක සාදා, database එකෙන් සියලුම pizza වර්ග fetch කරන logic එක ලියන්න.

// pages/api/pizzas.js
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const pizzas = await prisma.pizza.findMany();
      res.status(200).json(pizzas);
    } catch (error) {
      res.status(500).json({ message: 'Something went wrong!' });
    }
  }
}

Order එකක් භාරගැනීමේ API (`/api/orders`)

`pages/api/orders.js` file එක සාදා, නව order එකක් database එකේ save කරන logic එක ලියන්න.

// pages/api/orders.js
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const { customerName, totalPrice, items } = req.body;
      const order = await prisma.order.create({
        data: {
          customerName,
          totalPrice,
          items,
        },
      });
      res.status(201).json(order);
    } catch (error) {
      res.status(500).json({ message: 'Could not create order.' });
    }
  }
}

4 Frontend: UI එක ගොඩනැගීම

දැන් backend එක தயார். අපි frontend එක හදන්න පටන් ගමු.

Pizzas පෙන්වීම (`pages/index.js`)

මුල් පිටුවේදී, `getServerSideProps` භාවිතයෙන් pizza data ටික fetch කර, Tailwind CSS වලින් style කරපු card එකක පෙන්වමු.

// pages/index.js
export default function HomePage({ pizzas }) {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-4xl font-bold text-center my-8">Our Pizzas</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {pizzas.map(pizza => (
          <div key={pizza.id} className="border rounded-lg shadow-lg">
            {/* Pizza Card Component content here */}
            <img src={pizza.imageUrl} alt={pizza.name} className="w-full h-48 object-cover rounded-t-lg" />
            <div className="p-4">
              <h2 className="text-2xl font-semibold">{pizza.name}</h2>
              <p className="text-gray-600 mt-2">{pizza.description}</p>
              <p className="text-xl font-bold mt-4">Rs. {pizza.price.toFixed(2)}</p>
              <button className="mt-4 w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700">
                Add to Cart
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  // In a real app, fetch from your own API endpoint
  // For simplicity, we directly use Prisma here
  const { PrismaClient } = require('@prisma/client');
  const prisma = new PrismaClient();
  const pizzas = await prisma.pizza.findMany();
  
  // You might want to seed your database with some pizza data first!

  return {
    props: { pizzas },
  };
}

Shopping Cart (React Context API)

Cart එකේ state එක globalව manage කරන්න, React Context එකක් හදමු. `context/CartContext.js` file එක සාදන්න.

// context/CartContext.js
import { createContext, useState, useContext } from 'react';

const CartContext = createContext();

export function useCart() {
  return useContext(CartContext);
}

export function CartProvider({ children }) {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (pizza) => {
    // Logic to add pizza to cart
  };

  const placeOrder = async () => {
    const orderDetails = { /* ... */ };
    await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(orderDetails),
    });
    setCartItems([]); // Clear cart after order
  };

  const value = { cartItems, addToCart, placeOrder };

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

ඉන්පසු, `pages/_app.js` file එකේ ඔබේ app එක `CartProvider` එකෙන් wrap කරන්න.

5 Deployment

ඔබේ app එක සම්පූර්ණ වූ පසු, එය ලෝකයටම පෙනෙන සේ deploy කරමු.

ඔබේ project code එක GitHub repository එකකට push කරන්න.
Vercel.com වෙත ගොස්, ඔබේ GitHub account එකෙන් sign up/login වන්න.
Vercel dashboard එකේ "New Project" click කර, ඔබේ GitHub repository එක import කරන්න.
වැදගත්ම දේ: Vercel Project Settings > Environment Variables යටතේ, ඔබේ `.env` file එකේ ඇති `DATABASE_URL` එක add කරන්න.
"Deploy" button එක click කරන්න. මිනිත්තු කිහිපයකින් ඔබේ Pizza App එක සජීවීව ක්‍රියාත්මක වනු ඇත!

ඊළඟට කුමක්ද?

සුභ පැතුම්! ඔබ දැන් සම්පූර්ණ Full-Stack යෙදුමක් නිර්මාණය කර ඇත. ඔබට මෙය තවදුරටත් දියුණු කළ හැක:

User Authentication: NextAuth.js එකතු කර, orders user accounts වලට link කරන්න.
Order History: Login වූ userට තමන්ගේ පැරණි orders බැලීමට පිටුවක් හදන්න.
Admin Dashboard: ලැබෙන orders බැලීමට සහ pizza menu එක update කිරීමට admin පැනල් එකක් හදන්න.

Happy Coding!

Module 10: අවසාන ව්‍යාපෘතිය – Full-Stack Next.js App